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 相关文章推荐
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
开启BootStrap学习之旅
May 04 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 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
简单易用的计数器(数据库)
2006/10/09 PHP
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python中count函数简单用法
2020/01/05 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
干部鉴定材料
2014/05/18 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
python实现双向链表原理
2022/05/25 Python