HTML 加载当前系统时间

最新推荐文章于 2024-04-29 10:35:43 发布
最新推荐文章于 2024-04-29 10:35:43 发布
阅读量1k 收藏 1
点赞数
原文链接：http://www.cnblogs.com/notfound/articles/8448652.html
版权

　　

　　以下为网络收集到的 HTML 加载系统当前实时时间的HTML代码，都试试看看效果咯，笔者只是加入了一些小改动。应用时根据自己的实际情况进行更改...

 　　静态时间:

<!DOCTYPE html>
<html>
    <head>
        <meta content="Author" name="notfound945">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Now Time</title>
        <script type="text/javascript">
            var myDate = new Date();
            document.write(myDate.toLocaleString())
        </script>
    </head>
        <body>
        </body>
</html>

 

　　动态实时时间:

<!DOCTYPE html>
<html>
    <head>
        <meta content="Author" name="notfound945">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Now Time</title>
        <style>
            #frame {
                height: 120px;
                width: 365px;
                margin: 200px auto -10px;
                border-radius: 25px 0 25px 0;
                background-color: #e17724
            }
            #nowdate {
                height: 100%;
                width: 380px;
                margin: -80px auto;
                font-size: 35px;
                color: white;
                text-align: center;
                box-shadow: 5px 5px #e17700;
                background-color: #d2e100;
            }
        </style>
        <script>
            function mytime(){
                var a = new Date();
                var b = a.toLocaleTimeString();
                var c = a.toLocaleDateString();
                document.getElementById("nowdate").innerHTML = c+"&nbsp"+b;
            }
            setInterval(function() {mytime()},10);
        </script>
    </head>
    <body>
    <div id="frame"></div>
        <div id="nowdate"></div>
    </body>
</html>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta content="Author" name="notfound945">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Now Time</title>
        <style>
            #frame {
                height: 120px;
                width: 365px;
                margin: 200px auto -10px;
                border-radius: 25px 0 25px 0;
                background-color: #e17724
            }

            #nowdate {
                height: 100%;
                width: 380px;
                margin: -105px auto;
                font-size: 35px;
                color: white;
                text-align: center;
                box-shadow: 5px 5px #e17700;
                background-color: #d2e100;
            }
        </style>
        <script>
            setInterval("nowdate.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
        </script>
    </head>
        <body>
            <div id="frame"></div>
            <div id="nowdate"></div>
        </body>
</html>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta content="Author" name="notfound945">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Now Time</title>
        <style>
            #frame {
                height: 120px;
                width: 365px;
                margin: 200px auto -10px;
                border-radius: 25px 0 25px 0;
                background-color: #e17724
            }
            #Nowtime {
                height: 100%;
                width: 380px;
                margin: -105px auto;
                font-size: 35px;
                color: white;
                text-align: center;
                box-shadow: 5px 5px #e17700;
                background-color: #d2e100;
            }
        </style>
        <script type="text/javascript">
            function show() {
                var date = new Date(); //日期对象
                var now = "此刻是";
                now = now + date.getFullYear() + "年";
                now = now + (date.getMonth() + 1) + "月"; //取月的时候取的是当前月-1如果想取当前月+1就可以了
                now = now + date.getDate() + "日 ";
                now = now + date.getHours() + "时";
                now = now + date.getMinutes() + "分";
                now = now + date.getSeconds() + "秒";
                document.getElementById("Nowtime").innerHTML = now; //div的html是now这个字符串
                setTimeout("show()", 1000); //设置过1000毫秒就是1秒，调用show方法
            }
        </script>
    </head>
    <body onload="show()"> <!-- 网页加载时只需调用一次 以后就自动调用了-->
    <div id="frame"></div>
        <div id="Nowtime"></div>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta content="Author" name="notfound945">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Now Time</title>
        <style>
            #frame {
                height: 120px;
                width: 365px;
                margin: 200px auto -10px;
                border-radius: 25px 0 25px 0;
                background-color: #e17724
            }
            #nowdate {
                height: 100%;
                width: 380px;
                margin: -105px auto;
                font-size: 35px;
                color: white;
                text-align: center;
                box-shadow: 5px 5px #e17700;
                background-color: #d2e100;
            }
        </style>
        <script type="text/javascript">
            function getTime() {
                var dateObj = new Date();
                var year = dateObj.getFullYear();//年
                var month = dateObj.getMonth()+1;//月  (注意：月份+1)
                var date = dateObj.getDate();//日
                var day = dateObj.getDay();
                var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
                var week = weeks[day];//根据day值，获取星期数组中的星期数。
                var hours = dateObj.getHours();//小时
                var minutes = dateObj.getMinutes();//分钟
                var seconds = dateObj.getSeconds();//秒
                if(month<10){
                    month = "0"+month;
                }
                if(date<10){
                    date = "0"+date;
                }
                if(hours<10){
                    hours = "0"+hours;
                }
                if(minutes<10){
                    minutes = "0"+minutes;
                }
                if(seconds<10){
                    seconds = "0"+seconds;
                }
                var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"&nbsp &nbsp"+week;
                document.getElementById("nowdate").innerHTML = "此刻是" + newDate;//在div中写入时间
                setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
            }
        </script>
    </head>
    <body onload="getTime()">
    <div id="frame"></div>
        <div id="nowdate"></div>
    </body>
