评论 - lizhenqiu blog

#⁹¹³

作者：广西南宁市

css3美化radio单选框(兼容IE9+)

<style>.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}
</style>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:00:08,

<style class="cp-pen-styles">.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}
</style></head><body>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:02:03,
css3美化checkbox复选框(兼容IE9+)

<style class="cp-pen-styles">@charset "UTF-8";
.checkbox-beauty-container {
  font-size: 0;
}
.checkbox-beauty-container input[type="checkbox"]:checked + .checkbox-beauty::after {
  content: '✓';
  font-size: 16px;
  font-weight: bold;
  color: green !important;
}
.checkbox-beauty-container .checkbox-name {
  vertical-align: middle;
  font-size: 16px;
}
.checkbox-beauty-container .checkbox-beauty {
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border: 1px solid green;
  display: inline-block;
  margin: 0 15px 0 3px;
  vertical-align: middle;
}

@media screen and (min-width: 1200px) {
  .checkbox-beauty:hover {
    box-shadow: 0 0 7px green;
  }
  .checkbox-beauty:hover::after {
    content: '✓';
    font-size: 16px;
    font-weight: bold;
    color: green;
  }
}
</style>
<div class="checkbox-beauty-container">
   
        <span class="checkbox-name">苹果</span>
        <input type="checkbox" name="checkboxName" id="checkboxName1" hidden/>
        <label for="checkboxName1" class="checkbox-beauty"></label>
  
   
        <span class="checkbox-name">香蕉</span>
        <input type="checkbox" name="checkboxName" id="checkboxName2" hidden />
        <label for="checkboxName2" class="checkbox-beauty"></label>
   
  
        <span class="checkbox-name">橘子</span>
        <input type="checkbox" name="checkboxName" id="checkboxName3" hidden />
        <label for="checkboxName3" class="checkbox-beauty"></label>
   
</div>

Run code

Cut to clipboard

文章：CSS 美化复选框CHECKBOX-无图片方式发表时间：2017-09-30, 16:56:36

展开↯

#⁹¹⁴

作者：广西南宁市

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>h1{
    font: bold 200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 16.5em; /* fallback */
	width: 20ch; /* # of chars */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
  
  animation: typing 10s steps(20,end) 2 ,
    blink .5s step-end infinite alternate;
  
}


@keyframes typing { from { width: 0; } }
@keyframes blink { 50% { border-color: transparent; } }


</style>
</head>
<body>
  <h1>This is hello world !</h1>
</body>
</html>

Run code

Cut to clipboard

文章：js+jQuery实现网页打字机效果（带光标）js模拟光标打字发表时间：2017-09-30, 16:55:01

展开↯

#⁹¹⁵

作者：广西南宁市

现在不加入适配 iPhone X 的代码都不潮流了啊

文章：CSS黑魔法小技巧发表时间：2017-09-30, 16:39:51

展开↯

#⁹¹⁶

作者：广西南宁市

定义和用法
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
说明
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
提示和注释
注释：您可使用负值从数组的尾部选取元素。
注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 14:46:44

展开↯

#⁹¹⁷

作者：广西南宁市

关于JSON.parse的深度拷贝中，Date类型也会被更改，由Date对象变为String

#,广西南宁市,2017-09-30,12:25:50,
第3条里的 "$$" 函数谁能讲解下?

IE11 里是
function(n,t){return t?t.querySelectorAll.call(t,n):window.document.querySelectorAll.apply(window.document,arguments)}

Edge里面是未定义(Microsoft Edge 41.16296.0.0)

Chrome 里

ƒ $$(selector, [startNode]) { [Command Line API] }
FF 的文档写它是 Web 开发控制台的 helper command

#,广西南宁市,2017-09-30,12:44:10,

<p style="line-height: 18px; font-size: 18px;  font-family: times;">
Click "<i>Load samples</i>" to view and edit more JS samples.<br>
<br>
Labyrinth generated with JavaScript:<br><br>
<script>
for (var line=1; line<60; line++) {
  for(var i=1;i<29;i++) {
    var s = (Math.floor((Math.random()*2)%2)) ? "╱" : "╲";
    document.write(s);
  }
  document.writeln("<br>");
}
</script>
</p>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,14:41:03, js开发实现简单贪吃蛇游戏（20行代码）

<!doctype html>
<html>
<body>
	<canvas id="can" width="400" height="400" style="background: Black"></canvas>
	<script>
		var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
		function draw(t, c) {
			ctx.fillStyle = c;
			ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
		}
		document.onkeydown = function(e) {
			fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
		};
		!function() {
			sn.unshift(n = sn[0] + fx);
			if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
				return alert("GAME OVER");
			draw(n, "Lime");
			if (n == dz) {
				while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
				draw(dz, "Yellow");
			} else
				draw(sn.pop(), "Black");
				setTimeout(arguments.callee, 130);
		}();
	</script>
