Learning JS ten days, wrote the first little useful procedures, published articles to commemorate, there are some good piano music, dedicated to everyone. Random roll call, my first little program.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #fffaf0; } .box { position: relative; overflow: hidden; width: 800px; margin: 10px auto; } h2 { position: absolute; left: 50%; transform: translateX(-50%); width: 200px; text-align: center; font-size: 24px; font-weight: 400; } button { position: absolute; top: 10px; right: 30px; width: 50px; height: 30px; cursor: pointer; outline: none; border: 0; border-radius: 15px; color: #fff; background-color: green; } ul { margin-top: 30px; display: flex; justify-content: space-around; flex-wrap: wrap; align-content: center; width: 800px; height: 450px; } li { user-select: none; list-style: none; float: left; padding: 10px 15px; margin: 10px; border-radius: 20px; background-image: -webkit-linear-gradient(left top, #eee, #999); } li:hover { background-image: -webkit-linear-gradient(left top, #fff1eb, #ace0f9); color: #000; Background-image: -webkit-linear-gradient(left top, #243949, #517fa4); background-image: -webkit-linear-gradient(left top, #243949, #517fa4); color: #fff; } < / style > < / head > < body > < div class = "box" > < h2 > random named < / h2 > < button > start < / button > < ul > < li > Canon < / li > < li > kiss the rain < / li > < li > sky city < / li > < li > snow dream < / li > < li > pathetique < / li > < li > star < / li > < li > whispers < / li > < li > the sound of silence < / li > < li > tears of song < / li > < li > Croatian rhapsody < / li > < li > dream snow < / li > < li > the piano music of the night < / li > < li > wind residential streets < / li > < li > chrysanthemum kojiro summer < / li > < li > song from a secret garden < / li > < li > dream wedding < / li > < li > to Alice < / li > < li > the Turkish march < / li > The song of spring of < li > < / li > < li > summer fantasy < / li > < li > moonlight sonata < / li > < li > D major cannon < / li > < li > swan lake < / li > < li > serenade < / li > < li > pingsha fall wild goose < / li > < li > cuckoo waltz < / li > < li > flute concerto no. 1 < / li > < li > ode to joy < / li > < li > han palace foundation < / li > < li > Haydn serenade < / li > < li > romeo and Juliet < / li > < li > item Sally smile < / li > < li > to the water, o DiLiNa < / li > < li > spirited away < / li > < li > worm fly < / li > < li > in < / li > < li > two people's mood < / li > < li > sky city < / li > < li > initial dream < / li > < li > whispers < / li > < li > with you < / li > < li > mirror night < / li > < li > the nightingale < / li > < li > fireflies light < / li > < / ul > < / div > < / body > < script > / / 1 get elements let BTN = document.querySelector('button'); let list = document.querySelectorAll('li'); // Declare a timer variable let timer; Function getRandom(a, b) {return math.floor (math.random () * (b - a + 1)) + a; } // create a star() and repeat the function with setInterval(), Function star() {timer = setInterval(function () {// For (let I = 0; i < list.length; i++) { list[i].className = ''; } list[getRandom(0, list.length - 1)].className = 'bgc'; Function stop() {clearInterval(timer); function stop() {clearInterval(timer); Function () {btn.onclick = function () {if (btn.onclick = function () { If (this.innerhtml === 'start ') {if (this.innerhtml ===' start ') {if (this.innerhtml === 'start ') { this.style.backgroundColor = 'red'; This.innerhtml = 'end '; } else {// When you click start, the button can select whether to stop, click stop to call stop(), change the button value to start stop(); this.style.backgroundColor = ''; This.innerhtml = 'start '; } } </script> </html>Copy the code
Copy the code