</html>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta content="Author" name="notfound945">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Now Time</title>
        <style>
            #frame {
                height: 120px;
                width: 365px;
                margin: 200px auto -10px;
                border-radius: 25px 0 25px 0;
                background-color: #e17724
            }
    
            #nowdate {
                height: 100%;
                width: 380px;
                margin: -105px auto;
                font-size: 35px;
                color: white;
                text-align: center;
                box-shadow: 5px 5px #e17700;
                background-color: #d2e100;
            }
        </style>
        <script>
            function fun() {
        var date = new Date();  //创建对象
                var y = date.getFullYear();     //获取年份
                var m = date.getMonth() + 1;   //获取月份  返回0-11
                var d = date.getDate(); // 获取日
                var w = date.getDay();   //获取星期几  返回0-6   (0=星期天)
                var ww = ' 星期' + '日一二三四五六'.charAt(new Date().getDay());//星期几
                var h = date.getHours();  //时
                var minute = date.getMinutes()  //分
                var s = date.getSeconds(); //秒
                var sss = date.getMilliseconds(); //毫秒
                if (m < 10) {
                    m = "0" + m;
                }
                if (d < 10) {
                    d = "0" + d;
                }
                if (h < 10) {
                    h = "0" + h;
                }
                if (minute < 10) {
                    minute = "0" + minute;
                }
                if (s < 10) {
                    s = "0" + s;
                }
                if (sss < 10) {
                    sss = "00" + sss;
                } 
　　　　　　　　　else if (sss < 100) {
                    sss = "0" + sss;
                }
                document.getElementById("nowdate").innerHTML = y + "-" + m + "-" + d + "   " + h + ":" + minute + ":" + s + "." + sss + "  " + ww;
                setTimeout("fun()",1);//1 ms更新一次
            }
        </script>
    </head>
        <body onload="fun()">
            <div id="frame"></div>
            <div id="nowdate"></div>
        </body>
</html>

 

转载于:https://www.cnblogs.com/notfound/articles/8448652.html

