js实现随机点名程序


Posted in Javascript onSeptember 17, 2020

最近用到了一下随机点名程序,就自己整理一下。代码实现后的截图如下。

js实现随机点名程序

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>随机点名</title>
 <style>
  #content{
   width: 600px;
   height: 400px;
   background: #000;
   margin: 100px auto;
   text-align: center;
   position: relative;
   line-height: 300px;
   color: dodgerblue;
   font-size: 70px;
  } 
  #btn1{
   background: #ccc;
   width: 180px;
   height: 80px;
   font-size: 30px;
   color: #f40;
   border-radius: 12px;
   position: absolute;
   bottom: 30px;
   left: 50%;
   margin-left: -90px;
   
  }
 
 </style>
</head>
<body>
 <div id="content">
  <span id="span1">
   点击开始
  </span>
  <button id="btn1">
   start
  </button>

 </div>

 <script>
  var arr = ['中国','英国','德国','美国','意大利','法国','西班牙','日本','阿联酋','荷兰','葡萄牙'];
  var $btn1 = document.getElementById('btn1');
  var $content = document.getElementById('content');
  var $span1 = document.getElementById('span1');
  var timer;//计时器
  var testNum = true;
  $btn1.onclick = function(){
   if(testNum){
    // console.log(1);
    start();
    $btn1.innerHTML = 'stop';
    testNum = false;
   }
   else{
    // console.log(0);
    stop();
    $btn1.innerHTML = 'start';
    testNum = true;
   }
  }
  function start(){
    timer = setInterval(function(){
     var num = random(0,arr.length - 1);
     $span1.innerHTML = arr[num];
    },50)
  }
  function stop(){
    clearInterval(timer);  
  }
  // 随机函数
  function random(a,b){
   var randomNum = Math.round(Math.random() * (b - a) + a);
   return randomNum;
  }  
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
js实现计算器功能
Aug 10 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 #Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 #Javascript
原生js实现随机点名功能
Nov 05 #Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 #Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 #Javascript
javascript如何实现create方法
Nov 04 #Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
PHP强制转化的形式整理
2020/05/22 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
家得宝官网:The Home Depot(全球最大的家居装饰专业零售商)
2018/12/17 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
英文自荐信
2013/12/19 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
优秀班组事迹材料
2014/12/24 职场文书
老公婚前保证书
2015/02/28 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL