JS实现循环给元素绑定事件

作者: 日期: 2017年5月10日 没有评论

        作为一个前端开发者，如果想对一些元素循环绑定事件的时候总是出现各种问题，尤其是在对闭包没有熟练掌握的时候更是一头雾水。网上一查，果然好多初学者有这个困惑，既然这个问题总是出现，于是在我就总结了以下两个比较好理解的解决方案，分享给大家：（可能有更好的方式我没有发现，请各位分享）。

HTML代码:

<div class="textwidget">  
        <span  class="textwidget">第一个</span>  
        <span  class="textwidget">第二个</span>  
        <span  class="textwidget">第三个</span>  
</div>

JS代码:

window.onload = function()   
{               
      var  spans = document.getElementsByClassName("textwidget");
      for(var i = 1; i < spans.length; i++)   
      {  
        spans[i].count = i;  
        spans[i].onmouseover = function()   
        {          
                this.style['margin-top'] = '-145px';
                this.style.display='block';     
        }
        spans[i].onmouseout = function()   
        {          
                this.style['margin-top'] = '0px';
                this.style.display='none';     
        }     
      }   
}

JS设置CSS样式的几种方式

作者: 日期: 2017年5月10日 没有评论

1. 直接设置style的属性  某些情况用这个设置 !important值无效

如果属性有'-'号，就写成驼峰的形式（如textAlign）  如果想保留 – 号，就中括号的形式  element.style['text-align'] = '100px';

element.style.height = '100px';

2. 直接设置属性（只能用于某些属性，相关样式会自动识别）

element.setAttribute('height', 100);
element.setAttribute('height', '100px');

3. 设置style的属性

element.setAttribute('style', 'height: 100px !important');

4. 使用setProperty  如果要设置!important，推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

5. 改变class   比如JQ的更改class相关方法

因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式

element.className = 'blue';
element.className += 'blue fb';

6. 设置cssText

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

PHP通用自定义分页处理

作者: 日期: 2017年5月5日 没有评论

①、先下载page.txt，更名为page.php。

②、用法（假设page.php已经被引用包含）

	if($_GET['action']=='all'){
		
		$cp = empty($_GET['p'])?1:$_GET['p'];//当前页码
		
		$rows = getrows($dbh,'posts');
		//echo "共有".$rows."行数据</br>";
		
		$pnums = get_all_pp($rows,$ppgs=5);//总页数
		//echo "总页数是:".$pnums."</br>";
		
		$pi = get_pi($cp,$ppgs=5);//limit $pi,$ppgs;
		//echo "当前limit:".$pi.",$ppgs</br>";
		
		$pv = 6;//定义可见的页码数量,$pv>0;
		
		$list_posts = get_data($dbh,'posts',$req=array(),$or='id',$ory='desc',$pi,$ppgs=5);
		
		$sp_html = xp_html($cp,$pv,$pnums,$dir,$admin=1,$php='do');
		
		//echo $sp_html."</br>";
		view($html="list",array('data'=>$data,'pghtml'=>$sp_html,'list_posts'=>$list_posts),'admin/',$dir);	
	}

③、关于view函数

//视图层模板控制
function view($html='index',$dt=array(),$admin,$dir=""){
	extract($dt);
 	/*if($admin == 'admin/'){
	         $xml = 	sim_load_xml();
	 } */
	//echo TEMPLATES_PATH.$admin.$dir.'/'.$html.'.html';
	include(TEMPLATES_PATH.$admin.'top.html');
	if($dir=='admin'){
		include(TEMPLATES_PATH.$admin.$html.'.html');
	}else{
		include(TEMPLATES_PATH.$admin.$dir.'/'.$html.'.html');		
	}
	include(TEMPLATES_PATH.$admin.'footer.html');
 }

④、效果(注意分页显示的样式)

I`5AI$@AIUBPGY}SDH%T@$L.png

用PDO同时向MySQL插入多条数据

作者: 日期: 2017年5月5日 没有评论

①、先看控制器层的业务逻辑

if($_POST){
		
	foreach($_FILES['fileinfo'] as $key=>$value){// $key value:name,type,tmp_name,error,size
		foreach($value as $ke=>$val){     // $ke value:1 2 3 4
			$arr[$ke][$key] = $val;
		}
	}
		
	$files_type=array("audio","video","image"); 
	
	foreach($arr as $k=>$v){
		if(!in_array(substr($v['type'],0,5),$files_type) || $v['size'] >= 8*1024*1024){
			echo "不支持".$v['name']."文件类型上传或文件尺寸大于8M";
			unset($arr[$k]);
		}else{
			$arr[$k]['utime'] =  time();	
			$arr[$k]['uid'] = $_SESSION['userid'];
		}	
	}
	
	
	if(!insert_multi($dbh,'media',$arr))
	{
		die("上传失败!");
	}
		
	view($html="list",array('data'=>$data),'admin/',$dir);	
}

②、模型层的业务逻辑

//通用多条插入
//insert into $table(param1,parm2,param3) values(value1,value2,value3),(value1,value2,value3);  
function insert_multi($dbh,$table,$data=array()){//$data['post']=$_POST;$data['files']=$arr;		
	//print_r($data);	
	foreach($data as $key=>$value){
		foreach($value as $ke=>$val){			
			//$data[$key]['id'] = null;			
			if($ke=='type'){
				$data[$key]['types']= $val;
				unset($data[$key][$ke]);
			}
			if($ke=='tmp_name'){
				$data[$key]['bin']= mysql_real_escape_string(file_get_contents($val));
				unset($data[$key][$ke]);
			}
			if($ke=='error'){
				unset($data[$key][$ke]);
			}		
		}
	}
	//print_r($data);	
	$keystr="";$valstr="";		
	for($i=0;$i<count($data);$i++){	
		//print_r($data[$i]);
 		foreach($data[$i] as $k=>$v){
			if($i==0){
				$keystr .= $k.",";				
			}
			$valstr .= "'".$v."',";	
		}
 		$valstr = substr($valstr,0,-1)."),(";  
	}
	
	$sql = "insert into $table(".substr($keystr,0,-1).") values(".substr($valstr,0,-2); 		
	//print_r($sql);
	return $dbh->query($sql);
}

点击按钮跳转到页面指定位置

作者: 日期: 2017年5月4日 没有评论

　　这里主要分为两种情况，分别是点击锚点实现跳转和点击button按钮实现跳转页面，下面就分别探讨一下两种方式的具体实现代码。
　　一：通过html锚点实现滚动定位到页面指定位置（DIV）：
　　如果我们要点击实现跳转的地方是一个html锚点，也就是点击一个A标签超链接实现跳转，可以把A标签的href属性直接指向跳转指定位置的div，代码实现思路如下：
　　<a href="#abc">点击跳转</a>
　　<div id="abc">将要跳转到这里</div>
　　点击上面A链接将会滚动跳转到同一页面中id="abc"的那个div处，需要注意的是跳转指定位置div的id是唯一的，A标签直接指向此id，id前面别忘了加上#号。
　　二：通过点击button按钮使用js实现滚定跳转到页面指定位置（DIV）：
　　如果我们要点击实现跳转的地方是一个button按钮的话，由于button不能添加href，所以我们只好使用js跳转代码来实现，具体代码示例如下：
　　<script>
　　　function onTopClick() {
　　　　window.location.hash = "#abc";
　　}
　　</script>
　　<input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
　　<div id="abc">跳转到的位置</div>
　　上面这段代码，点击提交按钮，将会滚定跳转定位到同一页面id="abc"的div处。这段js点击跳转页面代码实现的原理是：页面各元素赋予唯一ID，点击提交按钮触发js点击事件，js通过ID滚动跳转定位到该元素，window.location.hash = "#abc"指的就是定位到当前页面id="abc"的div。