#875
展开↯#876
作者：广西南宁市
利用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
#877
作者：广西南宁市
document load 与document ready的区别
页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件
页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件
文章：常用html、demo代码 发表时间：2017-10-28, 11:34:09
#878
作者：广西南宁市
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
#879
作者：广西南宁市
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
#880
作者：广西南宁市
巧用notepad++正则表达式，批量修改删除超链接
<a href=".*?">Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 10:51:56
#881
作者：广西南宁市
html 使表格随着内容自动适应宽度
td
{
white-space: nowrap;
} Run code
Cut to clipboard
<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">Run code
Cut to clipboard
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-28, 10:50:08
#882
作者：广西南宁市
手机点击一下按钮，按钮会一直处于hover状态，，怎么解决？
<?php
if($Applessss && !$getimg_now){
?>
document.body.addEventListener('touchend', function(){ }); //解决:hover伪类在移动端二次点击的问题
document.body.addEventListener('touchstart', function(){ });
<?php
}
?>Run code
Cut to clipboard
文章：解决:hover、before、after伪类在ios移动端需要二次点击的问题 发表时间：2017-10-26, 09:17:52
#884
作者：广西南宁市
移动端 触摸事件 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
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
文章：解决:hover、before、after伪类在ios移动端需要二次点击的问题 发表时间：2017-10-26, 09:15:58
#885
作者：广西南宁市
让textarea不可拖拽
禁止textarea不可拖拽改变大小
禁止文本域textarea可拖拽的方法
让textarea没有黄框（浏览器默认输入框边框）且不能拖拽
禁止textarea不可拖拽改变大小
禁止文本域textarea可拖拽的方法
让textarea没有黄框（浏览器默认输入框边框）且不能拖拽
textarea{outline:none;resize:none;}Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-25, 15:29:38
#886
作者：广西南宁市
判断一个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>Run code
Cut to clipboard
文章：jquery判断某个div是否进入可视区域 发表时间：2017-10-25, 15:25:26
#887
作者：广西南宁市
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.进行处理。
银行家舍入
所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。
据说,大部分的编程软件都使用的是这种方法，也算是一种国际标准。 所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。其规则是：当舍去位的数值小于5时，直接舍去该位；当舍去位的数值大于等于6时，在舍去该位的同时向前位进一；当舍去位的数值等于5时，如果前位数值为奇，则在舍去该位的同时向前位进一，如果前位数值为偶，则直接舍去该位。
简单的说，就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一
1 、tofixed方法
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。例如将数据Num保留2位小数，则表示为：toFixed(Num)；但是其四舍五入的规则与数学中的规则不同，使用的是银行家舍入规则，银行家舍入:所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。具体规则如下：
简单来说就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。
显然这种规则不符合我们平常在数据中处理的方式。为了解决这样的问题，可以自定义去使用Math.round方法进行自定义式 的实现指定保留多少位数据进行处理。
2 、 round方法
round() 方法可把一个数字舍入为最接近的整数。例如：Math.round(x)，则是将x取其最接近的整数。其取舍的方法使用的是四舍五入中的方法，符合数学中取舍的规则。对于小数的处理没有那么便捷，但是可以根据不同的要求，进行自定义的处理。
例如：对于X进行保留两位小数的处理，则可以使用Math.round(X * 100) / 100.进行处理。
银行家舍入
所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。
据说,大部分的编程软件都使用的是这种方法，也算是一种国际标准。 所谓银行家舍入法，其实质是一种四舍六入五取偶（又称四舍六入五留双）法。其规则是：当舍去位的数值小于5时，直接舍去该位；当舍去位的数值大于等于6时，在舍去该位的同时向前位进一；当舍去位的数值等于5时，如果前位数值为奇，则在舍去该位的同时向前位进一，如果前位数值为偶，则直接舍去该位。
简单的说，就是：四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一
文章：JS浮点数运算多出很多位小数点Bug的解决办法 发表时间：2017-10-25, 15:07:59
#888
作者：Administrator
百度移动地图，手机客户端地图，移动设备
<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>Run code
Cut to clipboard
文章：百度地图代码 发表时间：2017-10-24, 09:39:44
#889
作者：Administrator
判断用户设备
关于使用overflow：hidden，在ios下卡顿的问题解决
单行文本溢出显示省略号
多行文本溢出显示省略号
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手机
}Run code
Cut to clipboard
关于使用overflow：hidden，在ios下卡顿的问题解决
在css 属性上添加 -webkit-overflow-scrolling: touch;Run code
Cut to clipboard
单行文本溢出显示省略号
<!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>Run code
Cut to clipboard
多行文本溢出显示省略号
<!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>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-10-19, 17:11:24
#890
作者：广西南宁市
是的，他们的确努力到了无能为力，拼搏到了感动自己1 , 拍马屁是万金油，不会错的
文章：程序员编程常用网页工具集[游戏] 发表时间：2017-10-18, 10:00:57
#891
作者：Administrator
评论审核引用楼中楼回复审核key是那个楼主层主判断是否需审核。。等
文章：@意见反馈/技术支持/伊网/安企网 发表时间：2017-10-18, 16:14:02
#892
作者：Administrator
【html】实现网页加载图片先显示模糊后清楚清晰的图
打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在html中 IMG 有个 lowsrc 属性
把图片的缩略图 放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！
src里填写 原图片！
这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完成后会显示原图，这样有个时间差，就是出现先由马赛克，然后变清晰的效果！
注意，测试的时候最好在远程服务器上，这样效果比较明显，本机的话，下载太快了，可能感觉不出来！
打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在html中 IMG 有个 lowsrc 属性
img lowsrc="" width="300" height="200" border="0" id="image_operate_13311415863667283"Run code
Cut to clipboard
把图片的缩略图 放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！
src里填写 原图片！
这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完成后会显示原图，这样有个时间差，就是出现先由马赛克，然后变清晰的效果！
注意，测试的时候最好在远程服务器上，这样效果比较明显，本机的话，下载太快了，可能感觉不出来！
文章：常用html、demo代码 发表时间：2017-10-18, 17:03:31
#893
作者：广西南宁市
如果需要将id是‘div2js'的div元素删除。
首先需要找到被删元素的父元素，通过父元素将其需要删除的子元素删除。
首先需要找到被删元素的父元素，通过父元素将其需要删除的子元素删除。
var el = document.getElementById('div2js');
el.parentNode.removeChild(el);Run code
Cut to clipboard
<script>
$(".easyzoom img").each(function(){
var w=$(this).width();
var h=$(this).height();
var html='<div class="loadingimgcssdivback" style="background: url(data:image/gif;base64,R0lGODlhCgAKAJEDAMzMzP9mZv8AAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAADACwAAAAACgAKAAACF5wncgaAGgJzJ647cWua4sOBFEd62VEAACH5BAUAAAMALAEAAAAIAAMAAAIKnBM2IoMDAFMQFAAh+QQFAAADACwAAAAABgAGAAACDJwHMBGofKIRItJYAAAh+QQFAAADACwAAAEAAwAIAAACChxgOBPBvpYQYxYAIfkEBQAAAwAsAAAEAAYABgAAAgoEhmPJHOGgEGwWACH5BAUAAAMALAEABwAIAAMAAAIKBIYjYhOhRHqpAAAh+QQFAAADACwEAAQABgAGAAACDJwncqi7EQYAA0p6CgAh+QQJAAADACwHAAEAAwAIAAACCpRmoxoxvQAYchQAOw==);width: '+w+'px;height: '+h+'px;background-repeat: no-repeat;background-position: center center;position: absolute;left: 0px;top: 0px;"></div>';
$(this).after(html);
});
window.Echo=(function(window,document,undefined){'use strict';var store=[],offset,throttle,poll;var _inView=function(el){var coords=el.getBoundingClientRect();return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));};var _pollImages=function(){for(var i=store.length;i--;){var self=store[i];if(_inView(self)){self.src=self.getAttribute('data-echo');
//console.log(self.nextSibling);
self.parentNode.removeChild(self.nextSibling);
//self.removeAttributeNode(self.nextSibling);
//$(self).next('loadingimgcssdivback').remove();
store.splice(i,1);}}};var _throttle=function(){clearTimeout(poll);poll=setTimeout(_pollImages,throttle);};var init=function(obj){var nodes=document.querySelectorAll('[data-echo]');var opts=obj||{};offset=opts.offset||0;throttle=opts.throttle||250;for(var i=0;i<nodes.length;i++){store.push(nodes[i]);}_throttle();if(document.addEventListener){window.addEventListener('scroll',_throttle,false);}else{window.attachEvent('onscroll',_throttle);}};return{init:init,render:_throttle};})(window,document);
Echo.init({
offset: 0,
throttle: 0
});
</script>
Run code
Cut to clipboard
文章：Echo.js简单的JavaScript图像延迟加载库 发表时间：2017-10-17, 16:38:55
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);