JavaScript作业2-CSDN博客

本文展示了如何使用JavaScript实现页面上实时显示当前时间，包括星期几，并提供暂停和启动功能。同时，还介绍了距离今年国庆节的倒计时功能。最后，文章提供了实现一个简易计算器的代码，包括加减乘除和清除等基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、页面中显示：当前的时间是 2022年7月11日 10:40:39 星期一
【页面中添加两个按钮，实现暂停启动】

<body>
<div id="msg"></div>
<input type="button" value="启动" onclick="qidong()">
<input type="button" value="暂停" onclick="zanting()">
</body>
<script>
    var weekday=new Array(7)
    weekday[0]="天";
    weekday[1]="一";
    weekday[2]="二";
    weekday[3]="三";
    weekday[4]="四";
    weekday[5]="五";
    weekday[6]="六";
    function getTime(){
        var date = new Date()
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        var week = new Date();
        var msg = document.getElementById("msg");
        msg.innerHTML = "<h1>当前时间是："+ year +"年"+ month + "月"+ day +
            "日 "+ hour +":"+ min +":"+ s + " " + "星期" + weekday[week.getDay()] +"</h1>";

    }
    var timer;
    function qidong(){
        timer = setInterval(getTime, 1000);
    }
    function zanting(){
        clearTimeout(timer);
    }
</script>

在这里插入图片描述

2、实现距离今年国庆的倒计时

<body>
<div id="msg"></div>
</body>
<script>
    function showTimes() {
        var last_times = new Date("2022-10-1").getTime();
        var date = new Date();
        var tiems = last_times - date.getTime();
        var day = tiems / 1000 / 60 / 60 / 24;
        var h = day % 1 * 24;
        var m = h % 1 * 60;
        var s = m % 1 * 60;
        document.getElementById("msg").innerHTML = "距离国庆节还有" + Math.floor(day) + "天：" + Math.floor(h) + "时：" + Math.floor(m) + "分：" + Math.floor(s) + "秒";
    }
    setInterval(showTimes,1000);
</script>

在这里插入图片描述

3、实现简易计算器，计算器页面美观，基本功能可以实现的【尝试】

<body>
<input type="text" name="content" style="width: 100px">
<table>
    <tr>
        <td><input type="button" value="1" onclick="fun(this);"></td>
        <td><input type="button" value="2" onclick="fun(this);"></td>
        <td><input type="button" value="3" onclick="fun(this);"></td>
        <td><input type="button" value="C" onclick="fun2();"></td>
    </tr>
    <tr>
        <td><input type="button" value="4" onclick="fun(this);"></td>
        <td><input type="button" value="5" onclick="fun(this);"></td>
        <td><input type="button" value="6" onclick="fun(this);"></td>
        <td><input type="button" value="←" onclick="fun3();"></td>
    </tr>
    <tr>
        <td><input type="button" value="7" onclick="fun(this);"></td>
        <td><input type="button" value="8" onclick="fun(this);"></td>
        <td><input type="button" value="9" onclick="fun(this);"></td>
        <td><input type="button" value="+" onclick="fun(this);"></td>
    </tr>
    <tr>
        <td><input type="button" value="(" onclick="fun(this);"></td>
        <td><input type="button" value="0" onclick="fun(this);"></td>
        <td><input type="button" value=")" onclick="fun(this);"></td>
        <td><input type="button" value="-" onclick="fun(this);"></td>
    </tr>
    <tr>
        <td><input type="button" value="*" onclick="fun(this);"></td>
        <td><input type="button" value="^" onclick="fun(this);"></td>
        <td><input type="button" value="/" onclick="fun(this);"></td>
        <td><input type="button" value="=" onclick="fun4();"></td>
    </tr>
</table>
</body>
<script>
function fun(ele){
    var btnnum = ele.value;
    var txtele = document.getElementsByName("content")[0];
    txtele.value = txtele.value + btnnum.trim();
}
function fun2() {
    document.getElementsByName("content")[0].value="";
}
function fun3() {
    var arr = new Array();;
    var txtele = document.getElementsByName("content")[0];
    var txt = txtele.value;
    for (var i=0;i<txt.length;i++ ){
        arr[i] = txt.substring(i,i+1)
    }
    arr.splice(txt.length-1,1);
    var arr1 = arr.join("");
    txtele.value = arr1;


}
function fun4(){
    var arr = new Array();
    var txtele = document.getElementsByName("content")[0];
    var txt = txtele.value;
    for (var i=0;i<txt.length;i++ ){
        arr[i] = txt.substring(i,i+1)
    }
    for(var i in arr){
        if (arr[i] == "^"){
            arr[i] = "**"
        }
    }
    var exp = arr.join("");
    var r = eval(exp);
    txtele.value = r;
}

</script>