JavaScript /

作者: 羊烊羴 | 来源:发表于2017-09-08 13:50 被阅读0次

一个装逼的小技巧，打印带颜色的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'));

JavaScript /

验证码弹出

文字的展开、收起

Element.dataset

Object.freeze(obj)

classList

属性

方法

transitionend

localStorage存储数组

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavacScript