最新评论 - 第 48 页

广西南宁市 2017-10-28 14:43

#0

阅读 50.2万

实现表格每行随鼠标的移动改变颜色

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>

查看文章跳到评论

广西南宁市 2017-10-28 14:41

#0

阅读 2804.9万

常用html、demo代码

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>

查看文章跳到评论

广西南宁市 2017-10-28 14:37

#0

阅读 179.3万

在创业这件事上，不成功是普遍常态，成功者才是异数

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

查看文章跳到评论

广西南宁市 2017-10-28 11:40

#0

阅读 26.8万

JS打字机效果

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

<!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>

查看文章跳到评论

广西南宁市 2017-10-28 11:38

#0

阅读 2804.9万

常用html、demo代码

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>

查看文章跳到评论

广西南宁市 2017-10-28 11:38

#0

阅读 2804.9万

常用html、demo代码

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

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);

查看文章跳到评论

广西南宁市 2017-10-28 11:38

#0

阅读 2804.9万

常用html、demo代码

利用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);

查看文章跳到评论

广西南宁市 2017-10-28 11:34

#0

阅读 2804.9万

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

查看文章跳到评论

广西南宁市 2017-10-28 11:32

#0

阅读 2804.9万

常用html、demo代码

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>

查看文章跳到评论

广西南宁市 2017-10-28 11:32

#0

阅读 2804.9万

常用html、demo代码

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>

查看文章跳到评论

广西南宁市 2017-10-28 10:51

#0

阅读 2804.9万

常用html、demo代码

巧用notepad++正则表达式，批量修改删除超链接

<a href=".*?">

查看文章跳到评论

广西南宁市 2017-10-28 10:50

#0

阅读 2804.9万

常用html、demo代码

html 使表格随着内容自动适应宽度

td  
{  
 white-space: nowrap;  
}

广西南宁市2017-10-28 10:50:48

解决此问题的方法是：在定义表格时，追加style="table-layout:fixed;"，这样做可以使半角连续字符强制换行，不至于撑破列宽。需要注意的是，使用此参数后，不要轻易在tr(行)或td(列)中加入height属性，会使table不再被内容撑出适合的高度。

<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">

广西南宁市2017-10-28 10:51:07

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

查看文章跳到评论

广西南宁市 2017-10-26 14:40

#0

阅读 63.1万

仿造百度经验分享翻牌数字效果做纸牌数字时钟特效

查看文章跳到评论

广西南宁市 2017-10-26 09:17

#0

阅读 69.3万

解决:hover、before、after伪类在ios移动端需要二次点击的问题

手机点击一下按钮，按钮会一直处于hover状态，，怎么解决？😊

广西南宁市2017-10-26 09:18:35

手机端应该用 :active 实现

广西南宁市2017-10-26 09:19:34

js的onclick事件与css的hover以及onmouseover事件有冲突

广西南宁市2017-10-26 17:13:41

			<?php
				if($Applessss && !$getimg_now){
			?>
				document.body.addEventListener('touchend', function(){ }); //解决:hover伪类在移动端二次点击的问题
				document.body.addEventListener('touchstart', function(){ });
			<?php
				}
			?>

查看文章跳到评论

广西南宁市 2017-10-26 09:15

#0

阅读 69.3万

解决:hover、before、after伪类在ios移动端需要二次点击的问题

移动端触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel

1、Touch事件简介
pc上的web页面鼠标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时，触发ontouchstart；
当移动手指时，触发ontouchmove；
当移走手指时，触发ontouchend。
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

2、Touch事件与Mouse事件的出发关系
在触屏操作后，手指提起的一刹那（即发生ontouchend后），系统会判断接收到事件的element的内容是否被改变，如果内容被改变，接下来的事件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。特别需要提到的是，只有再触发一个触屏事件时，才会触发上一个事件的mouseout事件。

3、gesture事件
Gesture事件，包括手指点击（click），轻拂（flick），双击（double-click），手指的分开、闭合（scale）、转动（rotate）等一切手指能在屏幕上做的事情，它只在有两根或多根手指放在屏幕上的时候触发，事件处理函数中会得到一个GestureEvent类型的参数，它包含了手指的scale（两根移动过程中分开的比例）信息和rotation（两根手指间连线转动的角度）信息。这个事件是对touch事件的更高层的封装，和touch一样，它同样包括 gesturestart，gesturechange，gestureend。
gesture事件触发过程：
Step 1、第一根手指放下，触发touchstart
Step 2、第二根手指放下，触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动，持续触发gesturechange，就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起，触发gestureend，以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart
Step 9、提起第一根手指，触发touchend

查看文章跳到评论

广西南宁市 2017-10-25 15:29

#0

阅读 2804.9万

常用html、demo代码

让textarea不可拖拽
禁止textarea不可拖拽改变大小
禁止文本域textarea可拖拽的方法
让textarea没有黄框（浏览器默认输入框边框）且不能拖拽

textarea{outline:none;resize:none;}

查看文章跳到评论

广西南宁市 2017-10-25 15:25

#0

阅读 34万

jquery判断某个div是否进入可视区域

