用js在网页上显示一个钟表,用js在网页上显示一个钟表数字

发布时间：2023-12-08

用js在网页上显示一个钟表,用js在网页上显示一个钟表数字

更新： 2022-11-18 07:23

本文目录一览：

  1. 用JS实现钟表计时器功能
  2. [javascript,实现一个时钟,页面显示当前时间包括年月日时 分 秒 并设定一个时间点，当该](#javascript,实现一个时钟,页面显示当前时间包括年月日时 分 秒 并设定一个时间点，当该)
  3. JavaScript中的数字时钟的显示问题
  4. 怎么把js时钟放在网页侧边
  5. 如何使用JS实现一个简易数码时钟
  6. js做网页时钟，哪里错了

用JS实现钟表计时器功能

利用 new Date(); 可以轻松的实现钟表功能,甚至日历功能. 如果要实现计时器功能也可以用这个对象.

var c = 1000; // 一千微秒,就是一秒
function funBeginDisTime() {
    c = c + 1000; // 节奏为一秒
    var now = new Date(0,0,0,0,0,0,c);
    var day = now.getDate();
    var hour = now.getHours();
    var minutes = now.getMinutes();
    var sec = now.getSeconds();
    $("#myClock").html(day + "天"+ hour + "时" + minutes + "分" + sec + "秒");
    myTime = setTimeout("funBeginDisTime()", 1000); // 每一秒执行一次
}
function funStopDisTime() {
    clearTimeout(myTime);
}

HTML部分

<input id="Button2" type="button" value="开始" onclick="funBeginDisTime()"/>
<span id="myClock"></span>
<input id="Button1" type="button" value="暂停" onclick="funStopDisTime()"/>

setInterval() 是循环重复执行某个动作,
setTimeout()是只执行一次. 比如每五秒就通过AJAX向服务器发送一次请求.那么就可以用setInterval():

setInterval("reloadAction()", 5000);

function reloadAction() {
    $.ajax({
        "type":"POST",
        "url":"live.php",
        "data":"getData=live",
        "success":function(data) {
            // ....
        }
    });
}

javascript,实现一个时钟,页面显示当前时间包括年月日时 分 秒 并设定一个时间点，当该

HTML代码

<head>
    <title>Time</title>
</head>
<body>
    <div id="time"></div>
    <div id="alert"></div>
    <script type="text/javascript" charset="utf-8" async defer>
        var time = document.getElementById("time");
        showTime();
        function showTime() {
            // To get the date time
            var date = new Date();
            var year = date.getYear() + 1900;
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var min = date.getMinutes();
            var sec = date.getSeconds();
            var date_time = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec;
            time.innerHTML = date_time;
            // when the time is equal your condition, show the special words.
            if(date_time == "2014-6-25 11:45:20") {
                document.getElementById("alert").innerHTML = "It's time to display your words here.";
            }
        }
        // set the interval time
        setInterval(showTime, 1000);
    </script>
</body>

JavaScript中的数字时钟的显示问题

HTML代码

<head>
    <script language="JavaScript">
        function showTime() {
            var currentDate = new Date();
            var hours = currentDate.getHours();
            var minutes = currentDate.getMinutes();
            var seconds = currentDate.getSeconds();
            // 格式化输出
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            var currentTimeString = "<font color=blue>" + hours + ":" + minutes + ":" + seconds + "</font>";
            document.getElementById("show").innerHTML = currentTimeString; // 改这地方
            window.setTimeout("showTime()", 1000);
        }
    </script>
</head>
<body onload="showTime()">
    <span id="show"></span> <!-- 加这地方 -->
</body>

怎么把js时钟放在网页侧边

  1. 首先打开电脑。
  2. 其次在电脑主页找到并点击设置。
  3. 然后在设置中点击时钟设置。
  4. 最后将js时钟放到网页侧边即可。

如何使用JS实现一个简易数码时钟

设计思路：

数码时钟即通过图片数字来显示当前时间，需要显示的图片的URL根据时间变化而变化。 a. 获取当前时间Date()并将当前时间信息转换为一个6位的字符串;
b. 根据时间字符串每个位置对应的数字来更改图片的src的值，从而实现更换显示图片;

HTML结构

<div id="div1">
    <img src='./数字时钟（1）_files/0.jpg'/>
    <img src='./数字时钟（1）_files/0.jpg'/>
    <img src='./数字时钟（1）_files/0.jpg'/>
    <img src='./数字时钟（1）_files/0.jpg'/>
    <img src='./数字时钟（1）_files/0.jpg'/>
    <img src='./数字时钟（1）_files/0.jpg'/>
</div>

CSS样式

#div1{
    width:50%;
    margin:300px auto;
    background:black;
}

JavaScript代码

function twoDigitsStr(n) {
    if(n < 10) {
        return '0' + n;
    } else {
        return '' + n;
    }
}
window.onload = function() {
    var oDiv = document.getElementById('div1');
    var aImg = oDiv.getElementsByTagName('img');
    function tick() {
        var oDate = new Date();
        var str = twoDigitsStr(oDate.getHours()) + twoDigitsStr(oDate.getMinutes()) + twoDigitsStr(oDate.getSeconds());
        for(var i = 0; i < aImg.length; i++) {
            aImg[i].src = "./数字时钟（1）_files/" + str.charAt(i) + ".jpg";
        }
    }
    setInterval(tick, 1000);
    tick();
}

js做网页时钟，哪里错了

HTML代码

<head>
    <title>左侧</title>
</head>
<body>
    <table width="100%" height="100%" border="1">
        <tr width="100%" height="100%">
            <td border="1" bordercolor="red"></td>
            <td id="timeArea" align="right" valign="bottom"></td>
        </tr>
    </table>
    <script type="text/javascript">
        function start() {
            var now = new Date();
            var hr = now.getHours();
            var min = now.getMinutes();
            var sec = now.getSeconds();
            var clocktext = "现在时间：" + hr + ":" + min + ":" + sec;
            var timeTD = document.getElementById("timeArea"); // 获得时间字符串放置的单元格
            timeTD.innerText = clocktext; // 将时间字符串作为单元格的显示文本内容
            window.setTimeout("start()", 1000); // 将时间字符串作为单元格的显示文本内容
        }
        start(); // 亲试，这样就可以了
    </script>
</body>
</html>
推荐文章