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 学习笔记 选择器之三
Jul 23 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python数据类型详解(二)列表
2016/05/08 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
pytorch permute维度转换方法
2018/12/14 Python
简单了解Python生成器是什么
2019/07/02 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
重构Python代码的六个实例
2020/11/25 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
平面设计岗位职责
2013/12/14 职场文书
2015年见习期工作总结
2014/12/12 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
无线电通信名词解释
2022/02/18 无线电