初学JavaScript之利用计时器和随机数做出的小例子

Posted qjdxb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学JavaScript之利用计时器和随机数做出的小例子相关的知识,希望对你有一定的参考价值。

/*点击开始按钮,小圆球随机取数;点击暂停按钮,取数结束*/ 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>摇摇乐</title>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
    color: #FFFFFF;
  }
  input{
    width: 100px;
    height: 50px;
    background: red;
  }
  ul{
    overflow: hidden;
  }
  ul li{
    list-style: none;
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
    margin: 5px;
    text-align: center;
    line-height: 50px;
  }
  ul li:nth-of-type(6),ul li:nth-of-type(7){
    background: blue;
  }
</style>
</head>
<body>
  <input type="button" name="start" id="start" value="开始" />
  <input type="button" name="stop" id="stop" value="暂停" />
  <ul id="balls">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
<script type="text/javascript">
  var start = document.querySelector("#start");
  var stop = document.querySelector("#stop");
  var balls = document.querySelector("#balls").querySelectorAll("li");
  var click = true;
  start.onclick = function(){
    if(click){
      timer = setInterval(function(){

        //前五个小圆球1-30之间随机
        for(var i = 0; i<5;i++){
          balls[i].innerText= Math.floor(Math.random()*(30-1+1)+1);;
        }

        //后两个小圆球1-12之间随机
        for(var i = 5; i<=6;i++){
          balls[i].innerText= Math.floor(Math.random()*(12-1+1)+1);
        }
      },30)
    click = false;
    }
  }

  stop.onclick = function(){
    clearInterval(timer);
    click = true;
   }
</script>
</html>

 








































































以上是关于初学JavaScript之利用计时器和随机数做出的小例子的主要内容,如果未能解决你的问题,请参考以下文章

Android之利用JSBridge库实现Html,JavaScript与Android的所有交互

如何使用随机森林做出(是/否或 1-0)决定?

javaScript 利用随机数和定时器完成几个有用的文字小操作 文字的滚动效果,文字的打印效果和文字的颜色闪烁

初学javascript,要求编写一个倒计时,格式如00:00:00该怎么实现?时间是自己设定,想设置多少秒就多少秒

2019-04-15 Python之利用matplotlib和numpy的简单绘图

python3之利用字典和列表实现城市多级菜单