Html+JS+Css 实现动物赛跑随机速度

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!-- <link rel="stylesheet" href="css/mystyle.css" /> --><!-- <script type="text/javascript" src="js/myjs1.js" ></script> --><style>#map{width: 1000px;height: 600px;position: absolute;left: 200px;top: 100px;border: solid 1px #90E090;text-align: center;}img{display: none;position: absolute;width: 32px;height: 32px;}</style></head><body><div id='map'><input type="button" value="开始" onclick="start()"/><input type="button" value="暂停" onclick="stop()"/><input type="button" value="继续" onclick="restart()"/></div><img id='r' src="img/r.jpg" /><img id='t' src="img/t.jpg" /><img id='z' src="img/z.jpg" /><img id='x' src="img/x.jpg" /><img id='c' src="img/c.jpg" /><img id='v' src="img/v.jpg" /><img id='b' src="img/b.jpg" /></body>
</html><script>//javascript实现代码
function start(){t=document.getElementById('t')
r=document.getElementById('r')
z=document.getElementById('z')
x=document.getElementById('x')
c=document.getElementById('c')
v=document.getElementById('v')
b=document.getElementById('b')t.style.left='200px';
t.style.top='250px';r.style.left='200px';
r.style.top='300px';z.style.left='200px';
z.style.top='350px';x.style.left='200px';
x.style.top='400px';c.style.left='200px';
c.style.top='450px';v.style.left='200px';
v.style.top='500px';b.style.left='200px';
b.style.top='550px';t.style.display='block'
r.style.display='block'
z.style.display='block'
x.style.display='block'
c.style.display='block'
v.style.display='block'
b.style.display='block'star=setInterval(move,100)
}
function move(){t=document.getElementById('t')
r=document.getElementById('r')
z=document.getElementById('z')
x=document.getElementById('x')
c=document.getElementById('c')
v=document.getElementById('v')
b=document.getElementById('b')rleft=r.style.left
tleft=t.style.left
zleft=z.style.left
xleft=x.style.left
cleft=c.style.left
vleft=v.style.left
bleft=b.style.leftrleft=Number.parseInt(rleft.split('px')[0])
tleft=Number.parseInt(tleft.split('px')[0])
zleft=Number.parseInt(zleft.split('px')[0])
xleft=Number.parseInt(xleft.split('px')[0])
cleft=Number.parseInt(cleft.split('px')[0])
vleft=Number.parseInt(vleft.split('px')[0])
bleft=Number.parseInt(bleft.split('px')[0])rleft+=Math.ceil(Math.random()*10);
tleft+=Math.ceil(Math.random()*10);
zleft+=Math.ceil(Math.random()*10);
xleft+=Math.ceil(Math.random()*10);
cleft+=Math.ceil(Math.random()*10);
vleft+=Math.ceil(Math.random()*10);
bleft+=Math.ceil(Math.random()*10); t.style.left=tleft+'px';
r.style.left=rleft+'px';
z.style.left=zleft+'px';
x.style.left=xleft+'px';
c.style.left=cleft+'px';
v.style.left=vleft+'px';
b.style.left=bleft+'px';//alert(t.style.left)
if(parseInt(t.style.left) > 1200){clearInterval(star)alert('游戏已结束！乌龟取得胜利！')t.style.left='200px'r.style.left='200px'z.style.left='200px'x.style.left='200px'c.style.left='200px'v.style.left='200px'b.style.left='200px'}else if(parseInt(r.style.left) > 1200){clearInterval(star)alert('游戏已结束！兔子取得胜利！')t.style.left='200px'r.style.left='200px'z.style.left='200px'x.style.left='200px'c.style.left='200px'v.style.left='200px'b.style.left='200px'}else if(parseInt(z.style.left) > 1200){clearInterval(star)alert('游戏已结束！猴子取得胜利！')t.style.left='200px'r.style.left='200px'z.style.left='200px'x.style.left='200px'c.style.left='200px'v.style.left='200px'b.style.left='200px'}else if(parseInt(x.style.left) > 1200){clearInterval(star)alert('游戏已结束！老虎取得胜利！')t.style.left='200px'r.style.left='200px'z.style.left='200px'x.style.left='200px'c.style.left='200px'v.style.left='200px'b.style.left='200px'}else if(parseInt(c.style.left) > 1200){clearInterval(star)alert('游戏已结束！大象取得胜利！')t.style.left='200px'r.style.left='200px'z.style.left='200px'x.style.left='200px'c.style.left='200px'v.style.left='200px'b.style.left='200px'}else if(parseInt(v.style.left) > 1200){clearInterval(star)alert('游戏已结束！长颈鹿取得胜利！')t.style.left='200px'r.style.left='200px'z.style.left='200px'x.style.left='200px'c.style.left='200px'v.style.left='200px'b.style.left='200px'}else if(parseInt(b.style.left) > 1200){clearInterval(star)alert('游戏已结束！斑马取得胜利！')t.style.left='200px'r.style.left='200px'z.style.left='200px'x.style.left='200px'c.style.left='200px'v.style.left='200px'b.style.left='200px'}
}
function stop(){clearInterval(star)
}
function restart(){star=setInterval(move,100)
}</script>

可以将图片改为赛马或者其他人物

Html+JS+Css 实现动物赛跑随机速度相关推荐

js+css实现骰子的随机转动
网上找的例子,然后增添了新的东西,在这里展示一下...... 效果图预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
JS / CSS / 网络部分知识总结
(1)垂直两栏左边固定右边自适应 //基本布局*{margin: 0;padding: 0;}.outer{height: 200px;}.left{background-color: gold;h ...
maven js css 压缩,maven压缩js css
maven压缩 net.alchim31.maven yuicompressor-maven-plugin 1.3.0 prepare-package compress UTF-8 false fal ...
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
一款JS+CSS实现的无缝平滑图片滚动代码
代码简介: 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 代码内容 ...
html+js+css 调用jquery 工人信息管理功能（增删改查）前端实现，以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...
Html+css+JavaScript做一个随机点名器
HTML+CSS+JavaScript 来实现随机点名器话不多说,直接开整第一张图是随机点名器的初始页面当点击开始按钮时,JS 程序中提前准备好人员(数组)名单 var arr = [" ...
js/css批量压缩工具(JsCssZip)
js/css批量压缩工具(JsCssZip)是一款页面简洁友好,功能强大的js/css代码压缩工具,它能对js和css代码进行压缩.精简,保持原有的代码的功能,让代码体积变小,点击压缩即可完成,提高代 ...

Html+JS+Css 实现动物赛跑随机速度

Html+JS+Css 实现动物赛跑随机速度相关推荐

最新文章

热门文章