weixin_30631587
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript利用Date()格式化转换年月日时分秒
David的博客
09-13 6348
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
C#中动态显示当前系统时间的实例方法
01-01
各位亲们可以尝试以下代码： ...网页中动态的显示系统日期时间</title> [removed] function startTime() { var today = new Date(); //定义日期对象 var yyyy = today.getFullYear(); //通过日期对象的get
html静态系统时间实时更新
04-19
静态系统时间实时输出页面
在HTML中使用JavaScript实时显示当前日期和时间（结尾完整例程）
最新发布
weixin_67244432的博客
04-29 2033
在Web开发中，经常需要在网页上显示当前的日期和时间。HTML本身并不具备这样的动态功能，但我们可以借助JavaScript来实现。JavaScript是一种常用的前端脚本语言，它可以轻松地获取系统时间，并将其插入到HTML元素中。现在，当您打开这个HTML页面时，它将实时显示当前的日期和时间，并且每秒都会自动更新。的JavaScript文件，并编写用于获取和格式化当前日期时间的函数。首先，我们创建一个HTML文件，并在其中添加一个用于显示日期和时间的。函数，以便实时更新显示的日期时间。
html页面加当前时间,html页面当前时间显示
weixin_28872105的博客
06-03 1323
clock.jsfunctionClock(){vardate=newDate();this.year=date.getFullYear();this.month=date.getMonth()+1;this.date=date.getDate();this.day=newArray("星期日","星期一","星期二","星期三","星期四","星期五"...
怎么在html中写当前时间,当前时间（Javascript）在HTML
weixin_35737757的博客
05-31 738
尽量减不想要分钟......setInterval(function() {// Create a newDate() object and extract the minutes of the current time on the visitor'svar minutes = new Date().getMinutes();minutes = minutes - 5; // here you ...
获取进入html页面的时间,HTML页面获取当前电脑时间
weixin_30205357的博客
06-03 640
function getCurDate(){var d = new Date();var week;switch (d.getDay()){case 1: week="星期一"; break;case 2: week="星期二"; break;case 3: week="星期三"; break;case 4: week="星期四"; break;case 5: week="星期五"; break;...
基于javascript实现动态显示当前系统时间
11-26
本文实例讲解了javascript实现动态显示当前系统时间的详细代码，具体内容如下 （1）时间日期信息，应该在一个中来显示 （2）定时器：每隔一秒再次访问系统时间，window对象的setTimeout() （3）时钟显示的时机...
利用线程实现动态显示系统时间
09-03
编写Applet小程序，通过在HTML文档中接收参数，显示当前的系统时间，需要的朋友可以参考下
Type-Clock:使用单词而不是数字显示当前系统时间的时钟
07-04
时钟使用单词而不是数字来显示当前系统时间。 使用的图书馆和资源 jQuery 描述 使用 Javascript Date 对象可视化当前系统时间。 根据时间，将呈现为： 在“修正视图”中，会为六个类别之一显示颜色编码的地图： ...
基于Java电影购票管理系统开题报告
08-27
系统使用了spring、springMVC、mybatis等后端技术，前端使用了eclipse和VSCode等开发工具，数据库采用MySQL，前端使用FreeMarker开发语言，HTML、CSS、JavaScript等。 系统的主要模块包括： 1. 后台功能模块： * ...
html查看加载时间,我需要找到一种方法，让我的代码给页面加载时间，然后抓取HTML代码...
weixin_42361796的博客
06-05 339
您可以使用time.sleep()等待页面显式加载，这可能会得到您想要的最终结果。但是，这并不是最佳实践，可能会导致等待的时间超过加载页面所需的时间。你知道吗我建议改用Selenium，它有许多与此相关的有用特性；特别是它可以隐式地等待。你知道吗下面是如何使用Selenium等待计数器加载，而不再等待。你知道吗from selenium import webdriverfrom selenium....
怎么在html中加入日期,如何在网页中加入当前时间的代码
weixin_39588252的博客
06-03 2939
在需要显示时间的地方加入：或者将id="cod"加入到其他标签中最后在网页中加入以下代码即可。functionfndate(){varoDiv=document.getElementById("cod");vardate=newDate();varyear=date.getFullYear();//当前年份varmonth=date.getMonth();//当前月份vardata=...
html 页面显示打开时间,HTML 打开页面动态显示当前系统时间
weixin_39647499的博客
06-07 369
匿名用户1级2014-03-04 回答你的代码问题是：你用的是onclick事件/*var div1=document.getElementById('div1');div1.onclick=letstart;*/当点击div1 时才会加载时间我把这个注释掉了改成页面加载 就调用这个函数 letstart();下面是我修改的 你可以看下<html><head><scr...
php html 当前日期,js+html获取系统当前时间
weixin_29864831的博客
03-11 374
本文教程比较基础，适合初学者增强基础。本文实例为大家分享了html获取系统当前时间的具体代码，供大家参考，具体内容如下。TD {FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}function tick() {var years,months,days,hours, minute...
HTML获取系统当前时间
Mr_GLY_di的博客
12-15 1万+
<html> <head> <STYLE> TD { FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } </STYLE> <SCRIPT language=JavaScript> function tick() { var years,months,days,hours, min
js获取当前时间年月日在HTML页面显示,实时获取当前时间并展示在页面上
weixin_30220993的博客
06-03 2473
简介实时获取当前时间并展示在页面上，是很多地方常用的；在页面中做此展示以便查看时间。本文使用js通过一个小的demo实现效果。完整Code实时展示当前时间#time {width: 60%;padding: 10px;border-radius: 6px;background-color: lightcoral;color: white;}#time1 {width: 60%;padding: 1...
【HTML】获取当前时间并显示在网页上
热门推荐
点滴记忆
12-01 1万+
首先在页面中我们直接写一个标签，然后给标签定义一个id， 这里我们用什么标签都可以，我们就用<span></span>演示吧， 代码如下： <span id="clock" ></span> <script type="text/javascript"> var clock = new Clock(); ...
html获取系统时间
10-13
可以使用JavaScript获取系统时间，然后将其显示在HTML页面上。具体代码如下： ```html <!DOCTYPE html> <html> <head> <title>获取系统时间</title> <script type="text/javascript"> function showTime(){ var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); document.getElementById("time").innerHTML = year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second; } setInterval(showTime,1000); </script> </head> <body> <p id="time"></p> </body> </html> ``` 这段代码会在页面上显示当前的系统时间，并且每隔1秒钟更新一次。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值