最新评论 - 第 58 页 - lizhenqiu blog

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

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

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

查看文章跳到评论

广西南宁市 2017-09-30 16:55

置顶 #0

阅读 105.4万

js+jQuery实现网页打字机效果（带光标）js模拟光标打字

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

查看文章跳到评论

广西南宁市 2017-09-30 16:41

#0

阅读 32.7万

CSS黑魔法小技巧

补充一个用得比较少的伪元素，可以改变选择文本时高亮的样式

.container::selection {
    background: red;
}

广西南宁市2017-09-30 16:45:25

css实现两端对齐

text-align-last: justify;

广西南宁市2017-09-30 17:04:32

rem的那个应该用calc包裹一下吧，不然会报错。数据不能直接计算，要用CSS函数 calc()来帮助实现。

广西南宁市2017-09-30 17:05:01

受益很多。。。基础一般，有些看不懂。。。
另外，这个 .nav li:first-child ~ li(不包括最后一个li) 也是不包括第一个li 而且第一个的话 :first-child 好像是可以不用写的吧就是 .nav li ~ li , 作者写是考虑可读性吧

广西南宁市2017-09-30 17:05:17

text-align-last兼容性不好

查看文章跳到评论

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

#0

阅读 32.7万

CSS黑魔法小技巧

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

查看文章跳到评论

广西南宁市 2017-09-30 14:46

#0

阅读 63.2万

定义和用法
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
[table][tbody][tr] [th]参数[/th] [th]描述[/th] [/tr] [tr] [td]start[/td] [td]必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。[/td] [/tr] [tr] [td]end[/td] [td]可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。[/td] [/tr] [/tbody][/table]
返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
说明
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
提示和注释
注释：您可使用负值从数组的尾部选取元素。
注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

查看文章跳到评论

广西南宁市 2017-09-30 12:15

#0

阅读 63.2万

JavaScript编程黑科技，装逼指南，高逼格代码

关于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>

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

广西南宁市2017-09-30 14:42:09

有一bug, dz = 370的时候，黄的吃了以后画不出来了

查看文章跳到评论

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

#0

阅读 63.2万

JavaScript编程黑科技，装逼指南，高逼格代码

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

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

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

广西南宁市2017-09-30 12:17:31

有问题

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

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

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

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

Math.random()

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

广西南宁市2017-09-30 12:18:59

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

广西南宁市2017-09-30 12:19:19

#⁴这个可能有误导，不好意思，我已经修改了，因为Math.random生成的随机数可能很长，也可能很短。

广西南宁市2017-09-30 12:19:38

从一个数组中找到一个数，O(n)的算法，找不到就返回 null。
正常算法不是这个么：

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

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

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

广西南宁市2017-09-30 12:22:44

还有一个实用并且我经常用的：判断是否包含某元素，支持数组、字符串等

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

广西南宁市2017-09-30 12:23:09

#⁸为什么用lastIndexOf 不直接用indexOf

广西南宁市2017-09-30 12:23:34

#⁹下标从0开始，0==false

广西南宁市2017-09-30 12:24:04

#⁹~是移位操作，找不到下标返回-1，移位之后是0，恰好0==false；找到的话，至少返回0，移位后是1，也就是true

广西南宁市2017-09-30 12:24:21

#⁹
~ 是按位非， ~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.
所以你这个是在大部分时候是没有问题的

查看文章跳到评论

广西南宁市 2017-09-30 12:13

#0

阅读 63.2万

JavaScript编程黑科技，装逼指南，高逼格代码

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

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

查看文章跳到评论

广西南宁市 2017-09-30 12:13

#0

阅读 63.2万

JavaScript编程黑科技，装逼指南，高逼格代码

还有个布尔值的处理

 eg:!!0 === false

查看文章跳到评论

广西南宁市 2017-09-30 12:11

#0

阅读 63.2万

JavaScript编程黑科技，装逼指南，高逼格代码

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

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

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

查看文章跳到评论

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

#0

阅读 63.2万

JavaScript编程黑科技，装逼指南，高逼格代码

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

查看文章跳到评论

广西南宁市 2017-09-30 10:22

#0

阅读 2233.9万

@意见反馈/技术支持/伊网/安企网

可以活泼但不能任性

查看文章跳到评论

广西南宁市 2017-09-29 18:04

#0

阅读 2233.9万

@意见反馈/技术支持/伊网/安企网

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

查看文章跳到评论

广西南宁市 2017-09-29 18:02

#0

阅读 42.8万

人类第四次发现引力波：首次确定方位

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

查看文章跳到评论

广西南宁市 2017-09-29 17:58

#0

阅读 42.8万

人类第四次发现引力波：首次确定方位

假如我的屌长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:52

#0

阅读 29.6万

jquery禁用a标签,jquery禁用按钮click点击

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

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

用

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

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

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

查看文章跳到评论

广西南宁市 2017-09-29 15:53

#0

阅读 2807.2万

常用html、demo代码

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

广西南宁市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 升序

查看文章跳到评论

广西南宁市 2017-09-29 10:37

#0

阅读 200.3万

on click事件在移动端点击无效bug

芳芳造型

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

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

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

广西南宁市2017-09-29 10:40:35

移动端:active伪类无效的解决方法
在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

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

广西南宁市2017-09-29 10:40:55

#²

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

广西南宁市2017-09-29 10:41:14

移动网页active

查看文章跳到评论

最新评论聚合