判断一个Div是否可视区域，判断div是否可见

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>js</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(window).scroll(function () {
                var a = document.getElementById("eq").offsetTop;
                if (a >= $(window).scrollTop() && a < ($(window).scrollTop()+$(window).height())) {
                    alert("div在可视范围");
                }
            });
        });
    </script>
</head>
<body>
    <div style="width:1px;height:2000px;"></div>
    <div id="eq" style=" width:100px; height:100px; background-color:Red;">1</div>
    <div style="width:1px;height:2000px;"></div>
</body>
</html>

查看文章跳到评论

广西南宁市 2017-10-25 15:07

#0

阅读 182.7万

JS浮点数运算多出很多位小数点Bug的解决办法

JS处理数据四舍五入，tofixed与round的区别

1 、tofixed方法
　　toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。例如将数据Num保留2位小数，则表示为：toFixed(Num)；但是其四舍五入的规则与数学中的规则不同，使用的是银行家舍入规则，银行家舍入:所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。具体规则如下：

简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。

显然这种规则不符合我们平常在数据中处理的方式。为了解决这样的问题，可以自定义去使用Math.round方法进行自定义式的实现指定保留多少位数据进行处理。

2 、 round方法
　　round() 方法可把一个数字舍入为最接近的整数。例如：Math.round(x)，则是将x取其最接近的整数。其取舍的方法使用的是四舍五入中的方法，符合数学中取舍的规则。对于小数的处理没有那么便捷，但是可以根据不同的要求，进行自定义的处理。

例如：对于X进行保留两位小数的处理，则可以使用Math.round(X * 100) / 100.进行处理。

广西南宁市2017-10-25 15:09:03

银行家舍入

所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。

据说,大部分的编程软件都使用的是这种方法，也算是一种国际标准。所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。其规则是：当舍去位的数值小于5时，直接舍去该位；当舍去位的数值大于等于6时，在舍去该位的同时向前位进一；当舍去位的数值等于5时，如果前位数值为奇，则在舍去该位的同时向前位进一，如果前位数值为偶，则直接舍去该位。

简单的说，就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一

广西南宁市2017-10-25 15:09:36

查看文章跳到评论

Administrator 2017-10-24 09:39

#0

阅读 41.4万

百度地图代码

百度移动地图，手机客户端地图，移动设备

<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=X8u8xx9GzO88EIydfLbTsvbK&v=1.0"></script>
<!---------------------------------- 地图开始 ---------------------------------->
<div class="lxfsditu"  id="map" style="border:1px solid #ccc; width:15rem; height:11.85rem;">
</div>
<!---------------------------------- 地图结束 ---------------------------------->

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("map");
	map.centerAndZoom(new BMap.Point(108.312475,22.772913), 14);

	map.addControl(new BMap.ZoomControl());  //添加地图缩放控件
	var marker1 = new BMap.Marker(new BMap.Point(108.312475,22.772913));  //创建标注
	map.addOverlay(marker1);                 // 将标注添加到地图中
	//创建信息窗口
	var infoWindow1 = new BMap.InfoWindow("有限公司<br>南宁市金凯路11号荣港城二期号");
	marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
	</script>

查看文章跳到评论

Administrator 2017-10-19 17:11

#0

阅读 2804.9万

常用html、demo代码

判断用户设备

var u = navigator.userAgent.toLowerCase();;
        if (u.indexOf('android') > -1 || u.indexOf('linux') > -1) { 
              //安卓手机
        } else if (u.indexOf('iphone') > -1) {
             //苹果手机
        } else if (u.indexOf('windows phone') > -1) {
             //winphone手机
        }

Administrator2017-10-19 17:12:01

关于使用overflow：hidden，在ios下卡顿的问题解决

在css 属性上添加 -webkit-overflow-scrolling: touch;

Administrator2017-10-19 17:12:59

单行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .one{
            width: 300px;
            overflow: hidden;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;  }
    </style>
</head>
<body>
    <div class="one">
        哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,
    </div>
</body>
</html>

多行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .one{
            width: 300px;
            display: -webkit-box;   
            -webkit-box-orient: vertical;   
            -webkit-line-clamp: 2;   
            overflow: hidden;  
        }
    </style>
</head>
<body>
    <div class="one">
        哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,哈哈，就是这样啦,
    </div>
</body>
</html>

查看文章跳到评论

lizhenqiu blog

最新评论聚合

实现表格每行随鼠标的移动改变颜色

常用html、demo代码

在创业这件事上，不成功是普遍常态，成功者才是异数

JS打字机效果

常用html、demo代码

常用html、demo代码

常用html、demo代码

常用html、demo代码

常用html、demo代码

常用html、demo代码

常用html、demo代码

常用html、demo代码

仿造百度经验分享翻牌数字效果做纸牌数字时钟特效

解决:hover、before、after伪类在ios移动端需要二次点击的问题

解决:hover、before、after伪类在ios移动端需要二次点击的问题

常用html、demo代码

jquery判断某个div是否进入可视区域

JS浮点数运算多出很多位小数点Bug的解决办法

百度地图代码

常用html、demo代码