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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
原生js调用json方法总结
Feb 22 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
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写的资源下载防盗链类分享
2014/05/12 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
AngularJS快速入门
2015/04/02 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
layui复选框的全选与取消实现方法
2019/09/02 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
python中的数据结构比较
2019/05/13 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python处理session的方法整理
2019/08/29 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
亿企通软件测试面试题
2012/04/10 面试题
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2019大学生实习报告
2019/06/21 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python