评论 - lizhenqiu blog

#⁸⁵⁶

作者：广西南宁市

js将div中滚动条滚动到指定位置
Js代码：

onload = function () {
  //初始化
  scrollToLocation();
};
function scrollToLocation() {
  var mainContainer = $('#thisMainPanel'),
  scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
  //scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
  //非动画效果
  //mainContainer.scrollTop(
  //  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  //);
  //动画效果
  mainContainer.animate({
    scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
  }, 2000);//2秒滑动到指定位置
}

Run code

Cut to clipboard

Html代码：

<div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
    <div class="son-panel">我是类容区域-1</div>
    <div class="son-panel">我是类容区域-2</div>
    <div class="son-panel">我是类容区域-3</div>
    <div class="son-panel">我是类容区域-4</div>
    <div class="son-panel" style="height:160px;">我是类容区域-5</div>
    <div class="son-panel">我是类容区域-6</div>
    <div class="son-panel">我是类容区域-7</div>
    <div class="son-panel">我是类容区域-8</div>
</div>

Run code

Cut to clipboard

文章：CSS3可控旋转Js播放音乐按钮发表时间：2017-10-31, 18:11:56

展开↯

#⁸⁵⁷

作者：广西南宁市

html5 audio标签播放完成后事件

var audioaud = document.getElementById("fmmmedia");
audioaud.addEventListener('ended',function(){
		var ids = document.getElementById('fmmmedia');
		var target = document.getElementById('audio-btn');
        ids.pause();
		$(target).removeClass('on').addClass('off');
		$("#mmuslisss").hide();
	});

Run code

Cut to clipboard

文章：CSS3可控旋转Js播放音乐按钮发表时间：2017-10-31, 15:07:25

展开↯

#⁸⁵⁸

作者：广西南宁市

jquery each判断是否执行到最后一个元素

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    $ (function ()
    {
        var len = $ (":button").length;
        $ (":button").each (function (i, dom)
        {
            if (i === len - 1)
            {
                alert (i)
            }
        });
    })
</script>
</head>
<body>
    <button>toggle</button>
    <button>toggle</button>
    <button>toggle</button>
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-31, 12:26:08

展开↯

#⁸⁵⁹

作者：广西南宁市

weiphp onethinkphp 多个编辑器bug修复

\Addons\EditorForAdmin

Run code

Cut to clipboard

问题是由于框架没有考虑到一个页面多个uditor实例，所以框架中的写法是读取模型字段的时候，有编辑器类型的字段就引入ueditor的js文件，并创建1个imageEditor对象变量。但是这样有多个编辑器的情况下，ueditor初始化js文件和imageEditor肯定是会相互覆盖的。
我的解决方法是重写框架的加载方法，用静态变量判断是否已经加载了ueditor.all.js这个文件，如果加载了不重复加载。另外编辑器实例的创建使用!function(){}()风格，把imageEditor这个变量封装到函数中作为局部变量，千万不能放在全局中。

<else />
				<?php
					$_SESSION['nfasdfasdfsdasad']++;
					if($_SESSION['nfasdfasdfsdasad']==2){
				?>
			<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js?v={:SITE_VERSION}"></script>
			<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.all.js?v={:SITE_VERSION}"></script>
			<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js?v={:SITE_VERSION}"></script>
			<?php
				}
			?>
			<script type="text/javascript">
				$('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}');
				window.UEDITOR_HOME_URL = "__STATIC__/ueditor/";
				window.UEDITOR_CONFIG.initialFrameHeight = parseInt('{$addons_config.editor_height}');
				window.UEDITOR_CONFIG.scaleEnabled = <eq name="addons_config.editor_resize_type" value="1">true<else />false</eq>;
				window.UEDITOR_CONFIG.imageUrl = '{:addons_url("EditorForAdmin://Upload/ue_upimg")}';
				window.UEDITOR_CONFIG.imagePath = '';
				window.UEDITOR_CONFIG.imageFieldName = 'imgFile';
				//在这里扫描图片
				window.UEDITOR_CONFIG.imageManagerUrl='{:addons_url("EditorForAdmin://Upload/ue_mgimg")}';//图片在线管理的处理地址
        		window.UEDITOR_CONFIG.imageManagerPath='';        
				var imageEditor = UE.getEditor('editor_id_{$addons_data.name}');
				//添加一下判断是否是单个按钮管理图片 需要执行一下代码
				<if condition="isset($addons_data['btnClassName'])" >
				imageEditor.ready(function () {
					  //设置编辑器不可用
					  imageEditor.setDisabled();
					  //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
					  imageEditor.hide();
					  //侦听图片上传
					  imageEditor.addListener('beforeInsertImage', function (t, arg) {
						 //将地址赋值给相应的input,只去第一张图片的路径
						 //console.log(t);
						 //console.log(arg);
						 <if condition="empty($addons_data['is_mult'])" >
						 	 //单张情况
						 	 $(".{$addons_data.name}_preview").html("");
						 	 var imghtml = $("<img src="+arg[0].src+" width='100' height='100'/>");
							
							 $(".{$addons_data.name}_preview").append(imghtml);
							 //储存路劲
							 //单张图片存储图片id
							  $("#editor_id_{$addons_data.name}").text(arg[0].id);
							 //图片预览
							 $(".{$addons_data.name}_preview").show();
							 //微信预览
							 $('.weixin-cover-pic').attr('src',arg[0].src);
							 //console.log(arg);
							 
						 <else />
						 	//多张情况
						 	var srcs = "";
							var srcIds = "";
							 //$(".{$addons_data.name}_preview").html("");
							 for(var i=0;i<arg.length;i++){
								 if(i==arg.length-1){
									srcs = srcs + arg[i].src;
									srcIds = arg[i].id;
								 }else{
									 srcs = srcs + arg[i].src+"|";
									 srcIds = srcIds + arg[i].id+",";
									 }
								var imghtml = $("<img src="+arg[i].src+" width='100' height='100'/>");
								$(".{$addons_data.name}_preview").append(imghtml);
								//console.log(arg[i].src);	 
							 }
							 $(".{$addons_data.name}_preview").append(imghtml);
							  $(".{$addons_data.name}_preview").show();
							  var oldIds = $("#editor_id_{$addons_data.name}").text();
							  //多张图片存储一逗号分隔的id串
							  $("#editor_id_{$addons_data.name}").text(oldIds+","+srcIds);
						 </if>
					  })
					  //增加按钮className
					  $('.{$addons_data.btnClassName}').bind('click',function(){
							var uploadImage = imageEditor.getDialog("insertimage");
								uploadImage.open();
						  })
					 
				 });
				 </if>
			</script>
				<?php
					if($_SESSION['nfasdfasdfsdasad']>2) $_SESSION['nfasdfasdfsdasad']=1;
				?>
		</eq>

Run code

Cut to clipboard

#,广西南宁市,2017-10-31,10:18:48,

\Public\static\ueditor\ueditor.all.js

Run code

Cut to clipboard

id: 'ueditor_' + Math.random(),//me.uid,

Run code

Cut to clipboard

#,广西南宁市,2017-10-31,10:19:49,

\Addons\EditorForAdmin\content.html

Run code

Cut to clipboard

文章：weiphp微信第三方开发框架新增插件后列表页新增页面空白解决办法发表时间：2017-10-31, 10:16:29

展开↯

#⁸⁶⁰

作者：广西南宁市

可以使用亦或
int a = 2;
int b = 3;

a = a^b;
b = a^b;
a= a^b;

#,广西南宁市,2017-10-30,17:17:28, 你这种如果是两个对象交换就不行了把

#,广西南宁市,2017-10-30,17:17:42,@1, 只是基本类型交换基本类型大数据的交换节省个了很多性能

文章：js一些算法小技巧发表时间：2017-10-30, 17:17:16

展开↯

#⁸⁶¹

作者：广西南宁市

for(i in json)
最好写成 for(var i in json) 否则i就变成全局的了, 会污染整个window

文章：js一些算法小技巧发表时间：2017-10-30, 17:17:06

展开↯

#⁸⁶²

作者：广西南宁市

