各种心得记录

记录贴

Posted by Heber on April 28, 2018

说明

本文章用于记录一些在各种情况下得出的心得,以免忘记。本文章为汇总文章,将长期不固定更新。

将二维数组转化为根据父子关系构成的树形数组,树形数组通过简单的多层循环遍历可以很方便地生成多层嵌套菜单或者省市

<?php
class test{
	 public $arr_pa = [];
	 public $arr = array(
				    0=>array(
				        'cid'=>1,
				        'pid'=>0,
				        'name'=>'亚洲',
				    ),
				    1=>array(
				        'cid'=>2,
				        'pid'=>0,
				        'name'=>'北美洲',
				    ),
				    2=>array(
				        'cid'=>3,
				        'pid'=>1,
				        'name'=>'中国',
				    ),
				    3=>array(
				        'cid'=>4,
				        'pid'=>2,
				        'name'=>'美国',
				    ),
				    4=>array(
				        'cid'=>5,
				        'pid'=>3,
				        'name'=>'北京',
				    ),
				    5=>array(
				        'cid'=>6,
				        'pid'=>3,
				        'name'=>'河北',
				    ),
				    6=>array(
				        'cid'=>7,
				        'pid'=>5,
				        'name'=>'东城区',
				    ),
				    7=>array(
				        'cid'=>8,
				        'pid'=>5,
				        'name'=>'海淀区',
				    ),
				);

	 /**
	  * 生成子id父id相关数组,为后续构成目标数组做好准备。
	  * @Author   Heber
	  * @DateTime 2018-04-28
	  * @return   [type]     [description]
	  */
	   function test(){
	   		foreach ($this->arr as $key => $value) {
	   			$this->arr_pa[$value['cid']] = $value['pid'];
	   		}

	   		for($i=0;$i<count($this->arr_pa);$i++){
	   			$this->get_loop();
	   		}
	   		echo "<pre>";print_r($this->arr_pa);echo "<pre>";
	   		echo "<pre>";print_r($this->arr);echo "<pre>";
		}

/**
 * 将子数组压入父数组的children字段中,并且释放子数组。注意,一次压入一层。
 * @Author   Heber
 * @DateTime 2018-04-28
 * @return   [type]     [description]
 */
	function get_loop(){
		$id = 0;
		foreach ($this->arr as $key => $value) {
			//如果不是根数组,也不是某个数组的父系数组,则压入对应父系数组的children字段,并且释放该数组。
			if($value['pid'] != $id){
				$idd = array_search($value['cid'],$this->arr_pa);
				if(!$idd){
					$this->arr[$value['pid']-1]['children'][] = $value;
					unset($this->arr[$key],$this->arr_pa[$value['cid']]);
				}
			}
		}
	}


		
}

$res = new test();

关于history.back()、history.go()回退但无法刷新页面的问题

window.history.back();

这样确实可以做到后退的功能,但是项目中,常常并不只是后退就能完成需求,往往需要在后退的同时,刷新后退的页面信息,比如后退到首页同时刷新首页的最新数据,这样的需求通过上面这种方法就没法满足了,为了实现这个需求,我们需要使用到

document.referrer

这个方法可以取到上一个页面的具体路径,我们通过这个方法,再结合JS的跳转函数

window.location.href

就可以实现后退并且刷新的效果的,完整代码如下:

window.location.href = document.referrer; (亲测有效)

仿STEAM令牌验证码邮件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>HTML Email编写指南</title>

      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

     </head>


    <body style="margin: 0; padding: 0;">

     <table style="width: 538px; background-color: #393836;" cellpadding="0" cellspacing="0" align="center">

      <tr>
       <td bgcolor="#17212e"> 

    <table style="padding-left: 5px; padding-right: 5px; padding-bottom: 10px;" width="470" cellpadding="0" cellspacing="0" border="0" align="center">

     <tr bgcolor="#17212e">
      <td style="padding-top: 32px"> 
        <span style="padding-top: 16px; padding-bottom: 16px; font-size: 24px; color: #66c0f4; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">
                敬爱的用户:
            </span>
            <br>
         </td>
     </tr>
        
     <tr>
      <td style="padding-top: 12px">
            <span style="font-size: 17px; color: #c6d4df; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">
                <p>
                    以下是您注册账户所需的邮箱验证码:
                </p>
            </span>
    </td>
     </tr>

     <tr>
      <td>
            <div>
                <span style="font-size: 24px; color: #66c0f4; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">TZ678N</span>
            </div>
        </td>
     </tr>
    <tr bgcolor="#121a25">
        <td style="padding: 20px; font-size: 12px; line-height: 17px; color: #c6d4df; font-family: Arial, Helvetica, sans-serif;">
            <p>
                这封电子邮件生成是因为有人在注册设备监测账号时,输入了这个邮箱地址。如果不是您本人操作,请无视这封邮件。
            </p>
        </td>
    </tr>

    </table>
 </td>
      </tr>

     </table>

    </body>

    </html>

导航跳转后保持选中状态 jquery高亮当前选中菜单

简单地说,就是先获取当前页面的地址与导航栏里的a标签地址,然后进行匹配,如果相等,则表明是通过这个a标签跳转的,然后通过jq直接设置高亮样式,或者通过改变类来改变样式。

        var pageUrl = window.location.href;
        console.log(pageUrl);
        var aArray = $(".navs a");

        for (var i = 1; i < aArray.length; i++) {
            //高亮首页栏目
            if (pageUrl == aArray[i].href) {
                console.log(aArray[i].href);
                $(aArray[i]).css("color","green");
                // $(aArray[i]).addClass("current");
            }
        }

导航跳转后保持选中状态 jquery高亮当前选中菜单及父菜单

这是上面那个高亮的增强版,因为昨天做完那个高亮后,碰到了二级栏目的问题,需要在选中子导航栏之后高亮子导航栏及其父导航栏。

在生成导航栏的时候,设置id为导航栏在数据库存储的id(就是子导航栏的父id) 在生成子导航栏的时候,设置class为父导航栏id,这样,先直接遍历a标签寻找与当前页面地址相同的a标签,然后根据结果a标签的class来寻找父id,然后都设置高亮。缺陷是只适用于两层的导航栏。

        var pageUrl = window.location.href;

        var aArray = $(".navs a");

        for (var i = 0; i < aArray.length; i++) {

            if (pageUrl == aArray[i].href) {
                console.log(aArray[i].href);
                $(aArray[i]).css("color","green");
                // console.log(aArray[i].className);
                var Pid = aArray[i].className;
                $("#"+Pid).css("color","green");
                console.log(Pid);
            }

        }