1, 9x9 multiplication table
2, Guessing game
3, Running clock
4, The realization of countdown
5, Count down a day
6, Picture switching
1, 9x9 multiplication table
<style> table{ width:600px; border-collapse:collapse; } td{ border: 2px solid grey; } </style> <body> <table> <script type="text/javascript"> for(var i=0;i<10;i++){ document.write("<tr>"); for(j=1;j<10;j++) if(j<=i) document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>"); document.write("</tr>"); } </script> </table> </body
2, Guessing game
<script type="text/javascript"> var num = Math.floor(Math.random()*100+1);//Generate random integers between 1-100 do{ var guess =parseInt(prompt("Let's play the guessing game\n Please input 1-100 Integer between:","")); if(guess == num){ alert("Congratulations, you're right. The lucky numbers are:"+num); break; } else{ if(guess>num){ alert("You've got a big number"); go_on=confirm("Do you want to continue the game"); } else{ alert("Your guess is small"); go_on=confirm("Do you want to continue the game"); } } } while (go_on); alert("Thank you for playing"); </script>
3, Running clock
<style> #clock{ font-size: 30px; font-weight: 900; color: white; background-color: #930; border: 8px double #900; } </style> <body onLoad="disptime()"> <span id="clock"></span> <script type="text/javascript"> function disptime() { var time = new Date(); var year = time.getFullYear(); var month = time.getMonth(); var data = time.getDate(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); if(minute <10) minute="0"+minute; if(second<10) second="0"+second; document.getElementById("clock").innerHTML=year+"year"+month+"month"+data+"day "+hour+":"+minute+":"+second; var myTime = setTimeout("disptime()",1000); } </script> </body>
4, The realization of countdown
<style> #time{ height: 200px; background: url("image/6.jpg") no-repeat; padding: 70px 5px 5px 210px; color: green; font-size: 28px; } </style> <body> <div id="time"></div> <script type="text/javascript"> var time = document.getElementById('time'); var ks = new Date(); var msks = ks.getTime();//Change to milliseconds var js = msks+60*60*1000; function jsover() { var syfz=Math.floor((js-new Date().getTime())/(1000*60)); var sym=Math.floor((js-new Date().getTime()-syfz*1000*60)/(1000)); if(syfz<0) { time.innerHTML=""; clearInterval(timeID); } else time.innerHTML="It's time to finish the exam"+syfz+"branch"+sym+"second"; } timeID = setInterval("jsover()",1000) </script> </body>
5, Count down a day
<style> #date{ font-size: 25px; font-weight: bold; color:blue ; width: 400px; height: 400px; padding-top: 100px; background: url("image/7.jpg") no-repeat; } </style> <body> <div id="date"> </div> <script> var endtime = new Date("2020-6-7 00:00:00"); var s = "Today is June 7, 2020"; var nowtime= new Date(); var ile = endtime.getTime() -nowtime.getTime(); var dni = Math.floor(ile /(1000*60*60*24)); var datashow = document.getElementById("date"); if(dni>1) datashow.innerHTML=s+"Also"+dni+"day"; else if(dni ==0) document.innerHTML=s+"It's only one day"; else datashow.innerHTML=s+"It seems to have passed" </script> </body>
6, Picture switching
<style type="text/css"> #main{ width: 300px; padding: 20px; margin: 10px auto; background-color: deepskyblue; text-align: center; } #image{ display: block; width: 300px; height: 300px; margin: 50px auto; } </style> </head> <body> <div id="main"> <p id="info"></p> <img src="image/1.jpg" id="image"/> <button id="pre">Last one</button> <button id="next">Next piece</button> </div> <script type="text/javascript"> var pre=document.getElementById("pre"); var next=document.getElementById("next"); var imgArr=["image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg"]; var img=document.getElementsByTagName("img")[0]; var index=0; var info=document.getElementById("info"); function fun(){ info.innerHTML="In total "+ imgArr.length + " Zhang, this is the first "+(index+1)+" Zhang"; } fun(); pre.onclick=function(){ index--; if(index<0){ index=imgArr.length-1; } img.src=imgArr[index]; fun(); }; next.onclick=function(){ index++; if(index>imgArr.length-1){ index=0; } img.src=imgArr[index]; fun(); } </script> </body>
Updating
Avoid decadence Published 22 original articles, won praise 7, visited 939 Private letter follow