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学堂
- ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)
- .NET Core的文件系统[2]:FileProvider是个什么东西?
- Python多线程怎样优雅的响应中断异常
- .NET Core的文件系统[3]:由PhysicalFileProvider构建的物理文件系统
- .NET Core的文件系统[4]:由EmbeddedFileProvider构建的内嵌(资源)文件系统
- 学习July博文总结——支持向量机(SVM)的深入理解(下)
- 在gridview和datagrid里设置列宽
- ASP.NET MVC的Model元数据与Model模板:将”ListControl”引入ASP.NET MVC
- .NET Core的文件系统[5]:扩展文件系统构建一个简易版“云盘”
- 全球15%工作将被自动化,中国1亿人将面临失业
- ASP.NET MVC的Model元数据提供机制的实现
- 清官难断家务事,人工智能却来介入家庭伦理大戏
- 使用Symfony的Console组件构建命令行程序
- 微软编程教育都在搞什么?从code.org到makecode,从Minecraft到Micro:bit
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 模拟入栈操作
- 古董键盘
- 标准字符设备驱动模板
- 这就是你日日夜夜想要的docker!!!---------三分钟带你玩转docker命令
- PLL/DLL/DCM/MMCM
- 常见编程模式之就地反转链表
- 这就是你日日夜夜想要的docker!!!---------Docker常规操作--端口映射、数据卷管理 以及容器互联
- redis学习(十八)
- Elasticsearch基础知识补齐
- 踩坑记 | 多aar下修改常量的一个小坑
- 学习mockjs
- CentOS7增加Swap分区大小
- vue可视化图表 基于Echarts封装好的v-charts简介
- Speak开坑记录
- JavaScript获取cookie的方法