</body>
</html>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,14:42:09, 有一bug, dz = 370的时候，黄的吃了以后画不出来了

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:15:04

展开↯

#⁹¹⁸

作者：广西南宁市

let a = 1, b = 2;
[a, b] = [b, a];

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:16:39,

(10)["toString"]() === "10" 写成 10..toString() === "10" 更显装逼~

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:17:31, 有问题

console.log( '1.0123'.replace(/\B(?=(\d{3})+(?!\d))/g, ','))
result: 1.0,123

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:18:14,

Math.random().toString(36).substring(2)

Run code

Cut to clipboard

这类产生随机字符串的方法不严谨因为

Math.random()

Run code

Cut to clipboard

位数是不固定的玩玩可以实际使用估计不行

#,广西南宁市,2017-09-30,12:18:59,@3, 论如何优雅的取随机字符串
在我chrome控制台（版本 55.0.2883.87 m）
Math.random().toString(36).substring(2)//经测试23-26位都有可能
"7jz8ov7swm7ong7w77x9jdobt9"
为何和上面的有差异性呢？是我Chrome版本太低还是太高导致JS的版本不一致导致的？

#,广西南宁市,2017-09-30,12:19:19,@4, 这个可能有误导，不好意思，我已经修改了，因为Math.random生成的随机数可能很长，也可能很短。

#,广西南宁市,2017-09-30,12:19:38, 从一个数组中找到一个数，O(n)的算法，找不到就返回 null。
正常算法不是这个么：

const find = (arr,x) => arr.filter(num=>num===x)[0]||null;

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:20:26,

[...'8'.repeat(6)]

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:22:44, 还有一个实用并且我经常用的：判断是否包含某元素，支持数组、字符串等

if(~"asdf".lastIndexOf("a")){
alert("exists");
}

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,12:23:09,@8, 为什么用lastIndexOf 不直接用indexOf

#,广西南宁市,2017-09-30,12:23:34,@9, 下标从0开始，0==false

#,广西南宁市,2017-09-30,12:24:04,@9, ~是移位操作，找不到下标返回-1，移位之后是0，恰好0==false；找到的话，至少返回0，移位后是1，也就是true

#,广西南宁市,2017-09-30,12:24:21,@9,
~ 是按位非， ~1 是 -2，这个地方是因为， if 里面的条件要经过两次处理，

ToBoolean(GetValue(exprRef))
其中 GetValue ，如果不是引用就直接返回原值，ToBoolean在处理Number时的规则是

The result is false if the argument is +0, −0, or NaN; otherwise the result is true.
所以你这个是在大部分时候是没有问题的

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:14:41

展开↯

#⁹¹⁹

作者：广西南宁市

让js脚本永远不报错的方法：

window.onerror = function(m, f, l){ return true }

Run code

Cut to clipboard

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:13:50

展开↯

#⁹²⁰

作者：广西南宁市

还有个布尔值的处理

eg:!!0 === false

Run code

Cut to clipboard

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:13:09

展开↯

#⁹²¹

作者：广西南宁市

格式化钱那个为啥不用 toLocaleString ？

#,广西南宁市,2017-09-30,12:12:45,

(23333333).toLocaleString('en-US')

Run code

Cut to clipboard

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:11:22

展开↯

#⁹²²

作者：广西南宁市

参考资料：
如何读懂并写出装逼的函数式代码
js奇淫技巧1
从一行代码里面学点JavaScript
有哪些短小却令人惊叹的 JavaScript 代码？
aaencode - Encode any JavaScript program to Japanese style emoticons (^_^) 在线js表情符号转码加密混淆

文章：JavaScript编程黑科技，装逼指南，高逼格代码发表时间：2017-09-30, 12:10:31

展开↯

#⁹²³

作者：广西南宁市

可以活泼但不能任性

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-09-30, 10:22:03

展开↯

#⁹²⁴

作者：广西南宁市

开启移动默认是，顶部导航不自动固定，文章右边目录定位减少顶部距离，不准确跳转

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-09-29, 18:04:46

展开↯

#⁹²⁵

作者：广西南宁市

假如做一个直径10km（周长31.4km）的巨轮，用大巨的电动机去带动，当转速越来越快，到达1W转/秒的时候，巨轮边缘的线速度超过光速了，那么根据爱因斯坦的理论，是不是巨轮的边缘会消失在这个空间（或进入另一个空间）。

文章：人类第四次发现引力波：首次确定方位发表时间：2017-09-29, 18:02:06

展开↯

#⁹²⁶

作者：广西南宁市

假如我的屌长1光年，此时我躺在地上，由于地球的自转，是否吊另一端的线速度已超越光速？

#,广西南宁市,2017-09-29,17:59:17, 在这个尺度上，即使你长的是跟铁屌，也是跟面条一样柔软的。地球即使转上1圈，远端的屌头也还在原地，最终，你会被自己的屌捆在地球上，如果没有屌没有被它自己的惯性撕裂的话。

#,广西南宁市,2017-09-29,17:59:36, 不存在理想刚体，棍子的速度传播等于机械波传播速度，远小于光速

#,广西南宁市,2017-09-29,17:59:55, 想象一下一光年的屌在宇宙中挥舞的情景我就想笑，还有啊，你小心别碰到太阳什么的高温物体，你会把屌烧没的。

#,广西南宁市,2017-09-29,18:00:10, 首先你得把一万光年的屌竖起来。

#,广西南宁市,2017-09-29,18:00:24, 屌想超过光速~~只能脱离实体~~~

#,广西南宁市,2017-09-29,18:01:27, 根据爱因斯坦的理论，不存在超越光速的物质可证：你没有屌……

文章：人类第四次发现引力波：首次确定方位发表时间：2017-09-29, 17:58:55

展开↯

#⁹²⁷

作者：广西南宁市

event.preventDefault();
取消事件的默认动作。

#,广西南宁市,2017-09-29,17:52:22,
在 touchend 中解除 touchmove 绑定

$("#id").on(' touchstart',function(){    $("#id").on('touchmove',function(event) {     event.preventDefault();     }, false);})$("#id").on(' touchend',function(){    $("#id").unbind('touchmove');})

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,17:52:52,
用

$("body").bind("touchmove",function(event){event.preventDefault;//code});

Run code

Cut to clipboard

取消了body的拖动事件。
恢复这个拖动事件只要

$("body").unbind("touchmove");

Run code

Cut to clipboard

文章：jquery禁用a标签,jquery禁用按钮click点击发表时间：2017-09-29, 17:52:03

展开↯

#⁹²⁸

作者：广西南宁市

php表单常用正则表达式

function is_email($str){ 
//检验email 
return preg_match("/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/", $str); 
} 

function is_url($str){ 
//检验网址 
return preg_match("/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"]) 

*$/", $str); 
} 

function is_qq($str){ 

//检验qq 
return preg_match("/^[1-9]\d{4,8}$/", $str); 
} 

function is_zip($str){ 

//检验邮编 
return preg_match("/^[1-9]\d{5}$/", $str); 
} 

function is_idcard($str){ 

//检验身份证 
return preg_match("/^\d{15}(\d{2}[A-Za-z0-9])?$/", $str); 
} 

function is_chinese($str){ 

检验是否是中文 
return ereg("^[".chr(0xa1)."-".chr(0xff)."]+$",$str); 
} 

function is_english($str){ 

//检验是否是英文 
return preg_match("/^[A-Za-z]+$/", $str); 
} 

function is_mobile($str){ 

//检验是否是手机 
return preg_match("/^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/", $str); 
} 

function is_phone($str){ 

//建云那是否是电话 
return preg_match("/^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/", 

$str); 
} 

function is_safe($str){ 
return (preg_match("/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|. 

{0,5})$|\s/", $str) != 0); 
} 
}

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,15:54:23,
php 多维数组排序
*php版本5.5以上

$data = array_column($row, 'id');//id、排序的字段名， $row 带排序数组
array_multisort($data, SORT_DESC, $row);//SORT_DESC 倒序  SORT_ASC 升序

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-09-29, 15:53:49

展开↯

#⁹²⁹

作者：广西南宁市

芳芳造型

<style>
/*利用:after伪元素*/  
.clearUl:after {  
content:"";
display: block;  
clear: both;  
}
#ffmmright li a:active:before {
    content: '[ ';
	
}#ffmmright li a:active:after {
    content: ' ]';
}#ffmmright li a:active{font-size: 18px;}
</style>

<script>
	window.alert = function(name){
	 var iframe = document.createElement("IFRAME");
	iframe.style.display="none";
	iframe.setAttribute("src", 'data:text/plain,');
	document.documentElement.appendChild(iframe);
	window.frames[0].window.alert(name);
	iframe.parentNode.removeChild(iframe);
	}
