本次分享JavaScript主要知识点涉及到for循环、if选择结构判断语句、数组的定义、定时器、清除定时器、日期对象的使用。

执行后效果图：

思路：

1.网页结构搭建： HTML

2.网页布局美化： CSS　　

3.随机功能实现:　JavaScript

分析后案例思路图：

编码工作：

Html代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>基于JavaScript的随机点名工具</title>

	</head>

	<body>

		  <h1>王者荣耀英雄随机点名系统</h1>

		  <span id="span"></span>

		  <div class="box" id="box"></div>

		  <input type="button" id="btn" value="点名"/>

	</body>

</html>

　　

Css代码：

 body{

           background-color: pink;/*整个网页的背景颜色*/

}

 h1{

      text-align: center;/*文本居中*/

}

 .box{

     width: 1000px;		/*大盒子宽度10000像素*/

      height: 240px;	/*大盒子高度240像素*/

      margin: 0 auto;	/*外边距：上下的外间距为0   水平(左右)间距 自动居中*/

      margin-top: 100px;/* 距离上方的外间距空出100像素*/

      clear: both;		/*清除浮动*/

}

 #btn{

  	  width: 100px;		/*按钮的宽度为100像素*/

      height: 30px;		/*按钮的高度为100像素*/

      margin-left: 600px;/*按钮距离左侧外边距为600像素*/

      margin-top: 50px;	/*按钮距离上方外边距为50像素*/

}

 .name{					/*name是子节点在js代码单独设置的类选择器*/

      width: 100px;		/*设置子节点盒子的宽度是100像素*/

      height: 30px;		/*设置子节点盒子的高度是30像素*/

      float: left;		/*设置子节点盒子的浮动为向左浮动*/

      background-color: antiquewhite;/*设置子节点盒子的背景颜色为“古董白”色*/

      margin-left: 10px;/*设置子节点盒子距离左侧外边距为10像素*/

      margin-top: 10px; /*设置子节点盒子距离上侧外边距为10像素*/

     text-align: center;/*设置子节点盒子中的文本字体为居中显示*/

      line-height: 30px;/*设置子节点盒子中的文本高度为30像素*/

}

 #span{					/*日期在单独的一行中显示，所以采用行内元素span*/

      float: right;		/*向左浮动*/

      position: relative;/*设置位置为：相对定位。*/

      top: 55px;		/*上方空出55显示*/

      right: 185px;		/*右侧空出185像素*/

}

　　

JavaScript代码：

  //1.创造虚拟后台数据

	      var arrs = ["鲁班七号","诸葛亮","后裔","赵云","女娲","小乔","不知火舞","大乔",

	          "韩信","亚瑟","孙尚香","孙悟空","孙膑","马可波罗","廉颇","扁鹊","白起","安琪拉"

	          ,"刘禅","张飞","妲己","甄姬","虞姬","项羽","庄周","黄忠","芈月","钟馗"

	          ,"刘邦","狄仁杰","王昭君","蔡文姬","花木兰","兰陵王","哪吒","姜子牙","武则天","关羽"

	          ,"周瑜","曹操","李白","阿珂","吕布","嬴政","刘备"];

  //2.获取父节点元素

      var boxNode = document.getElementById("box");

      //2.1循环遍历所有的数组中的元素，然后创建子节点元素

	     for (var i = 0; i < arrs.length; i++) {

	          //通过文档对象 创建新元素“div”小盒子，使用divNode子节点进行接收

	          var divNode = document.createElement("div");

	          //使用子节点divNode向页面中写入数组中的每一个元素的名字

	          divNode.innerHTML=arrs[i];

	          //使用子节点divNode 调用 css中的类选择器的name

	          divNode.className="name";

          //使用父节点进行追加子节点

          boxNode.appendChild(divNode);

	      }

  //3.点名

  		 // 使用文档对象通过id获取元素到btn

	      var btn= document.getElementById("btn");

	      // 当按钮btn被单击后触发匿名函数

	      btn.onclick = function () {

	      	// 如果 选择的值全等于“点名”二字 则执行下方代码

	         if(this.value==="点名"){

	                  //设置定时器：每过100毫秒、执行一次下方的setTimes函数 并使用 timeId进行接收定时后的结果

	              timeId=setInterval("setTimes()",100);

	              this.value="停止";//本次按钮的内容被赋值为停止

	          }else{//否则

	              //清除计时器

	              clearInterval(timeId);// 清除定时器（定时后的结果被清除）

	              this.value="点名";//本次按钮的内容被赋值为点名

	          }

	      }

	      // 设置定时器内容函数

	      function setTimes () {

	                      //遍历数组中的使用元素

	                 for (var j = 0; j < arrs.length; j++) {

	                 		//将父节点数组中的每一个元素的背景颜色清空

	                      boxNode.children[j].style.background="";

	                  }

	                  // 获取随机选中的结果

		                  //parseInt() 函数可解析一个字符串,并返回一个整数

		                  //Math.random()是数学函数中的随机某个数值（可整、可小数）

	                  var random = parseInt(Math.random()*arrs.length);

                  	//将父节点数组中的随机被选中元素的背景颜色设置为红/

	                  boxNode.children[random].style.background="red";

	              }

  //4.调用时间

  		 //使用文档对象通过id获取元素到span

	      var spanNode = document.getElementById("span");

	     //调用获取时间函数

	      getTime();

	      //设置定时器： 每过1秒执行一次  时间函数

	      setInterval(getTime , 1000);

	      // 定义 获取时间  函数

	      function getTime() {

	      	// 实例化对象： 创建日期对象

	          var day = new Date();

	          	//通过对象获取年月日时分秒

	          var year = day.getFullYear();

	          var month = day.getMonth()+1;

	          var dat = day.getDay();

	          var hours = day.getHours();

	          var minitues = day.getMinutes();

	          var second = day.getSeconds();

	          // 通过 span节点向页面拼接写入 年月日时分秒

	          spanNode.innerHTML =year+"-"+month+"-"+dat+" "+hours+":"+minitues+":"+second;

	     }

　　

 