为 iPhoneX 而生的小效果
就是兼容不好，只有webkit内核支持。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		::-webkit-scrollbar{
			width: 0;
			height: 0;
		}
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
			background: #000;
		}
		body{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		ul{
			list-style: none;
		}
		li{
			padding: .5em;
			box-shadow: inset 0 0 10px #eee;
		}
		.wrap{
			position: relative;
			margin: 0 auto;
			width: 800px;
			height: 500px;
			overflow: auto;
			background: #fff;
			box-shadow: 0 0 15px #fff;
		}
		.po{
			position: absolute;
			left: 0;
			top: 155px;
			width: 30px;
			height: 190px;
			background: #000;
			border-radius: 0 100% 100% 0/0 100% 100% 0;
		}
		.fl{
			float: left;
			width: 40px;
			shape-outside: polygon(0 150px, 20px 152px, 30px 155px, 40px 170px, 40px 330px, 30px 345px, 20px 348px, 0 350px);
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="po"></div>
		<div class="fl"></div>
		<div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		var wrap = document.querySelector('.wrap');
		var ul = document.querySelector('.wrap ul');
		var fl = document.querySelector('.wrap .fl');
		var po = document.querySelector('.wrap .po');
		fl.style.height = ul.scrollHeight + 'px';
		wrap.onscroll = function(e){
			var s = wrap.scrollTop;
			fl.style.shapeOutside = 'polygon(0 '+(150+s)+'px, 20px '+(152+s)+'px, 30px '+(155+s)+'px, 40px '+(170+s)+'px, 40px '+(330+s)+'px, 30px '+(345+s)+'px, 20px '+(348+s)+'px, 0 '+(350+s)+'px)';
			po.style.top = 155 + s +'px';
		}
	</script>
</body>
</html>

Run code

Cut to clipboard

文章：利用CSS属性环绕布局Shapes绘制各个形状图形形状文本文字环绕特效发表时间：2017-10-28, 16:42:57

展开↯

#⁸⁶³

作者：广西南宁市

文章：利用CSS属性环绕布局Shapes绘制各个形状图形形状文本文字环绕特效发表时间：2017-10-28, 16:40:55

展开↯

#⁸⁶⁴

作者：广西南宁市

div等标签获取焦点绑定keypress等事件

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<style>
			.box{
				width: 300px;
				padding: 30px 20px;
				background-color: #f4d5e8;
				margin: 50px;
				font-size: 24px;
				color: #ccc;
				text-align: center;
			}
			#box2{
				color: #4c9579;
				background-color: #d5f4e8;
			}
			.box:focus{
				border: solid 1px #d5e8f4;
				box-shadow: 0 0 5px 2px #d5e8f4;
			}
		</style>
	</head>

	<body>
		<div class="box" id="box1">我不能获得焦点</div>
		<div class="box" id="box2" tabindex="1">点我可以获得焦点。因为我有【tabindex】属性</div>
		<script>
			document.getElementById('box2').onfocus = function(){
				this.innerHTML = "现在请敲击键盘！！";
			}
			
			document.getElementById('box2').onblur = function(){
				this.innerHTML = "点我可以获得焦点。因为我有【tabindex】属性";
			}
			
			//能获得焦点的div才可以使用keypress等键盘事件
			document.getElementById('box2').onkeypress = function(e){
				this.innerHTML = "只有获得焦点，才能用keypress等事件。您按的是【"+e.key+"】。";
			}
			
			//没有焦点的div等普通dom元素  就算绑定也没用！
			document.getElementById('box1').onkeypress = function(e){
				alert('就算绑定了也没用！！');
			}
		</script>
	</body>
</html>

Run code

Cut to clipboard

文章：让输入框获取焦点 JS 发表时间：2017-10-28, 14:44:07

展开↯

#⁸⁶⁵

作者：广西南宁市

table border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <style>
    table{border-collapse:collapse;border:1px solid #ddd;}
    th,td{border:1px solid #ddd;}
  </style>
</head>
<body>
<table>
  <tr><th>132</th><td>132</td></tr>
  <tr><th>132</th><td>132</td></tr>
</table>
</body>
</html>

Run code

Cut to clipboard

文章：实现表格每行随鼠标的移动改变颜色发表时间：2017-10-28, 14:43:13

展开↯

#⁸⁶⁶

作者：广西南宁市

canvas放大镜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#cvs{
				border: 1px solid red;
				box-shadow: 10px 10px 10px gray;
			}
		</style>
	</head>
	<body>
		<canvas id="cvs" width="1000" height="600"></canvas>
		<script type="text/javascript">
			var cvs = document.getElementById('cvs');
			var ctx = cvs.getContext('2d');
//			创建图片
			var img = new Image();
			img.src = "http://li.img.pan.lizhenqiu.com/f9fb4f79f59fad81f092f0d18265d759.jpg";
//			先将图片绘制到画布上
			img.onload = function(){
				ctx.beginPath();
//				从画布的原点开始绘制图片
				ctx.drawImage(img,0,0);
//				添加鼠标事件
				cvs.onmouseover = function(){
					cvs.onmousemove = function(e){
						//每次移动都要清除画布
						ctx.clearRect(0,0,cvs.width,cvs.height);
	//					再次将图片绘制到画布上
						ctx.drawImage(img,0,0);
//					移动的时候开始不断获取鼠标位置
						var ev = e||window.event;
//						获取鼠标相对于画布的位置
						var x = ev.clientX - cvs.offsetLeft;
						var y = ev.clientY - cvs.offsetTop;
//						开始绘制放大区域
						ctx.drawImage(img,x-50,y-50,100,100,x-100,y-100,200,200);
					}
				}
				cvs.onmouseout=function(){
					ctx.clearRect(0,0,cvs.width,cvs.height);
				}
			}
		</script>
	</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-28, 14:41:05

展开↯

#⁸⁶⁷

作者：广西南宁市

普遍失败才是正常的，难道“普遍成功”？
过半数成功，那是不符合市场规律的

文章：在创业这件事上，不成功是普遍常态，成功者才是异数发表时间：2017-10-28, 14:37:20

展开↯

#⁸⁶⁸

作者：广西南宁市

简单自动打字机效果，打完清空从头开始

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div></div>
	<script type="text/javascript">
		var count=0;
		var newstr="";
		var other = "|"
		var odiv = document.getElementsByTagName('div')[0]
		var timer = setInterval(function(){
			var str = "哈哈哈哈哈哈哈哈哈哈哈哈嗝~哈哈哈哈哈哈哈哈哈哈哈哈哈嗝~";
			newstr += str[count];
			odiv.innerHTML = newstr + other;
			count++;
			if(count == str.length+1){
				odiv.innerHTML = "";
				newstr = "";
				count=0;
				timer;
			}
		},200)
	</script>
</body>
</html>

Run code

Cut to clipboard

文章：JS打字机效果发表时间：2017-10-28, 11:40:55

展开↯

#⁸⁶⁹

作者：广西南宁市

JavaScript事件委托实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="box">
    <ul>
      <li>我是第1个li</li>
      <li>我是第2个li</li>
      <li>我是第3个li</li>
      <li>我是第4个li</li>
      <li>我是第5个li</li>
      <li>我是第6个li</li>
      <a>第一个a</a>
    </ul>
  </div>
  <script>
  var Obox = document.getElementById('box')
  Obox.addEventListener('click',function (e){
  var l = e.target
  while(l.tagName !== 'LI'){
    if(l === ul){
      l = null
      break;
    }
    l = l.parentNode
  }
 if (l) {
  alert(l.innerHTML);
  }
})

  </script>
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-28, 11:38:57

展开↯

#⁸⁷⁰

作者：广西南宁市

数组排序的一个实例--冒泡排序法

var arr = [453,43,4,6,46,34,4,7,1,5]//原数组
    for (var i = 0; i < arr.length-1; i++) {
      for (var j = 0; j < arr.length-1-i; j++) {
        if (arr[j]>arr[j+1]) {//判断如果j>j+1就交换位置
        var  temp = arr[j]
          arr[j]=arr[j+1]
          arr[j+1]=temp
        }
      }
    }
    document.write(arr);

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-28, 11:38:30

展开↯

#⁸⁷¹

作者：广西南宁市

利用indexOf()方法进行数组去重的实例

    var arr = ['32','23','4','12','4','35','64','4','35','64']//原数组
    var newarr = []//定义一个新数组
    for (var i = 0; i < arr.length; i++) {
      if (newarr.indexOf(arr[i])==-1) { //在新数组中查找有没有这个数，如果等于-1说明没找到
        newarr.push(arr[i])        
      }
    }
    document.write(newarr);

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-28, 11:38:11

展开↯

#⁸⁷²

作者：广西南宁市

document load 与document ready的区别
页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

文章：常用html、demo代码发表时间：2017-10-28, 11:34:09

展开↯

#⁸⁷³

作者：广西南宁市

javascript addEventListener中的 e.target和this的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="box">
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
    </ul>
</div>
<script>
    var oDiv= document.getElementById('box');

    oDiv.addEventListener('click',function (e){
        //event.target表示发生点击事件的元素
        //this 始终指向绑定事件的元素也就是div   和even.currentTarget相等
        var l = e.target;
        if (l) {
            alert(l.innerHTML);
        }
    })

</script>
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-28, 11:32:42

展开↯

#⁸⁷⁴

作者：广西南宁市

iphone浏览器不支持blur事件解决办法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" href="images/appicon.png">
<title>Website</title>
<style type="text/css">
#box {
	width: 80%;
	height: 120px;
	background: orange;
}
#box.visited {
	width: 100%;
	background: red;
}
#box.lose {
	width: 80%;
	background: orange;
}
</style>
</head>

<body>

<input id="input" name="" value="" type="">
<div id="box"></div>

<script type="text/javascript">

/*获取元素*/
var box = document.getElementById("box");

/*获取焦点 失去焦点*/
function objBlur(id, time) {
	if (typeof id != "string") throw new Error("objBlur()参数错误");
	var obj = document.getElementById(id),
		time = time || 300,
		docTouchend = function(event) {
			if (event.target != obj) {
                console.log(event.target);
				setTimeout(function() {
					obj.blur();
					if (box) { //失去焦点->给box添加id为"lose"
						box.className = "lose";
					}
					document.removeEventListener("touchend", docTouchend, false); //失去焦点->隐藏键盘
				}, time);
			}
		};
	if (obj) {
		obj.addEventListener("focus", function() {
			if (box) { //获取焦点->给box添加id为"visited"
				box.className = "visited";
			} //获取焦点->显示键盘
			document.addEventListener("touchend", docTouchend, false);
		}, false);
	} else {
		throw new Error("objBlur()没有找到元素");
	}
}

/*判断移动设备*/
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
	var input = new objBlur("input");
	input = null;
}

</script>
</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-28, 11:32:03

展开↯

Records:2791 46/147 «‹42 43 44 45 46 47 48 49 50 ›»