js实现随机点名小功能


Posted in Javascript onAugust 17, 2017

本文实例为大家分享了js实现随机点名功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
 </head> 
 <body> 
  <div id="name1"></div> 
  <button id="btn">stop</button> 
   
 </body> 
 <script type="text/javascript"> 
  var flag = true; 
  var str = "张三,李四,王五,马六"; 
  var arr = str.split(","); 
  var interId = setInterval("randName()",100); 
  function randName(){ 
   var rand = Math.floor(Math.random() * arr.length); 
   name1.innerHTML = arr[rand]; 
  }  
  btn.onclick = function (){ 
   if (flag) { 
    btn.innerHTML = "start"; 
    clearInterval(interId); 
    flag = false; 
   } else{ 
     
 
btn.innerHTML = "stop"; 
    interId = setInterval("randName()",100); 
    flag = true; 
   } 
  } 
 </script> 
</html>

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

Javascript 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
浅谈Vuejs Prop基本用法
Aug 17 #Javascript
简单快速的实现js计算器功能
Aug 17 #Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
如何理解Vue的.sync修饰符的使用
Aug 17 #Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 #Javascript
js编写简单的聊天室功能
Aug 17 #Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 #Javascript
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Web程序工作原理详解
2014/12/25 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python猴子补丁知识点总结
2020/01/05 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
机械设计及其自动化专业求职信
2014/06/09 职场文书
2014年中秋寄语
2014/08/11 职场文书
银行委托书范本
2014/09/28 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
施工安全责任协议书
2016/03/23 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书