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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
Websocket 向指定用户发消息的方法
Jan 09 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
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
详解Vue 换肤方案验证
2019/08/28 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python抖音表白程序源代码
2019/04/07 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
python scatter函数用法实例详解
2020/02/11 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
八年级生物教学反思
2014/01/22 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL