主要知识点涉及if选择结构判断语句、数组的定义、定时器、清除定时器、日期对象的使用。

1.HTML结构

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>随机点名</title>

     <style type="text/css">

         .box{

             width: 200px;

             height: 200px;

             border: 1px solid red;

         }

         #uname{

             width: 100px;

             height: 50px;

             background: pink;

             /* 设置div块 水平居中*/

             margin: 0 auto;

             margin-top: 30px;

             text-align: center;  /* 设置文本水平居中 */

             line-height: 50px;  /* 设置文本垂直居中 */

             font-weight: bold;  /* 字体加粗 */

             font-size: 20px;  /* 设置字体大小 */

         }

         button{

             display: block; /* 将元素转换成行内块元素 */

             margin: 10px auto;

         }

     </style>

 </head>

 <body>

 <div class="box">

     <div id="uname">姓名</div>

     <button>开始</button>

 </div>

 </body>

 </html>

页面如下图所示：

2.js代码

1）在开始按钮和结束按钮之间相互转换

点击  开始  按钮，将按钮中的内容修改为  结束

 <body>

 <script type="text/javascript">

     // 获取按钮对象

     var btn = document.getElementsByTagName("button")[0];

     // 给按钮添加单击事件

     btn.onclick = function(){

         btn.innerHTML="结束"

     };

 </script>

 </body>

点击结束按钮 ，按钮变成开始按钮

切换按钮：判断按钮状态，如果按钮为开始按钮，将按钮变成结束按钮；

如果按钮为结束按钮，将按钮变成开始按钮。

 <body>

 <script type="text/javascript">

     // 获取按钮对象

     var btn = document.getElementsByTagName("button")[0];

     // 给按钮添加单击事件

     btn.onclick = function(){

         if(btn.innerText=="开始"){

             btn.innerHTML="结束"

         }else{

             btn.innerHTML="开始"

         }

     };

 </script>

 </body>

定义一个数组用来存储人名，点击开始按钮，随机选择人名；

点击停止按钮，页面不再发生变化。

 <body>

 <div class="box">

     <div id="uname">姓名</div>

     <button>开始</button>

 </div>

 <script type="text/javascript">

     // 定义数组  存储人名

     var arr = ['李白','杜甫','韩愈','柳宗元','欧阳修','苏洵','苏轼','苏辙','王安石','曾巩','陶渊明','辛弃疾','李贺','陆游'];

     // 获取id="uname"的元素对象

     var Uname = document.getElementById("uname");

     var flag = null; // 给定时器添加一个标识符

     // 获取按钮对象

     var btn = document.getElementsByTagName("button")[0];

     // 给按钮添加单击事件

     btn.onclick = function(){

         if(btn.innerText=="开始"){

             btn.innerHTML="结束";

             // 添加多次定时器

             flag = setInterval(function(){

             var num = rand(0,arr.length-1); //随机获取数组的索引

             // 通过索引获取人名

             var uname = arr[num];

             // 将取出来的人名  写入到页面当中

             Uname.innerHTML=uname;

             },100)

         }else{

             btn.innerHTML="开始";

             // 清除多次定时器

             clearInterval(flag);

         }

     };

     // 封装一个随机函数

     function rand(n,m){

         return Math.floor(Math.random()*(m-n+1));

     }

 </script>

 </body>

页面最终显示如下图所示：

3.innerText( )和innerHTML( )之间的区别

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>Title</title>

 </head>

 <body>

 <p>余生<em>山海</em>远阔，愿你随心所向。</p>

 <script type="text/javascript">

     // 获取元素对象

     var cont = document.getElementsByTagName("p")[0];

     // 获取元素内容

     console.log(cont.innerText);

     console.log(cont.innerHTML);

 </script>

 </body>

 </html>

-------------------------------------------------------------------------------------------

innerText、innerHTML 向指定元素添加内容

innerHTML ：设置元素内容，包括标签和文本   一般用于修改元素对象，获取文本内容和标签

innerText：设置元素文本，只能设置文本  一般用于获取元素对象，只能获取到文本内容，

javascript随机点名--案例的更多相关文章

  1. javascript随机变色--案例

    1.打开网页,网页效果如图所示 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" ...

  2. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  3. js随机点名

    定时器案例. <!-- Author: XiaoWen Create a file: 2016-12-08 12:27:32 Last modified: 2016-12-08 12:51:59 ...

  4. js随机点名系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 随机点名可视化界面,记录迟到人员,转exe文件

    随机点名可视化界面,记录迟到人员,转exe文件 一.介绍 对于人员采取随机点名 二.代码 import datetime import random from tkinter import * fro ...

  6. 原生JS实现简易随机点名功能

    定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...

  7. javascript随机将第一个dom中的图片添加到第二个div中去

    javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. <!DOCTYPE html P ...

  8. 随机总数字里面选取随机数字进行随机排序案例(JAVA实现)

    随机总数字里面选取随机数字进行随机排序案例,案例如下: 代码code: package com.sec; import java.util.Arrays; import java.util.Scann ...

  9. 抖音爆火的随机点名Java实现原理，没有连接数据库

    抖音爆火的随机点名Java实现原理,没有连接数据库 import java.util.Random; public class Array{ public static void main(Strin ...

随机推荐

  1. hdu 2767 Proving Equivalences（tarjan缩点）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2767 题意:问最少加多少边可以让所有点都相互连通. 题解:如果强连通分量就1个直接输出0,否者输出入度 ...

  2. codeforces 799 C. Fountains（二分+思维）

    题目链接:http://codeforces.com/contest/799/problem/C 题意:要求造2座fountains,可以用钻石,也可以用硬币来造,但是能用的钻石有限,硬币也有限,问能 ...

  3. 简单粗暴详细讲解javascript实现函数柯里化与反柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...

  4. git拉取分支

    拉取仓库代码很简单,直接建立连接在pull下来就可以,如果想要拉取仓库中的某一个分支的话,则可能比较麻烦一点,下面简单介绍了一种拉取仓库分支的方法 1.先新建一个项目文件夹 2.git初始化git i ...

  5. Go语言标准库之strconv

    Go语言中strconv包实现了基本数据类型和其字符串表示的相互转换. strconv包 strconv包实现了基本数据类型与其字符串表示的转换,主要有以下常用函数: Atoi().Itia().pa ...

  6. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  7. numpy库使用总结

    numpy study 0x01:n维数组对象ndaarray 存放同类型元素的多维数组 0x02:numpy数据类型 numpy 的数值类型实际上是 dtype 对象的实例,并对应唯一的字符,包括 ...

  8. 自己制作一个简单的操作系统二[CherryOS]

    自己制作一个简单的操作系统二[CherryOS] 我的上一篇博客 自己制作一个简单的操作系统一[环境搭建], 详细介绍了制作所需的前期准备工作 一. 一点说明 这个操作系统只是第一步, 仅仅是开机显示 ...

  9. Http协议基础内容

    1.Http协议是什么协议? 客户端和服务器之间的数据传输的格式规范,简称"超文本传输协议". 2.什么是Http协议无状态协议?怎么解决Http协议无状态协议? 1)无状态协议对 ...

  10. 基于API和SQL的基本操作【DataFrame】

    写在前面: 当得到一个DataFrame对象之后,可以使用对象提供的各种API方法进行直接调用,进行数据的处理. // =====基于dataframe的API=======之后的就都是DataFra ...