Web前端开发技术 HTML CSS javascript_抽奖系统(逻辑) 代码以打好 拿走就是用

前端开发需要逻辑|javascript 前端开发|网站前端开发

抽奖系统(逻辑)

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title>java和前端开发</title>
<style>
#div{
width:710px;
height:710px;
border:1pxsolidred;
}
section{
width:200px;
height:200px;
border:1pxsolidred;
display:inline-block;
padding:14px;
}
</style>
</head>
<body>
<div id=’div’>
<section class=’f’>一等奖</section>
<section class=’f’>二等奖</section>
<section class=’f’>三等奖</section>
<section class=’f’>四等奖</section>
<section class=’ff’>开始抽奖</section>
<section class=’f’>谢谢惠顾</section>
<section class=’f’>图片什么自己插入</section>
<section class=’f’>没啥打得了</section>
<section class=’f’>特等奖</section>
</div>
</body>
</html>
<script>
var count=0
var sudu=40
var ffEle=document.querySelector(‘.ff’)
var fEle=document.getElementsByClassName(‘f’)
window.onload = function () {
ffEle.onclick=function(){
suiji=Math.floor(Math.random() *150+150);
app()
}
function app(){
var arr= [0,1,2,4,7,6,5,3]
for (vari=0;i<arr.length;i++) {
fEle[i].style.border =’1px solid red’
}
fEle[arr[count%8]].style.border =’1px solid #fff000′
sudu+=5;
if (sudu<suiji) {
setTimeout(app,sudu)
}else{
sudu=40;
}
count++;
}
}
</script>
web前端开发javascript|javascript 前端开发工具
» 本文来自:前端开发者 » 《Web前端开发技术 HTML CSS javascript_抽奖系统(逻辑) 代码以打好 拿走就是用》
» 本文链接地址:https://www.rokub.com/3669.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!