JavaScript classic cases (9x9 multiplication table, guessing game, countdown, picture switching...)

Reading catalogue

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

Published 22 original articles, won praise 7, visited 939
Private letter follow

Tags: Javascript

Posted on Sat, 08 Feb 2020 11:10:30 -0500 by Pyro4816