javascript如何使用函数random来实现课堂随机点名方法详解

 更新时间:2020年07月28日 16:40:09   作者:正好00  
这篇文章主要介绍了javascript如何使用函数random来实现课堂随机点名方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

如何使用函数random来实现课堂随机点名

1.最初的样子如下

2.点击开始点名,上面一行的文字变成名字,名字在不停的变化,开始点名变成停止点名,如下

3.点击停止点名,上面名字不动,停止点名变成开始点名,如下:李四同学回答老师问题

代码如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
  
   #d2{cursor:pointer;}/*让鼠标移到开始点名的时候变成手型*/
  </style>
 </head>
 <body>
 <div id="d1">亲,准备好了吗?</div> 
  <div id="d2" onclick="fun()">开始点名</div><!--触发事件句柄onlick,调用fun函数-->
  <script>
   
   var mytime=null;
   var d1=document.getElementById("d1");
   var d2=document.getElementById("d2");
   function fun()
   {if(mytime==null)
    {d2.innerHTML="停止点名";
    show();
    
    }
   else {
    
     clearTimeout(mytime);
     d2.innerHTML="开始点名";
     mytime=null;
   }
  }
   function show()
   {var s=["张三","李四","王五","王二","小二"];
    var name=Math.floor(Math.random()*10%s.length);//让name在下标0-4之间取得
    d1.innerHTML=s[name];
    mytime=setTimeout("show()",1);
   
   }
   </script>
  </body>
</html>

注意:random是Math中的函数,所以要写成Math.random()

到此这篇关于javascript如何使用函数random来实现课堂随机点名方法详解的文章就介绍到这了,更多相关javascript 使用函数random来实现课堂随机点名方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 怎么引入(调用)一个JS文件

    怎么引入(调用)一个JS文件

    这篇文章主要介绍了引入(调用)一个JS文的方法,非常不错介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-05-05
  • JS实现pasteHTML兼容ie,firefox,chrome的方法

    JS实现pasteHTML兼容ie,firefox,chrome的方法

    这篇文章主要介绍了JS实现pasteHTML兼容ie,firefox,chrome的方法,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • js实现最短的XML格式化工具实例

    js实现最短的XML格式化工具实例

    这篇文章主要介绍了js实现最短的XML格式化工具,实例分析了基于jquery-latest.js实现XML代码格式化的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JS实现获取时间已经时间与时间戳转换

    JS实现获取时间已经时间与时间戳转换

    这篇文章主要为大家提供了用JavaScript编写的获取时间的类,以及时间戳转时间的三种格式,文中的示例代码讲解详细,感兴趣的可以了解一下
    2022-03-03
  • 总结分享10个JavaScript代码优化小tips

    总结分享10个JavaScript代码优化小tips

    这篇文章主要介绍了总结分享10个JavaScript代码优化小tips,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • 基于JavaScript实现复选框的全选和取消全选

    基于JavaScript实现复选框的全选和取消全选

    这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 利用babel将es6语法转es5的简单示例

    利用babel将es6语法转es5的简单示例

    Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以下面这篇文章就来给大家详细介绍了关于利用babel将es6语法转es5的相关资料,文章通过示例介绍的非常详细,需要的朋友可以参考下。
    2017-12-12
  • js实现鼠标经过时图片滚动停止的方法

    js实现鼠标经过时图片滚动停止的方法

    这篇文章主要介绍了js实现鼠标经过时图片滚动停止的方法,可实现js滚动特效中的鼠标悬停停止图片滚动的功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • js简单实现Select互换数据的方法

    js简单实现Select互换数据的方法

    这篇文章主要介绍了js简单实现Select互换数据的方法,涉及javascript动态操作select中option节点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 网页加载时页面显示进度条加载完成之后显示网页内容

    网页加载时页面显示进度条加载完成之后显示网页内容

    网页加载时页面显示进度条(加载完成时显示网页内容),这种效果在浏览网页很常见,本文也介绍一种实现方法,需要了解的朋友可以参考下
    2012-12-12

最新评论