Case 1: click the button to disable the text box
<input type="button" value="Disable text box" id="btn" /> <input type="text" value="Textbox" id="txt" /> <script> document.getElementById("btn").onclick = function () { document.getElementById("txt").disabled = true; }; </script>
Case 2: click the button to modify the background color of the list
<input type="button" value="Discoloration" id="btn" /> <ul id="uu"> <li>Wang Lu</li> <li>Hai Yun fan</li> <li>Wen Bao</li> <li>Glazed Fairy</li> <li>Wang dance</li> </ul> <script> document.getElementById("btn").onclick = function () { document.getElementById("uu").style.backgroundColor = "pink"; }; </script>
Case 3: click hyperlink to pop up the dialog box, but block the default jump of hyperlink
First, execute the pop-up box and use return false to stop the event
<!--The first way to write:--> <a href="http://www.baidu.com" onclick="alert('Oh, I was ordered'); return false">Baidu 1</a> <!--The second way of writing--> <script> function f1() { alert("How beautiful!"); return false; } </script> <a href="http://www.baidu.com" onclick="return f1()">Baidu 2</a> <!--The third way of writing:--> <a href="http://www.baidu.com" id="ak">Baidu 3</a> <script> document.getElementById("ak").onclick = function () { alert("Quack"); return false; }; </script>
Case 4: click the small picture, and the large picture will be shown below
<a href="images/1.jpg" id="ak"> <img src="images/1-small.jpg" alt=""> </a> <img src="" alt="" id="big"> <script src="common.js"></script> <script> //Click hyperlink my$("ak").onclick = function () { //big Picture src Becomes the address of the current object href my$("big").src = this.href; return false; //Block default hyperlink flip }; </script>
Case 5: Beauty album
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style> </head> <body> <h2> //Beauty Gallery </h2> <ul id="imagegallery"> <li><a href="images/1.jpg" title="Beauty A"> <img src="images/1-small.jpg" width="100" alt="Beauty 1" /> </a></li> <li><a href="images/2.jpg" title="Beauty B"> <img src="images/2-small.jpg" width="100" alt="Beauty 2" /> </a></li> <li><a href="images/3.jpg" title="Beauty C"> <img src="images/3-small.jpg" width="100" alt="Beauty 3" /> </a></li> <li><a href="images/4.jpg" title="Beauty D"> <img src="images/4-small.jpg" width="100" alt="Beauty 4" /> </a></li> </ul> <div style="clear:both"></div> <!--Show large--> <img id="image" src="images/placeholder.png" alt="" width="450" /> <p id="des">Choose a picture</p> <script src="common.js"></script> <script> //from ul Get all the a Label var aObjs = my$("imagegallery").getElementsByTagName("a"); //Loop through all a Label for (var i = 0; i < aObjs.length; i++) { //For each a Tag registration click event aObjs[i].onclick = function () { //by id by image Labelling src assignment my$("image").src = this.href; //by p Label assignment my$("des").innerText = this.title; //Block hyperlink default jump return false; }; } </script> </body> </html>
Effect:
Case 6: List interlaced color change
During the practice, I found the bug for a long time due to the spelling error of background.... after I joined the console.log("ha ha") test, I roughly pointed out that there was an error in changing the background color.
<!-- Odd yellow and even green --> <input type="button" value="Interlacing discoloration" id="btn" /> <ul id="brandlist"> <li>Estee Lauder</li> <li>Lancome</li> <li>Keihl's</li> <li>La Mer</li> <li>L'OCCITANE</li> <li>Arden</li> </ul> <script src="common.js"></script> <script> // my$("btn").onclick = function () { // //Get all li Tags // var list = my$("brandlist").getElementsByTagName("li"); // for (var i = 0; i < list.length; i++) { // if (i % 2 == 0) { // list[i].style.backgroundColor = "yellow"; // } else { // list[i].style.backgroundColor = "green"; // } // } // }; //After optimization my$("btn").onclick = function () { var list = my$("brandlist").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { list[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green"; } }; </script>
Case 7: mouse crossing, display and hide QR code
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .nodeSmall { width: 50px; height: 50px; background: url(images/bgs.png) no-repeat -159px -51px; position: fixed; right: 10px; top: 40%; } .erweima { position: absolute; top: 0; left: -150px; } .nodeSmall a { display: block; width: 50px; height: 50px; } .hide { display: none; } .show { display: block; } </style> </head> <body> <div class="nodeSmall" id="node_small"> <a href="#"></a> <!--Anchoring--> <div class="erweima hide" id="er"> <img src="images/456.png" alt="" /> </div> </div> <script src="common.js"></script> <script> ////Get a label for mouse to enter var aObj = my$("node_small").getElementsByTagName("a")[0]; //by a Register mouse access aObj.onmouseover = function () { my$("er").className = "erweima show"; }; //by a Register mouse to leave aObj.onmouseout = function () { my$("er").className = "erweima hide"; }; </script> </body> </html>
Case 8: