一个装逼的小技巧，打印带颜色的log
console.log("%chellow","color:yellow");
以表格的方式打印数据
var obj={
name:"tom",
age:18
}
console.table(obj);
检测方法的调用来源
console.trace()
输出运行次数
console.count()
测试速度
console.time();
$("div");
console.timeEnd();
唔，看到阮一峰的一个写法
setTimeout(fun,1000,'done')
//以上写法相当于
setTimeout(fun('done'),1000)
//在setTimeout中第三个参数开始，所有的参数会被是作为第一个参数也就是function的参数来处理
//这个蛮有意思的，之前在其它文档没有看过这个写法，MDN上有
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
验证码弹出
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
padding: 0;
margin: 0;
}
.clearfix::after, .clearfix::before {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
input {
border: none;
outline: none;
background-color: #fff;
}
.current {
background-color: #ccc;
}
.layerVerifcation {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
padding: 20px 10px;
width: 80%;
height: 200px;
border: 1px solid #CCCCCC;
box-sizing: border-box;
}
.layerVerifcation h4 {
text-align: center;
}
.layerVerifcation .infoShow {
margin-top: 10px;
}
.layerVerifcation .infoShow a {
position: absolute;
top: 20px;
right: 10px;
font-size: 18px;
}
.layerVerifcation .infoShow input {
float: right;
}
.layerVerifcation .number-input {
width: 250px;
margin: 40px auto 0;
}
.layerVerifcation .number-input li {
list-style: none;
}
.layerVerifcation .number-input .span_code {
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
margin-left: 10px;
line-height: 50px;
text-align: center;
font-size: 24px;
}
.layerVerifcation .hide-input {
opacity: 0;
}
</style>
<title>Document</title>
</head>
<body>
<div class="layerVerifcation" id="verfication">
<h4 class="layerVerifcation-title">请输入验证码</h4>
<div class="infoShow clearfix">
<span>187217054XX</span>
<input type="button" value="重新发送">
<a class=“close>✖</a>
</div>
<ul class="number-input clearfix">
<li><span class="span_code" style="margin: 0;"></span></li>
<li><span class="span_code"></span></li>
<li><span class="span_code"></span></li>
<li><span class="span_code"></span></li>
</ul>
<div class="hide-input">
<input class="hide_code" oninput="if(value.length>4)value=value.slice(0,4)" type="number">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$(function () {
var lis = $(".number-input li");
$(".span_code").on("click", function () {
$(".hide_code").focus();
$(".span_code").eq(0).addClass("current");
})
$(".hide_code").on("input", function () {
var strCode = $(this).val(),
len = strCode.length,
spanlen = len - 1;
lis.each(function (i, j) {
console.log(i);
if (i > spanlen) {
$(j).children(".span_code").html("");
}
})
if (spanlen == -1) spanlen = 0;
$(".span_code").removeClass("current");
lis.eq(spanlen).children(".span_code").html(strCode.substring(spanlen, len)).addClass("current")
})
})
</script>
</body>
</html>
文字的展开、收起
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi cumque earum fugit magni nulla pariatur quos
rem sapiente voluptates!
</div>
<button id="more">more</button>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function more(options) {
var init = {
container: "#container",
maxLength: 15,
ending: "..."
};
this.option = $.extend({}, init, options);
this.text = $(this.option.container).text();
this.flag = false;
}
more.prototype.isStop= function () {
if (this.flag) {
$(this.option.container).text(this.text.toString().substring(0, this.option.maxLength) + this.option.ending);
this.flag = false;
}else{
$(this.option.container).text(this.text);
this.flag=true;
}
}
var a=new more();
$("#more").click(function () {
a.isStop()
})
</script>
</html>
Element.dataset
Element.dataset属性允许无论是在读取模式和写入模式下访问在HTML或DOM中的元素上设置的所有的自定义数据属性（data-）集，在H5中我们可以给HTML元素添加data-属性，我们可以为该元素设置任意名称，但是在使用element.datasetAPI时我们需要注意以下规则：
- element.dataset不能直接拿来使用，否则会遇到提示报错
- 在javascript里使用data-*属性名称时，要把名称转变为驼峰式命名法
- 名称不能以xml打头
- 名称里不能有大写字母
下面我们来举一个栗子：
<body>
<div id="myDiv" data-name="my-name" data-id="my-id" data-my-custom-key="This is this value"></div>
<script>
var element=document.getElementById("myDiv");
// 获取自定义属性
var id=element.dataset.id,
name=element.dataset.myCustomKey;
// 更改自定义属性的值
element.dataset.myCustomKey="some other value"
// 如果之前在元素上不存在myCreate的属性，那么会添加到元素上
element.dataset.myCreate="my create"
console.log("id|" + id + "|name|" + name);
</body>
Object.freeze(obj)
该方法用来冻结对象，参数为要冻结的对象，返回值为冻结后的对象，在执行该命令之后，参数obj不能改变/添加自身的变量，要求参数必须为对象，否则会报 TypeError错误
var obj={
name:'tom',
age:18
}
Object.freeze(obj);
obj.name="jack"
obj.sex="man"
obj.name="jack"
console.log(obj)
classList
返回元素的类名，该属性用于在元素中添加，移除以及切换css类
属性
- length：返回列表中类的数量
方法
-
add(class1,class2...)
在元素中添加一个或多个类名，如果指定的类名已经存在，则不会添加
-
contains(class)
返回布尔值，判断指定的类名是否存在，true表示该类已经存在，false表示不存在
-
item(index)
返回元素引用的类集合的对应索引的类名，索引值从0开始，如果索引在区间范围外则返回null
-
remove(class1,class2....)
移除元素中的一个或多个类名，移除不存在的类名不会报错
-
toggle(class,true|false)
在元素中切换类名，如果类名已经存在了那么会一出类名返回false，如果类名不存在那么会添加类名返回true
第二个参数为可选参数，表示是否强制添加/移除该类，不管该类是否存在
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.color{
background-color: red;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="box" class="one">
</div>
<button>chang</button>
</body>
<script>
document.getElementById("box").classList.add("color");
document.getElementById("box").classList.remove("color");
console.log(document.querySelector("#box").classList.item(1));
document.getElementsByTagName("button")[0].onclick=function(){
document.querySelector(".one").classList.toggle("color")
}
</script>
transitionend
该事件会在transition完成之后触发
<body>
<div id="box" class="color-g color-y">
</div>
</body>
<script>
document.querySelector("#box").addEventListener("click", function () {
this.style.height = "300px"
})
document.querySelector("#box").addEventListener("transitionend",function () {
alert("过渡结束事件触发了");
})
</script>
在看全选反选时比较有意思的代码，这段代码是用来判断全选按钮是否应该是选中状态
$('#both').prop('checked',$tmp.length==$tmp.filter(":checked").length)
console.time("a")
// var i=1000;
for(var i=10;i--;){
console.log(i);
}
console.timeEnd("a")
var arr=['tom',2,3,'jack'];
for(var i=0,a;a=arr[i++];){
console.log(arr[i]);
}
localStorage存储数组
var weekArray = ['周一'、'周二'、'周三'、'周四'、'周五']
//存：
localStorage.setItem('weekDay',JSON.stringify(weekArray));
//取：
weekArray = JSON.parse(localStorage.getItem('weekDay'));
