js实现简单进度条

　　<!DOCTYPEhtml>

　　<htmllang="en">

　　<head>

　　<title>动态图片切换</title>

　　<metacharset="UTF-8">

　　<linkhref="css/style.css"rel="stylesheet">

　　</head>

　　<body>

　　<divid="container">

　　<imgsrc="images/dice_1.png"id="dice"alt="">

　　</div>

　　<divid="command">

　　<inputid="btn"type="button"value="摇一摇">

　　</div>

　　</body>

　　</html>

<scriptsrc="../../../Day12/code/public.js"></script>

　　<scripttype="text/javascript">

　　//获取所需元素

　　varbtn=document.getElementById("btn");

　　varimg=document.getElementById("dice");

　　//给btn一个点击事件

　　btn.onclick=function(){

　　//切换img的src为动画图片

　　img.src="images/diceDynamic.gif";

　　//隔一个随机时间毫秒数后，得到随机数

　　varrandTime=getRand(500,1000);//调用getRand（）函数

　　setTimeout(function(){

　　//1-6的随机数

　　varrand=getRand(1,6)

　　//切换img的src为随机的1-6的图片

　　img.src="images/dice_"+rand+".png";

　　},randTime);

　　}

　　</script>

　　运行后效果：

　　图片和css样式已分别上传至相册和文件。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56724.shtml