//重写confirm方法，去掉地址显示
window.confirm = function(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
var result = window.frames[0].window.confirm(name);
iframe.parentNode.removeChild(iframe);
return result;
}
	var ua = navigator.userAgent.toLowerCase();
	var isWeixin = ua.indexOf('micromessenger') != -1;
	var isAndroid = ua.indexOf('android') != -1;
	var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
	/*if (isWeixin) {
		alert('微信来源');
	}else{
		alert('非微信来源');
	}*/
window.onload=function(){
	document.body.addEventListener('touchstart', function () { 
		//...空函数即可
	});
}

	
</script>

Run code

Cut to clipboard

#2173,移动端，点击之后某个区域后有阴影
html点击有阴影
去掉点击后面阴影区域方块决解方法css

今天偶然发现一件很奇怪的事儿。
在移动端，在我去掉css的伪类及其伪元素跟相关的js之后，
在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得鬼，
后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。

问题1：
如图所示，我所遇到的状况：

问题2：去掉点击区域的边框阴影效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <style type="text/css">


            div {
                /*关键代码*/
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            .btn-blue {
                display: block;
                height: 42px;
                line-height: 42px;
                text-align: center;
                border-radius: 4px;
                font-size: 18px;
                color: #FFFFFF;
                background-color: blue;
            }

            .btn-blue-on {
                background-color: red;
            }
        </style>
    </head>

    <body>

        <div class="btn-blue">按钮</div>

        <script type="text/javascript">
            var btnBlue = document.querySelector(".btn-blue");
            btnBlue.ontouchstart = function() {
                this.className = "btn-blue btn-blue-on"
            }
            btnBlue.ontouchend = function() {
                this.className = "btn-blue"
            }

            btnBlue.onclick = function(){
                alert(123)
            }
        </script>
    </body>

</html>

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,10:38:40,

style="
        color: #000000;
    cursor: pointer;
    right: 28px;
    position: absolute;
    top: 0px;
    display: inline-block;outline :none;-webkit-appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
"

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,10:40:35,
移动端:active伪类无效的解决方法
在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

window.onload=function(){
    document.body.addEventListener('touchstart', function () { 
        //...空函数即可
    });
}

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,10:40:55,@2,

a:link { /* Essentially means a[href], or that the link actually goes somewhere */  
  color: blue;  
}  
a:visited {  
  color: purple;  
}  
a:hover {  
  color: green;  
}  
a:active {  
  color: red;  
}

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,10:41:14, 移动网页active

文章：on click事件在移动端点击无效bug 发表时间：2017-09-29, 10:37:59

展开↯

#⁹³⁰

作者：广西南宁市

移动端，点击之后某个区域后有阴影
html点击有阴影
去掉点击后面阴影区域方块决解方法css

今天偶然发现一件很奇怪的事儿。
在移动端，在我去掉css的伪类及其伪元素跟相关的js之后，
在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得鬼，
后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。

问题1：
如图所示，我所遇到的状况：

问题2：去掉点击区域的边框阴影效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <style type="text/css">


            div {
                /*关键代码*/
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            .btn-blue {
                display: block;
                height: 42px;
                line-height: 42px;
                text-align: center;
                border-radius: 4px;
                font-size: 18px;
                color: #FFFFFF;
                background-color: blue;
            }

            .btn-blue-on {
                background-color: red;
            }
        </style>
    </head>

    <body>

        <div class="btn-blue">按钮</div>

        <script type="text/javascript">
            var btnBlue = document.querySelector(".btn-blue");
            btnBlue.ontouchstart = function() {
                this.className = "btn-blue btn-blue-on"
            }
            btnBlue.ontouchend = function() {
                this.className = "btn-blue"
            }

            btnBlue.onclick = function(){
                alert(123)
            }
        </script>
    </body>

</html>

Run code

Cut to clipboard

文章：on click事件在移动端点击无效bug 发表时间：2017-09-29, 10:36:55

展开↯

#⁹³¹

作者：广西南宁市

此前有这么一个段子，程序员A和B，A每天只写 100 行代码，字里行间规范清晰，其余大部分时间都在整理文档，备注的非常详细，B每天写 50000 行代码，却很少写注释，天马行空，为此还嘲笑A不够高效。随着业务越来越复杂，客户需求随时可变，两个人都开始组建团队，这个时候，功夫不负苦心人，A之前的努力都派上了用场，B只能佩服加惭愧。

我听到的版本是这样的： B成了A的领导，让A重构之前B写的代码

#,广西南宁市,2017-09-29,09:32:55, 我听到的是，B的项目提前开发完成，提早占领市场。

文章：程序员编程常用网页工具集[游戏] 发表时间：2017-09-29, 09:32:31

展开↯

Records:2796 49/148 «‹45 46 47 48 49 50 51 52 53 ›»