One, random roll call training

1. Task Overview

In order to activate the atmosphere of the class, Mr. Zhang wants to randomly select students to answer questions through a random roll call, so you can use HTML+JavaScript to realize the random roll call as shown in the picture below.

  • The first image is the initial page of the random enumerator;
  • When clicking the start button, the JS program will randomly transform the list of people (array) ready before the jump display, the start button becomes the stop button, as shown in the second figure;
  • When the stop button is clicked, the random transformation of the name jumps to a stop, and the name displayed is the randomly clicked name, as shown in the third picture.

​

2. Task process

  • 1. Use HTML+CSS to create a random roll call page as shown above.
  • 2, embed JS code, define the random name array variable, and initialize the name information.
  • 3, add click event for start button, and write timer program, random display name information.
  • 4. Write the stop button event handler, terminate the timing program and display the random name information, and finally complete the output

3. Possible problems

  • 1. Extraction of random name information
  • 2, the use of timer function
  • 3. Start and stop switching operations

4. Task cues

Use of JavaScript, loops, randomness, and timer functions.

Manual: www.w3school.com.cn/js/index.as…

Learning video

5. Reference code

5.1 Operating Effect

​

5.2 Programming Roadmap

  1. Three div elements: Container (the largest box), Name (the selected name), and switch (the switch);
  2. Determine the current state of the roll call through flag;
  3. Through the changeState function, change the state, adjust the style of the switch button;

5.3 Reference Code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> #container{/* position: relative; /* Generates positioned elements relative to their normal positions */ left: 450px; top: 200px; /* Size */ width: 400px; height: 250px; /* background-color: RGB (230, 99, 51); border-radius: 10px; /* Box-shadow :5px 5px 3px grey; /* Shadow */} #name{/* position */ position: absolute; /* Generates an absolutely positioned element relative to the first parent element other than static positioned */ left: 50px; top: 80px; /* size */ width: 300px; height: 60px; /* background-color: #b9e9f0; border-radius: 10px; box-shadow:3px 3px 3px grey; /* background-color: RGB (255,255,255); /* background-color: RGB (255,255,255); /* text-align: center; /* Word-center */ word-height: 60px; /* Set the line height to the height of the outer elements of the text so that the text is vertically centered */ size: 30px; font-weight: bold; } #switch{/* position */ position: absolute; left: 175px; top: 185px; /* Size */ width: 50px; height: 25px; /* border-box */ background-color: green; border-radius: 5px; border-style: solid; border-width: 1px; border-color: blanchedalmond; box-shadow:1px 1px 3px gray; /* shadow */ /* text */ text-align: center; /* Height: 25px; /* height: 25px; Font-family: 'Times New Roman',Georgia,Serif; font-weight: bold; } </style> </head> <body> <div id="container" > <div id="name"> the caller </div> <div id="switch" onclick="changeState()"> Start < / div > < / div > < / body > < script > var list = [" mulan ", "kay," "Monkey King", "li bai", "zhang liang", "the doors"]. Var mytime = null; // timer var flag = 0; Var index = -1; var index = -1; Function changeState() {var button = document.getelementById ("switch"); if(flag == 0) { flag = 1; button.style.backgroundColor = 'red'; button.style.outlineStyle = 'solid'; button.style.outlineColor = 'blue'; button.style.outlineWidth = '2px'; Button.childnodes [0]. NodeValue = "pause "; var name = document.getElementById("name"); Mytime = setInterval(function(){// set timer effect index++; index = index % list.length; name.childNodes[0].nodeValue = list[index]; }, 100); }else{ flag = 0; clearTimeout(mytime); / / clearance of the timer button. Style. BackgroundColor = 'green'; button.style.outlineStyle = 'none'; Button.childnodes [0]. NodeValue = "start "; } } </script> </html>Copy the code

Second, the effect training of round seeding graph

1. Task Overview

As shown in the figure below, the goal of this training is to complete the effect of rotation in the homepage of JINGdong official website. Specific requirements:

  • Required every 3 seconds will automatically switch a picture, and so on according to a given number of pictures in turn switch playback.
  • When the mouse moves in, it will automatically pause the playback, and when the mouse moves out, it will continue.
  • There are two left and right buttons on both sides of the picture below. Click them to manually switch the product picture.
  • The lower left corner will display the corresponding gray dots according to the number of pictures. Click to display the corresponding picture and highlight the dots.

For details, please refer to www.jd.com/

​

2. Task process

  • Use HTML+CSS to layout the page as shown above.
  • Embed JS code, regular rotation display pictures.
  • Added mouse in and out events to complete the pause and continue rotation effect.
  • Add click events for left and right buttons to complete the display of picture effect of manual commodity rotation.
  • Complete the round dot rotation in the lower left corner of the product picture display

3. Possible problems

  • The use of timed events
  • Pause and resume the scrolling effect after the mouse moves in and out of the event
  • Switch from automatic to manual rotation effect.

4. Task cues

JavaScript language basics, mouse events, and use of timer functions.

Manual: www.w3school.com.cn/js/index.as…

Video: JavaScript event handling video series.

5. Reference code

Reference tutorial @ bilibili [from shallow to deep with your anatomy JS rotation diagram principle]

5.1 Operating Effect

​

5.2 Programming Roadmap

  1. A large div element represents the outermost box, and the middle is filled with images that match the size of the outer box.
  2. Images are arranged horizontally, but only one image is displayed at the same time, the rest of the images are hidden, and the other images are displayed by changing the margin-left;
  3. Through absolute positioning, design small dot general style;
  4. Design changeImg and changeIcon functions to represent the change of image and dot style after changing index;
  5. Design the show function to display images and ICONS;
  6. Through the doStart function control mouse moved out of the picture, automatic rotation of pictures and small dots;
  7. By adding onMouseover function locate to the dot, and passing in different indexes to achieve the binding of the dot and the picture;
  8. Use font ICONS to design the function of moving pictures left and right;

