js控制动画暂停、开始及js外部样式和style属性的添加移除_js控制css动画开始

animation-play-state

而js中修改style属性的方法，可以参考这篇文章写的： js外部样式和style属性的添加移除文章中提到了修改的方法，即：

对于含有中划线的css属性，将每个中划线去点并将每个中划线后的第一个字母大写，通过style.改写后的属性名访问。如：obj.style.borderBottom = "";//清空 border-bottom属性
所以修改style的animation-play-state的方法：

 document.getElementById("loading").style.WebkitAnimationPlayState

这里的动画css:

.loading {
  position: relative;
  width: 0;
  padding: 20px;
  background:
   linear-gradient(rgba(0,102,205,1) 30%, transparent 30%, transparent 70%, rgba(0,102,205,.4) 70%),
   linear-gradient(to left, rgba(0,102,205,.2) 30%, transparent 30%, transparent 70%, rgba(0,102,205,.8) 70%);
  background-repeat: no-repeat;
  background-size: 10% 100%, 100% 10%;
  background-position: 50% 0%, 0 50%;
  -webkit-animation: loading .7s infinite steps(8); /*绑定的关键帧名称 动画时间 动画循环次数 */
  animation: loading .7s infinite steps(8);
}

html:

 <div id="loading" class="loading"></div>

<p align="center">
                            <input  type="button" class="btn btn-default" value="暂停"   onclick ="loadingStop()" />
                            <input  type="button" class="btn btn-default" value="继续"   onclick ="loadingStart()" />
 /*暂停扫描按钮*/
 function loadingStop(){
     document.getElementById("loading").style.animationPlayState = "paused";
     document.getElementById("loading").style.WebkitAnimationPlayState = "paused"; // 针对 Chrome 和 Safari 的代码
 /*继续扫描按钮*/
 function loadingStart(){
     document.getElementById("loading").style.animationPlayState = "running";
     document.getElementById("loading").style.WebkitAnimationPlayState = "running"; // 针对 Chrome 和 Safari 的代码
                    动画效果主要是css的animation属性：http://www.runoob.com/cssref/css3-pr-animation.html即动画的暂停和继续是修改属性：animation-play-state而js中修改style属性的方法，可以参考这篇文章写的：js外部样式和style属性的添加移除文章中提到了修改的方法，即：对于含有中划线的css属
				移入移出动画效果的实现主要用到了定时器。定时器即 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。它会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
&lt;div id="div"&gt;
    &lt;span&gt...
简单介绍用到的知识点
定位：position：absolute ，绝对定位，是相对于脱离文档流的父级定位标签进行定位，包括（absolute、relative），如果上一级没有找到，就继续一层一层的往上找，直到找到定位的标签，如果都没有，默认为body；
定位：position: ...
				之前写作业想要实现通过点击触发animation动画的效果。理论上可以用js修改css达到目的，不过我不晓得怎样修改keyframes里的内容，在网上也没找到合适的方法。一开始我的思路是写两份css，一份初始状态，一份是点击之后需要显示的效果，但在实际操作中发现如果直接替换css的话，动画效果并不会出现，只能显示动画结束时的状态。所以后面我改变了做法，不改变文件，而是改变css代码块。简单来说就是对同一内容写两份不同的css代码块，通过更换class的值达到修改css的效果。
//添加动画
style.insertRule(`@keyframes zhuan{from{transform:rotate(0deg);}to{transform:rotate(360deg)}}`,0);
//删除动画
document.styleSheets[0].deleteRule(0);
document.getElementById("word").onmouseover = null;
javascript改变样式：
document.getElementById("word").style.backgroundColor= "black";   有style
jquery移除事件：
$('.choose').unbind(...
                Mysql5.6 ERROR 1396 (HY000): Operation CREATE USER failed for ‘xxxx‘@‘localhost ‘问题解决
                    到底有多少人叫JerryMa: 
                    thanks
                Mysql5.6 ERROR 1396 (HY000): Operation CREATE USER failed for ‘xxxx‘@‘localhost ‘问题解决
                    到底有多少人叫JerryMa: 
                    thanks
                Mysql5.6 ERROR 1396 (HY000): Operation CREATE USER failed for ‘xxxx‘@‘localhost ‘问题解决
                    到底有多少人叫JerryMa: 
                    thanks