JavaScript实现页面实时显示时间

今天尝试了一下JavaScript实现页面实时显示时间

运用了 setInterval() 函数

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式

setInterval("getTime()",1000); 以1000毫秒间隔调用函数有一个问题就是刚打开页面时的1s会不显示

为此我们可以在之前先调用一遍函数 getTime();

这样无论何时都能实时显示时间啦

.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS时间</title>

</head>
<body>

    <script src="aa.js"></script>

    <div id="getTime" style="float: left;
                             margin-left: 10px;
                             margin-top: 15px;
                             background-color: #aabbcc;">
        <p>
        <script>
            getTime();
            setInterval("getTime()",1000);
        </script>
        </p>

    </div>

</body>
</html>

.js代码如下

function getTime(){
    var Week, Weekday;
    var date =  new Date();

    Week = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    Weekday = date.getDay();

    year = date.getFullYear();
    month = date.getMonth() + 1;
    day = date.getDate();
    hours = date.getHours();
    minutes = date.getMinutes();
    seconds = date.getSeconds();

    document.getElementById("getTime").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + Week[Weekday];

};

效果如下

原文地址:https://www.cnblogs.com/s1eepDumling/p/11558730.html

时间: 2024-08-01 11:18:36

JavaScript实现页面实时显示时间的相关文章

js页面实时显示时间

1.通过getMonth()实现获取月份,从0开始计数,需要+1: 2.通过getDay()实现获取星期天数,从0开始,0表示星期日: 3.通过getDate()获取日期. 4.setTimeout(time1,1000);   1秒 5.在div中显示<div id="inn"></div>,使用.innerHTML实现赋值: 在使用<input id="inn" type="text" />,使用.valu

报表实时显示时间

报表,除了相对静态地展现汇总统计数据以及分布.趋势等数据内容外,也可以用于显示和时间相关的即时信息,包括实时显示时间.例如,下面这个设备监控应用统系中,首页除了显示实时监控数据外,还需要在右上角显示实时时间: 这种形式的"动态报表"其实在我们生活中也随处可见,最常见的就是火车站大屏幕上的列车时刻表,上面显示的当前时间,让旅客能够一目了然地知道自己的列车还有多长时间开,等待的列车什么时候到. 其实,要在报表中做到上面的效果很简单,基本思路就是让页面定时(比如每隔一秒钟)调用JS方法,在J

JavaScript 在页面上显示数字时钟

显示一个钟表 <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m) s=

javascript jsp页面动态显示系统时间 测试可用 多浏览器通过测试 (1)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

实时显示系统时间

1.概述 在浏览很多网站时,都会发现在网站中加入了显示当前系统时间的功能,在网页中显示当前系统时间,不仅可以方便浏览者掌握当前时间,而且还美化了网页. 2.技术要点 利用Date对象来实现.首先创建一个表示当前系统时间的Date()对象,然后通过Date对象的getXxx()方法获得当前系统时间的年.月.日.小时.分.秒和星期的值,接下来将获得的这些值组合成一个日期时间字符串,并将日期时间字符串设置成为<div>标签的内容,最后通过window对象的setTimeout()函数每隔1秒调用一个

JavaScript显示时间

JavaScript显示时间,时间还在走动着!不是一个静态的效果! 演示地址:http://www.ijavascript.cn/tools/jsdemo/320/time.htm function Time() 定义一个函数.www.120hrb.com { if (!document.layers&&!document.all) return 由于IE与Netscape对JavaScript的解释不同,造成浏览的效果不同,所以要分别写代码.这句话判断一下用户所使用的浏览器,如果两者都不

在JSP页面中显示动态时间

源地址:http://blog.csdn.net/aitcax/article/details/41285305 静态时间: 1.页面首部添加 <%@page import="java.util.Date"%> 2.页面body中需要显示时间的地方使用 <%= new Date().toString() %> 即可. -------另:页面添加刷新按钮------ <input type="button" onclick="j

js实时显示系统时间

刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>function clockon(contentDate){    var now = new Date();    var year = now.getYear();    var month = now.getMonth();    var date = now.getDate();    var day = now.

JavaScript的日期对象显示当前日期和时间

题目解析: 使用JavaScript的日期对象显示当前日期和时间,先用new Date()来定义一个时间oDate对象,再根据oDate对象来获取年月日和时分秒的值: var oDate=new Date();var oYear=oDate.getFullYear();获取当年的年份var oMonth=oDate.getMonth()+1;获取当月的月份var oDay=oDate.getDate();获取当日的日期var oHours=oDate.getHours();获取当天的小时var