5.3 Reference Code

Tip: You need to configure the size, picture and font icon of the display box.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> *{padding: 0; margin: 0; list-style: none; /* Eliminate the origin of the list */ text-decoration: none; / / #container{width: 386px; height: 260px; left: 500px; top: 200px; overflow: hidden; */ border: 0.5px solid gray; /* Set the border to black */ position: relative; / / #imgList{width: 1930px; /* Height: 260px; } /* Single icon style */ #imgList li{float: left; /* Transition: opacity 300ms ease-in-out 0.5s; The transition - duration: 0.5 s; */ #iconList{position: absolute; /* width: 75px; /* Height: 10px; left: 20px; bottom: 10px; */ #iconList li{position: relative; float: left; margin-left: 5px; /* width: 10px; height: 10px; cursor: pointer; */ border-radius: 50%; /* Set to circle */ background-color:white; Opacity: 0.75; /* Transparency */ top: 2px; */ @font-face {font-family: 'fontello';} / @font-face {font: 'fontello'; src: url('./font/fontello.eot? 33765623 '); src: url('./font/fontello.eot? 33765623#iefix') format('embedded-opentype'), url('./font/fontello.woff? 33765623') format('woff'), url('./font/fontello.ttf? 33765623') format('truetype'), url('./font/fontello.svg? 33765623#fontello') format('svg'); font-weight: normal; font-style: normal; } /* Set the overall style of the font icon */. Icon {font-family: 'fontello'; color: white; */ #iconLeft{position: absolute; cursor: pointer; width: 20px; height: 30px; left: 0px; bottom: 125px; background-color:gray; Opacity: 0.5; border-top-right-radius: 20px; border-bottom-right-radius: 20px; line-height: 30px; /* align: left; /* align: left; */ #iconRight{position: absolute; cursor: pointer; width: 20px; height: 30px; right: 0px; bottom: 125px; background-color:gray; Opacity: 0.5; border-top-left-radius: 20px; border-bottom-left-radius: 20px; line-height: 30px; text-align: right; / * right * /} < / style > < / head > < body > < div id = "container" > <! <div class="icon" id="iconLeft" onclick="moveImg(-2)"></div> <! <div class="icon" id="iconRight" onclick="doStart()"></div> <ul id="imgList" onmouseover="doStop()" onmouseout="doStart()"> <li><a href=""><img src="./images/17.jpg" alt=""></a></li> <li><a href=""><img src="./images/18.jpg" alt=""></a></li> <li><a href=""><img src="./images/19.jpg" alt=""></a></li> <li><a href=""><img src="./images/20.jpg" alt=""></a></li> </ul> <ul id="iconList"> <li onmouseover="locate(0)"></li> <li onmouseover="locate(1)"></li> <li onmouseover="locate(2)"></li> <li onmouseover="locate(3)"></li> </ul> </div> <script> Var index = 0; Var imgs = document.getelementById ("imgList").getelementsByTagName ("li"); // Get the list of ICONS and set the style of the first selected icon var ICONS = document.getelementById ("iconList").getelementsbyTagName ("li"); // Set the timer. // start doStart(); Function show(){index = (index + imgs.length) % imgs.length; ChangeImg (); changeIcon(index) index++; Function doStart(){show(); function doStart(){show(); // Execute if(timer! = null){ clearInterval(timer); timer = null; } timer = setInterval(show,3000); } function doStop(){clearInterval(timer); // If you hover over the image and move away from it, the second image will be displayed immediately. Index = (index - 1 + imgs.length) % imgs.length; Function changeImg(){if(index == 0){function changeImg(){if(index == 0){ document.getElementById("imgList").style.marginLeft = "0px"; }else{ document.getElementById("imgList").style.marginLeft = -index * 386+"px"; Function changeIcon(x){for(var I = 0; i < imgs.length; I ++){if(I == x){ICONS [I].style.border="2px solid gray" [I].style.bordercolor ="rgba(128, 128, 128, 0.5)"; icons[i].style.top="0px"; }else{ICONS [I].style. Border ="none"; icons[i].style.top="2px"; Function locate(x){index = (x + imgs.length) % imgs.length; function locate(x){index = (x + imgs.length) % imgs.length; doStart(); } function moveImg(x){locate(index+x); } </script> </body> </html>Copy the code

Three, add

1, the use of font ICONS

For the relevant introduction, please refer to @& Goodbye Firefly & [04- Front-end technology _CSS and CSS3 beautification page] about font ICONS.

1) Go to fontello.com/ (other website optional), select the size and icon, and download:

​

2) What it looks like after downloading and decompressing:

​

3) put your project (HTML file) in the same directory :(the Demo below is my project file, not the example of the font icon)

​

4) Add the configuration to the HTML file:

First find the @font-face style of the sample HTML, add it to the project file, and add the icon style

​

​

Then, add the element where you want to insert the font icon and set the content to the encoding of the font icon :(find the encoding on the website, copy and paste it into the target location)

​

​

5) Take font icon as text, design style:

​

6) Demo effect:

​

The chapters are summarized here (the better we understand you guys ~ 3 ~), the better we understand you guys.

Have a question welcome to ask, everyone together in learning Java on the road to play strange upgrade! (O ゜ – ゜▽゜)

​