评论 - lizhenqiu blog

#⁸⁷⁵

作者：广西南宁市

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

展开↯

#⁸⁷⁶

作者：广西南宁市

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

<a href=".*?">

Run code

Cut to clipboard

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

展开↯

#⁸⁷⁷

作者：广西南宁市

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

td  
{  
 white-space: nowrap;  
}

Run code

Cut to clipboard

#,广西南宁市,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;">

Run code

Cut to clipboard

#,广西南宁市,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>

Run code

Cut to clipboard

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

展开↯

#⁸⁷⁸

作者：广西南宁市

手机点击一下按钮，按钮会一直处于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
				}
			?>

Run code

Cut to clipboard

文章：解决:hover、before、after伪类在ios移动端需要二次点击的问题发表时间：2017-10-26, 09:17:52

展开↯

#⁸⁷⁹

作者：广西南宁市

文章：仿造百度经验分享翻牌数字效果做纸牌数字时钟特效发表时间：2017-10-26, 14:40:58

展开↯

#⁸⁸⁰

作者：广西南宁市

移动端触摸事件 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

文章：解决:hover、before、after伪类在ios移动端需要二次点击的问题发表时间：2017-10-26, 09:15:58

展开↯

#⁸⁸¹

作者：广西南宁市

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

textarea{outline:none;resize:none;}

Run code

Cut to clipboard

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

展开↯

#⁸⁸²

作者：广西南宁市

判断一个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

展开↯

#⁸⁸³

作者：广西南宁市

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,

文章：JS浮点数运算多出很多位小数点Bug的解决办法发表时间：2017-10-25, 15:07:59

展开↯

#⁸⁸⁴

作者：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

展开↯

#⁸⁸⁵

作者：Administrator

判断用户设备

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

#,Administrator,2017-10-19,17:12:01,
关于使用overflow：hidden，在ios下卡顿的问题解决

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

Run code

Cut to clipboard

#,Administrator,2017-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>

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

展开↯

#⁸⁸⁶

作者：广西南宁市

是的，他们的确努力到了无能为力，拼搏到了感动自己

#,广西南宁市,2017-10-18,14:40:27, 互联网各门户小编战战兢兢为十九大护航。

#,Administrator,2017-10-19,16:56:53,@1, 拍马屁是万金油，不会错的

文章：程序员编程常用网页工具集[游戏] 发表时间：2017-10-18, 10:00:57

展开↯

#⁸⁸⁷

作者：Administrator

评论审核引用楼中楼回复审核key是那个楼主层主判断是否需审核。。等

#,Administrator,2017-10-19,16:31:57, 文章显示管理，对应评论审核显示管理？

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-10-18, 16:14:02

展开↯

#⁸⁸⁸

作者：Administrator

【html】实现网页加载图片先显示模糊后清楚清晰的图
打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在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

展开↯

#⁸⁸⁹

作者：广西南宁市

如果需要将id是‘div2js'的div元素删除。
首先需要找到被删元素的父元素，通过父元素将其需要删除的子元素删除。

var el = document.getElementById('div2js');
 el.parentNode.removeChild(el);

Run code

Cut to clipboard

#,广西南宁市,2017-10-17,16:39:31,

	<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

展开↯

#⁸⁹⁰

作者：广西南宁市

怎么能漏了GIMP

#,广西南宁市,2017-10-16,18:01:09, 还是习惯了Adobe

文章：Linux系统下10款Adobe软件的最佳替代品发表时间：2017-10-16, 18:00:57

展开↯

#⁸⁹¹

作者：广西南宁市

js 获取当前年月日时分秒星期


$("#aa").click(function () {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var currentTime = "现在是:" + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day;
alert(currentTime);
});

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-16, 09:55:08

展开↯

#⁸⁹²

作者：北京市

结果论英雄，成王败寇确实很中国，但是，如果还要点脸或者还想留点良心的话，请用厉害，强大之类无属性的词进行跪舔，伟大这类词语还是留给真正伟大的东西。

文章：人类第四次发现引力波：首次确定方位发表时间：2017-10-14, 15:32:02

展开↯

#⁸⁹³

作者：广西南宁市

文章：成功的故事只能倒叙着讲发表时间：2017-10-12, 12:40:31

展开↯

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