2016.05 第四周 群问题分享

HTML+CSS

如何让正在运行的动画暂停

2016.05.23~2016.05.27

核心内容

animation-play-state属性

参考答案

animation-play-state 属性规定动画运行还是暂停,可以在JavaScript中使用该属性,这样就能方便控制动画的运行状态。

animation-play-state: paused(规定动画已暂停)| running(规定动画正在播放);

浏览器支持程度:IE10、Firefox、Chrome 以及 Opera 支持该属性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <style type="text/css">
        .wrap {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            line-height: 200px;
            text-align: center;
            -webkit-animation: change 1s linear infinite;
            -ms-animation: change 1s linear infinite;
            -o-animation: change 1s linear infinite;
            animation: change 1s linear infinite;
        }
        @-webkit-keyframes change {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }
        @-ms-keyframes change {
            from {
                -ms-transform: rotate(0deg);
            }
            to {
                -ms-transform: rotate(360deg);
            }
        }
        @-o-keyframes change {
            from {
                -o-transform: rotate(0deg);
            }
            to {
                -o-transform: rotate(360deg);
            }
        }
        @keyframes change {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wrap">HTML5学堂 利利&堡堡</div>
    <script type="text/javascript">
        var wrapEle = document.querySelector('.wrap');


        // 鼠标移入动画暂停
        wrapEle.addEventListener('mouseenter', function() {
            this.style.webkitAnimationPlayState = 'paused';
            this.style.msAnimationPlayState = 'paused';
            this.style.oAnimationPlayState = 'paused';
            this.style.animationPlayState = 'paused';
        }, true);


        // 鼠标移开动画开始
        wrapEle.addEventListener('mouseleave', function() {
            this.style.webkitAnimationPlayState = 'running';
            this.style.msAnimationPlayState = 'running';
            this.style.oAnimationPlayState = 'running';
            this.style.animationPlayState = 'running';
        }, true);
    </script>
</body>
</html>

效果:

如何美化input[type=search]搜索框右侧小图标

2016.05.23~2016.05.27

核心内容

::-webkit-search-cancel-button伪元素

参考答案

代码:

input[type=search]::-webkit-search-cancel-button { 
    width: 15px; 
    height: 15px;
    background:url("images/searchicon.png") no-repeat 0 0;
    background-size: 15px 15px;
    border-radius: 8px; 
    -webkit-appearance: none;
}

效果:

处理前

处理后

JavaScript

如何获取数组的最小值

2016.05.23~2016.05.27

核心内容

Math.min()、apply()、for

参考答案

方法一:

<script type="text/javascript">
    var arr = [10, 3, 8, 9, 30];


    // Math.min( )方法不支持数组的参数,所以利用apply( )方法使min( )方法支持数组的参数
    console.log(Math.min.apply(null, arr));
</script>

方法二:

<script type="text/javascript">
    var arr = [10, 3, 8, 9, 30],
        // 存储最小值(默认认为第一个是最小值)
        min = arr[0],
        length = arr.length;


    // 利用for语句来查找数组中的最小值
    for (var i = 0; i < length; i++) {
        // 循环遍历数组,查找比min还小的值
        if (arr[i] < min) {
            min = arr[i];
        };  
    };


    console.log(min);
</script>

使用 typeof bar === "object" 来判断 bar 是不是一个对象有潜在的弊端,如何避免这种弊端

2016.05.23~2016.05.27

核心内容

Object.prototype.toString.call()

参考答案

Object.prototype.toString.call(bar) === "[object Object]";具体来看下面的分析;

使用 typeof 的弊端是显而易见的(这种弊端如同使用 instanceof):

let obj = {};
let arr = [];


console.log(typeof obj === 'object');  //true

console.log(typeof arr === 'object');  //true

console.log(typeof null === 'object');  //true

从上面的输出结果可知,typeof bar === "object" 并不能准确判断 bar 就是一个 Object。可以通过 Object.prototype.toString.call(bar) === "[object Object]" 来避免这种弊端:

let obj = {};
let arr = [];


console.log(Object.prototype.toString.call(obj));  //[object Object]

console.log(Object.prototype.toString.call(arr));  //[object Array]

console.log(Object.prototype.toString.call(null));  //[object Null]

怎样调试JavaScript代码

2016.05.23~2016.05.27

核心内容

谷歌控制台断点调试

参考答案

首先按下F12打开调试面板,选择Sources,然后在左侧找到你需要断点调试的资源,选中就会自动打开代码。

这里用的demo是身份证验证的demo

/*
* 功能:验证身份证是否可用,如果可用,则提取生日、性别等信息
* 参数:传入一个字符串(建议不要采用数字,18位的数字会有精确度问题)
* 返回:包含基本信息的对象
* 作者:HTML5学堂 http://www.h5course.com
*/
function regIDAllInf(str){
    str = str.toString();
    var reg = /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$/;
    // 用于存储结果
    var result = {};
    if (reg.test(str)) {
        var sum = 0;
        var arrID = str.split("");
        var arrWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
        var arrY = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];
        for (var i = 0; i < arrWi.length; i++) {
            sum += arrID[i] * arrWi[i];
        };
        sum %= 11;
        var lastID = arrID[arrID.length - 1];
        if (lastID == "X" || lastID == "x") {
            lastID = 10;
        };
        if (arrY[sum] == lastID) {
            result["check"] = true;
            result["birthday"] = str.substr(6, 8);
            result["cityCode"] = str.substr(0, 6);
            result["gender"] = (str.substr(14, 3) % 2 == 0) ? "女" : "男";
        } else {
            result["check"] = false;
            result["error"] = "身份证号码输入错误";
        }
    } else {
        result["check"] = false;
        result["error"] = "身份证号码格式有误";
    }
    return result;
}
console.log(regIDAllInf('110000199101010001'));

