评论 - lizhenqiu blog

#⁸⁷⁵

作者：广西南宁市

文章：仿造百度经验分享翻牌数字效果做纸牌数字时钟特效发表时间：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

展开↯

#⁸⁹⁰

作者：广西南宁市

图片延迟加载、懒加载原理及代码实现

<img class="lazy" alt="" data-src="http://wd.geilicdn.com/vshop.jpg" />
<script>
$(window).scroll(function() {//窗口滚动的时候（鼠标滚轮的时候。。）
  $('img').each(function() {//把以下的方法作用到每一个img标签，可自行加限定条件
    var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
    var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
    var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
    var halfDoc = $(window).height();//获取浏览器窗口可视高度
    var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
    var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
    if(ifElse){//如果条件成立
      setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把图片的src地址改成data-src的值（前面已经获取了）
    }
  })//end object 'img'
})//end object window
</script>

Run code

Cut to clipboard

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

展开↯

#⁸⁹¹

作者：广西南宁市

为什么浏览器会自动压缩空格？
规范如此,就是这么任性https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1
如果不自动压缩空格，那我们写html的时候就只能写成1行了，否则先这样的代码就会出现大段的空白。

#,广西南宁市,2017-10-11,17:42:27,
既然浏览器会压缩多个空格，那只要保证文本里每次只有一个空格相邻不就可以了。

□ -> □
□□ -> □&nbsp;
□□□ -> □&nbsp;□
□□□□ -> □&nbsp;□&nbsp;

Run code

Cut to clipboard

自动规避了浏览器的合并空格策略。

这个思路来自于富文本编辑器，

#,广西南宁市,2017-10-11,17:43:33,
word-wrap：决定句尾放不下单词时，单词是否换行
word-break: 决定单词内该怎么换行
平文本可以配合white-space: pre-wrap来解决多空格压缩显示问题
富文本采用的解决方案是对空格进行间隔html转义，这种方法更灵活，可以适应不同的场景，也适用于平文本。

#,广西南宁市,2017-10-11,17:44:59,
white-space我们更多的时候只用到nowrap的属性，来配合实现…的特效，实际它还有更多的姿势未解锁。
white-space: normal | nowrap | pre | pre-wrap | pre-line
我们重点关注pre开头的几个属性。pre是preserve(保留)的缩写。没错，它就跟保留空格有关系。
pre: 保留所有的空格和回车，且不允许折行。
pre-wrap: 保留所有的空格和回车，但是允许折行。
pre-line: 会合并空格，且允许折行

#,广西南宁市,2017-10-11,17:47:10,
后台按照用户的输入的原始空格返回，不用做转义，前端加上

word-break: keep-all;
word-wrap: break-word;
white-space: pre-wrap;

Run code

Cut to clipboard

CSS单词换行and断词

#,广西南宁市,2017-10-11,17:47:43,
字符画很好玩，压缩空格就全乱了

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 17:41:22

展开↯

#⁸⁹²

作者：广西南宁市

认识word-wrap属性

属性值	解释
normal	使用浏览器默认的换行规则(默认)
break-word	长单词进行换行

#,广西南宁市,2017-10-11,16:10:24,
word-break: break-all, 打破了浏览器的默认换行规则
word-wrap: break-word, 保留浏览器的默认换行规则，一旦一个连续长单词一行容纳不下，就只对这个长单词进行打破换行

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 16:09:51

展开↯

#⁸⁹³

作者：广西南宁市

认识word-break属性

属性值	解释
normal	使用浏览器默认的换行规则(默认)
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

#,广西南宁市,2017-10-11,16:08:26, 现在大多数的浏览器默认的换行规则为半角空格和连字符,因此normal和keep-all的效果是一样的。

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 16:07:51

展开↯

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