JavaScript array knowledge case of the random name register

Source: Internet
Author: User
Tags array definition define get setinterval javascript array

The main points of this sharing JavaScript are the use of a For loop, an if selection structure judgment statement, an array definition, a timer, a purge timer, and a Date object.

after execution:

Ideas:

1. Web structure: HTML

2. Web Page layout: CSS

3. Random function Implementation: JavaScript

post-analysis case diagram:

Coding work:

HTML code:

<! DOCTYPE html>

  

CSS code:

 body{background-color:pink;/* The background color of the entire Web page */} h1{text-align:center;/* Text Center */}. box{width:1000px;/* Large Box Width 10000 pixels */height:240px;/* large box height 240 pixels */margin:0 auto;/* margin: Upper and lower outer spacing is 0 horizontal (left/right) Spacing Auto Center */margin-top:100px;      /* Outside spacing above 100 pixels */clear:both;/* clear float */} #btn {width:100px;/* button width is 100 pixels */height:30px;/* button height is 100 pixels */      margin-left:600px;/* button distance to the left margin is 600 pixels */margin-top:50px;/* button distance above the margin is 50 pixels */}. Name{/*name is a class selector that is set separately by the child nodes in the JS code */ width:100px;/* setting child nodes the width of the box is 100 pixels */height:30px;/* Set child node The height of the box is 30 pixels */float:left;/* Set child node The float of the box floats to the left */Backgrou nd-color:antiquewhite;/* set child nodes the background color of the box is "antique white" color */margin-left:10px;/* Set child node box distance to the left margin is 10 pixels */margin-top:10px; /* Set child node box distance up to 10 pixels */text-align:center;/* Set child nodes the text font in the box is centered */line-height:30px;/* the text height in the child node box is 30 pixels */} #span The {/* date is displayed on a separate line, so the inline element span*/float:right;/* to the left */position:relative;/* set Position: relative positioning. */top:55px;/* above 55 display */right:185px;/* right blank 185 Megapixels */} 

  

JavaScript code:

  1. Create virtual backend data var arrs = ["Lu Class Seventh", "Zhuge Liang", "Descendants", "Zhao Yun", "Nu wa", "Little Joe", "Don't Know Fire Dance", "Big Joe", "Han Xin", "Arthur", "Sun Shangxiang", "Monkey King", "Sun Bin", "Marco Polo", " Lianpo "," Flat Magpie "," White Up "," Angela "," Liu Chan "," Zhang Fei "," Shing "," Yu "," Yuji "," Xiangyu "," Zhuang Zhou "," Jack Huang "," 芈 month "," Zhong Kui "," Liu Bang "," Dee "," Wang Zhaojun "," Cai Wenji "," Mulan "," Lan Ling  Wang "," Bloomer "," The Teeth "," Wu Zetian "," Guan Yu "," Zhou Yu "," Cao "," Li Bai "," Alexia "," Bo Bu "," win the government "," Liu Bei ";      2. Get the parent node element var boxnode = document.getElementById ("box"); 2.1 Loops through all the elements in the array and creates a child node element for (var i = 0; i < arrs.length; i++) {//Create new element "div" small box through Document object, using Divnode child node for          Receive var Divnode = document.createelement ("div");          Use the child node Divnode to write the name of each element in the array to the page divnode.innerhtml=arrs[i];          Use the child node Divnode to invoke the name divnode.classname= "Name" of the class selector in CSS;      Append child node Boxnode.appendchild (divnode) using parent node;      }//3. Call//Use the Document object to get the element through the ID to btn var btn= document.getelementbyid ("btn");            When the button btn is clicked, the anonymous function is triggered Btn.onclick = function () {//If the selected value is all equal to the ' name ' Word, execute the code below if (this.value=== "name") {      Set timer: Every 100 milliseconds, execute once below the Settimes function and use Timeid to receive timed results timeid=setinterval ("settimes ()", 100); This.value= "Stop";//the content of this button is assigned to stop}else{//otherwise//clear timer clearinterval (Timeid);//Clear Timer                      (The result after the timer is cleared) this.value= "roll name";//the contents of this button is assigned to a call name}}//Set timer content function Settimes () { Iterates through the array using elements for (var j = 0; J < Arrs.length; J + +) {//to each of the parent node arrays                  The background color of the element is emptied boxnode.children[j].style.background= ""; }//Get randomly selected results the//parseint () function resolves a string and returns an integer//math.random () that is random in the mathematical function                  A numeric value (integer, fractional) var random = parseint (Math.random () *arrs.length);              Sets the background color of randomly selected elements in the parent node array to red/boxnode.children[random].style.background= "red";    //4. Call time//Use Document object to get element through ID to span var spannode = document.getElementById ("span"); Call Get Time function getTime ();      Set Timer: Execute Time function setinterval every 1 seconds (getTime, 1000);          Define Get Time function GetTime () {//Instantiate object: Create Date object var day = new Date ();          Get year/month by object 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 ();     spannode.innerhtml =year+ "-" +month+ "-" +dat+ "" +hours+ ":" +minitues+ "by the span node to the page stitching on the day of the month: +second; }

  


Yang School

Source: https://www.cnblogs.com/xiaoxiao5016

Sharing is happy, but also witnessed the personal growth process, the article is mostly work experience summary and usually learn to accumulate, based on their own cognitive deficiencies are unavoidable, also please correct, common progress.

This article is copyrighted by the author, welcome reprint, but without the consent of the author must retain this paragraph statement, and in the article page obvious location, if there is a problem, can mail ([email protected]) Consulting.

JavaScript array knowledge case of the random name register

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.