可以看到,中间代码部分,有1234行数的序号,我们需要打断点就可以直接点击左侧就可以了,这里我们在几个if else 处打上断点。

可以看出来,代码执行到断点处就暂停了,这样可以非常方便我们看数据交互状态,鼠标放在参数上面也可以看到具体的参数信息,右侧也可以看到断点时候的局部和全局的属性,当我们执行到return 的时候能更清楚的看到return 之前所有数据的状态。

断点调试的基本用法就是这样了,比起console.log()的方式打印出信息,这样做能够更全面的掌握代码的执行情况,并且不需要频繁的修改js,但是记得调试完后把断点全部取消哦,取消方法:再次左键点击一下就取消了断点调试了。是不是感觉更方便了呢。

如果想具体了解关于PC端、移动端的调试,可以在HTML5学堂官网搜索“调试”,进一步深入了解关于各种调试问题。

HTML5学堂小编 - 陈林&堡堡 耗时3h

欢迎沟通交流~HTML5学堂

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏达摩兵的技术空间

oo-css面对对象的编程样式

很多开发者觉得css很简单,如果有时间更愿意用在学习和研究js上,随着css3推出以及一些css的预处理语言和面对对象的编程css的方式的出现,css已经出现了...

922
来自专栏超然的博客

事件委托和this

  事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主...

1413
来自专栏我和未来有约会

(收藏)JS验证

1 /* 2 函数名:检验表单的函数 3 作者:xuwen 日期:2007-2-10 4 参数 _obj:验证的对象 ...

25510
来自专栏卡少编程之旅

四个Vue的写法优化技巧

3536
来自专栏mySoul

jQuery(一)

jquery为一种库,属于最基础的一个库,伴随着h5的到来,很多jquery的规则直接融入到了规则本身了,直接使用原生的js也能达到相同的目的。虽然如此,不过依...

2634
来自专栏腾讯社交用户体验设计

面向未来的 CSS Variable

882
来自专栏AndroidTv

前端入门6-JavaScript客户端api&jQuery

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

1254
来自专栏编程

jQuery第八课

jQuery Callback 方法 Callback 函数在当前动画 100% 完成之后执行。 jQuery 动画的问题 许多 jQuery 函数涉及动画。这...

2056
来自专栏葡萄城控件技术团队

Mobile First! Wijmo 5 之 架构

本文就开发者关心的话题之一架构,展开叙述。 ? Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆。在此前开发Wijmo的时候,我们能够...

24210
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

1044

扫码关注云+社区

领取腾讯云代金券