目录
1.猜数字游戏
需求:
随机出一个1-100之间的随机整数,让用户去猜
不断地猜,直到猜对为止,需要给用户提醒,大了还是小了,以及猜中了
代码演示 :
<script> //获取随机数 let num = Math.floor(Math.random()*100+1); let count = 0; do{ //输入猜的数据 count++; var n =window. prompt("请输入要猜的数据"); if(n>num){ alert("猜大了"); } else if(n<num){ alert("猜小了"); }else{ alert("恭喜你,猜对啦,一共猜了"+count+"次 "); } }while(n!=num) </script>
运行结果 :
2. 抽奖小活动
当点击开始抽奖按钮之后,会随机在每个员工的名字上展示不同的颜色,最后点击停止抽奖按钮之后,颜色停在哪个员工的名字之上,表示该员工获得本次抽奖;
<table>
<tr>
<td>刘亦菲</td>
<td>周迅</td>
<td>张韶涵</td>
<td>赵丽颖</td>
<td>戚薇</td>
</tr>
<tr>
<td>王祖贤</td>
<td>蔡依林</td>
<td>蔡少芬</td>
<td>王力宏</td>
<td>宋轶</td>
</tr>
<tr>
<td>钟丽缇</td>
<td>钟楚红</td>
<td>黎姿</td>
<td>孙千</td>
<td>江疏影</td>
</tr>
<tr>
<td>张凌赫</td>
<td>予舒心</td>
<td>宋威龙</td>
<td>韩红</td>
<td>景天</td>
</tr>
<tr>
<td>陈赫</td>
<td>宋茜</td>
<td>杨超越</td>
<td>胡歌</td>
<td>白百合</td>
</tr>
</table>
<script>
//1.获取按钮并给与绑定事件
let btn=document.querySelector("button");
//3.获取所有的表格元素
let tds= document.querySelectorAll("td");
//定义变量记录上一次随机的索引
let lastIndex=0;
//4.定义按钮变量的状态,分为两个状态,1开始抽奖,2停止抽奖
let flag=false;//true表示开始抽奖,false表示停止抽奖
let timeId;
//2绑定事件
btn.addEventListener('click',function(){
//给flag赋值,第一次点击肯定是开始抽奖按钮,那么新的flag=true,会走if判断逻辑,然后第二次点击是停止抽奖按钮,那么!flag=false,就会走else逻辑业务
flag=!flag;
if(flag){
timeId= setInterval(function(){
//获取随机的表格对应的索引,这个是新的索引
let newIndex= parseInt(Math.random() * tds.length);
//然后把上次旧的索引对应的表格颜色背景改为"
tds[lastIndex].style.backgroundColor="";
//新的索引对应的表格颜色背景改为pink
tds[newIndex].style.backgroundColor="#ccc";
//执行替换背景颜色之后,那么newIndex就是lastIndex
lastIndex=newIndex;
},100)
btn.innerHTML="停止抽奖";
}else{
//停止定时器
clearInterval(timeId);
btn.innerHTML="开始抽奖";
}
})
</script>