本次分享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. 小白学习mysql之索引初步

    导语 索引在数据库中的地位是及其的重要,同时要想完全的掌握索引并不是一件容易的事,需要对数据的查询原理以及计算机操作系统有深刻的认识,当然相关的算法和数据结构也是必须的.因此,这篇文章感到了一些压力, ...

  2. 使用CSS禁止textarea调整大小功能的方法

    这篇文章主要介绍了使用CSS禁止textarea调整大小功能的方法,禁止可以调整textarea大小功能的方法很简单,使用CSS的resize属性即可,需要的朋友可以参考下 如果你使用谷歌浏览器或火狐 ...

  3. PCAP 文件内容解析命令

    针对网络接口.端口和协议的数据包截取.假定你要截取网络接口eth1,端口号6881的tcp数据包.数据文件保存为test.pcap. tcpdump -w test.pcap -i eth1 tcp ...

  4. 一篇搞定Python正则表达式

    1. 正则表达式语法 1.1 字符与字符类 1 特殊字符:\.^$?+*{}[]()| 以上特殊字符要想使用字面值,必须使用\进行转义 2 字符类    1. 包含在[]中的一个或者多个字符被称为字符 ...

  5. JQ删除数组中的某个对象

    ---恢复内容开始--- var pros = []; 全局变量function doSearchSal(){ var param = {}; var searchSal=$.trim($(" ...

  6. photoshop打开图片显示的是索引,无法编辑解决

    问题如图: 解决方法: 这是因为图像模式是索引颜色,具体为啥图片打开是索引模式我也不是很清楚(捂脸),改成RGB颜色即可修改了 图像=>模式=>RGB颜色 如图:

  7. electron 项目的搭建方式,借助 node 和 npm

    1,首先确定安装了 node 和 npm 2,创建一个文件夹,如 aa 3,CMD 命令进入到 aa,用 npm 命令初始化一个项目 4, npm -init 根据提示完成配置 5,安装 electr ...

  8. EF 求和 GroupBy多个字段

    GroupBy根据多个字段分组使用方式: 一.使用扩展方法 query.GroupBy(q => new { q.Year, q.Month }) .Select(q => new { Y ...

  9. Git 创建两个“本地分支”协同工作

    一 代码拉下来后,首先创建两个本地分之 $repo start master . //仅仅用于同步服务器的修改(此处master名字可以随意定,但是建议定成这样,好记忆) $repo start wo ...

  10. 李洪强iOS之集成极光推送三iOS集成指南

    李洪强iOS之集成极光推送三iOS集成指南 SDK说明 适用版本 本文匹配的 SDK版本:r2.1.5 以后.查看最近更新了解最新的SDK更新情况.使用Xcode 6及以上版本可以使用新版Push S ...