js实现简单动画播放:
功能描述:用js简单制作一个由按钮控制的可以随机播放图片的动画效果,这里当点击开始,可以 不停止的播放,只有点击停止的时候才暂停,当再次点击开始的时候,继续当前页面开始播放。
需要了解的知识点:
1,需要了解元素(对象)中(添加,删除与判断 )属性的方法
2,需要了解计时器的应用
3,对象的获取与绑定
4,递归的调用函数
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机播放</title>
<link rel="stylesheet" type="text/css" href="japractice.css">
<script type="text/javascript" src="jspractice.js"></script>
</head>
<body >
<div class="star" id="pc">准备观赏旅行回忆咯</div>
<input type="button" id="btn" value="开始">
</body>
</html>
css
*{
padding:0px;
margin: 0px;
}
.star{
width: 900px;
height: 480px;
text-align: center;
line-height: 480px;
color: #61a58c;
font-family: Bahnschrift;
margin: 15px auto;
font-size: 40px;
border: 1px red solid;
}
.pic{
width: 900px;
height: 480px;
border: 1px solid chartreuse;
margin: 15px auto;
}
#btn{
width: 100px;
height: 30px;
margin: 3px auto;
display: block;
}
js
window.onload = function()
{
//获取对象
var pc = document.getElementById("pc");
var btn = document.getElementById("btn");
//创建一个数组是为了循环图片
var list=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
//mytime用来作为标识
var mytime = null;
//给指定对象添加属性
function addClass(obj, cn){
obj.className +=" "+cn;
};
//删除指定的元素(对象)的属性
function removeClass(obj,cn){
var reg = new RegExp("\\b"+cn+"\\b");
obj.className = obj.className.replace(reg, " ");
}
//判断是否含指定的属性
function hasClass(obj, cn)
{
//创建正则表达是的构造函数
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
};
function show(){
//生成随机数
num = Math.floor(Math.random()*10) % list.length;
pc.style.background="url("+list[num]+") no-repeat";
pc.innerHTML = " ";
//由于setTimeout是只执行一次的函数,这里第一个参数添加函数,自我反复调用.
//开启计时器
mytime=setTimeout(show,800);
};
btn.onclick = function()
{
//添加指定的属性
if(!hasClass(pc,"pic"))
{
addClass(pc,"pic");
}
if(mytime == null)
{
btn.value= "停止";
show();
}else{
btn.value = "开始";
//关闭计时器
clearTimeout(mytime);
//mytime也是全局变量
mytime=null;
}
};
}