作者： 杨校

出处： https://www.cnblogs.com/xiaoxiao5016

分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。

JavaScript的数组知识案例之随机点名器的更多相关文章

  1. Java案例：随机点名器

    案例介绍: 随机点名器,即在全班同学中随机的找出一名同学,打印这名同学的个人信息.需具备以下3个内容:1)存储所有同学姓名2)总览全班同学姓名3)随机点名其中一人,打印到控制台 案例需求分析: 全班同 ...

  2. java 用集合完成随机点名器和库存管理案例

    一 随机点名器 1.案例需求 随机点名器,即在全班同学中随机的找出一名同学,打印这名同学的个人信息. 我们来完成随机点名器,它具备以下3个内容: 存储所有同学姓名 总览全班同学姓名 随机点名其中一人, ...

  3. JAVA基础 随机点名器案例

    1.1      案例介绍 随机点名器,即在全班同学中随机的找出一名同学,打印这名同学的个人信息. 此案例在我们昨天课程学习中,已经介绍,现在我们要做的是对原有的案例进行升级,使用新的技术来实现. 我 ...

  4. JavaScript数组知识

    JavaScript数组知识 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. 第二章：javascript： 数组

    数组是编程世界里最常见的数据结构.任何一种编程语言都包含数组,只是形式稍微有差异.数组是编程语言中的内建类型,通常效率都很高.可以满足不同需求的数据存储,本章将探索javascript中的数组工作原理 ...

  6. javascript的基础知识及面向对象和原型属性

    自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; cons ...

  7. javascript常用数组算法总结

    1.数组去重 方法1: JavaScript //利用数组的indexOf方法 function unique (arr) { var result = []; for (var i = 0; i & ...

  8. javascript中数组的22种方法

    × 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结 前面的话 数组总共有22种方法 ...

  9. javascript中数组Array的方法

    一.常用方法(push,pop,unshift,shift,join)push pop栈方法,后进先出var a =[1,2,3];console.log(a.push(40)); //4 返回数组的 ...

随机推荐

  1. 开源视频平台：MediaCore（MediaDrop）

    MediaCore 是一个多媒体的建站系统,主要的功能包括视频.音频.YouTube集成.播客和 iTunes RSS 生成,用户可以提交各种多媒体内容. <开源中国>网站上说它是一个开源 ...

  2. Opencv学习笔记------Harris角点检测

    image算法测试iteratoralgorithmfeatures 原创文章,转载请注明出处:http://blog.csdn.net/crzy_sparrow/article/details/73 ...

  3. 02_JNI中Java代码调用C代码，Android中使用log库打印日志，javah命令的使用，Android.mk文件的编写，交叉编译

     1  编写以下案例(下面的三个按钮都调用了底层的C语言): 项目案例的代码结构如下: 2 编写DataProvider的代码: package com.example.ndkpassdata; ...

  4. GitHub前50名的Objective-C动画相关库相关推荐，请自行研究

    GitHub的Objective-C的动画UI库其实是最多的一部分,GitHub有相当一部分的动画大牛,如Jonathan George,Nick Lockwood,Kevin,Roman Efimo ...

  5. LeetCode之“树”：Binary Tree Preorder && Inorder && Postorder Traversal

    Binary Tree Preorder Traversal 题目链接 题目要求: Given a binary tree, return the preorder traversal of its ...

  6. Oracle Advanced Pricing White Papers

    Oracle Order Management - Version 11.5.10.0 and later Oracle Advanced Pricing - Version 11.5.10 and ...

  7. vs2010 matlab混合编程调用matlab引擎

    // matlab_engine.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "engine.h" ...

  8. 面向对象（this的问题二）

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  9. 初步认识thymeleaf:简单表达式和标签（一）

    初步认识Thymeleaf:简单表达式和标签.(一)   本文只适用于不会Java对HTML语言有基础的程序员们,是浏览了各大博客后收集整理,重新编辑的一篇文章,希望能对大家有所帮助.最后本文如果有哪 ...

  10. EMC Isilon(OneFS)误删文件数据恢复过程<存储数据恢复>

    [科普Isilon的存储结构] Isilon内部使用的是分布式文件系统OneFS.在Isilon存储集群里面每个节点均为单一OneFS文件系统,所以Isilon在支持横向扩展的同时并不会影响数据正常使 ...