获取当前时间显示在页面上并每秒刷新

<span id="clockTime"></span>
        <script>
            // 获取当前时间
        //jQuery
        function startTime() {
                var clockTime = document.getElementById("clockTime");
                var date = new Date();
                var year = date.getFullYear(); //当前年份
                var month = date.getMonth(); //当前月份
                var data = date.getDate(); //天
                var hours = date.getHours(); //小时
                var minute = date.getMinutes(); //分
                var second = date.getSeconds(); //秒
                var time = year + "-" + checkTime((month + 1)) + "-" + checkTime(data) + " " + checkTime(hours) + ":" + checkTime(minute) + ":" +                 checkTime(second);
                clockTime.innerHTML = time;
                setTimeout(‘startTime()‘, 1000); //每一秒中重新加载startTime()方法
            }
            startTime();
            //补位 当某个字段不是两位数时补0
            function checkTime(str) {
                var num;
                str > 10 ? num = str : num = "0" + str;
                return num;
            }

            //js

            function startTime() {
                var today = new Date(); //定义日期对象
                var yyyy = today.getFullYear(); //通过日期对象的getFullYear()方法返回年
                var MM = today.getMonth() + 1; //通过日期对象的getMonth()方法返回年
                var dd = today.getDate(); //通过日期对象的getDate()方法返回年
                var hh = today.getHours(); //通过日期对象的getHours方法返回小时
                var mm = today.getMinutes(); //通过日期对象的getMinutes方法返回分钟
                var ss = today.getSeconds(); //通过日期对象的getSeconds方法返回秒
                // 如果分钟或小时的值小于10,则在其值前加0,比如如果时间是下午3点20分9秒的话,则显示15:20:09 

                MM = checkTime(MM);
                dd = checkTime(dd);
                mm = checkTime(mm);
                ss = checkTime(ss);
                var day; //用于保存星期(getDay()方法得到星期编号)
                if (today.getDay() == 0) day = "星期日 "
                if (today.getDay() == 1) day = "星期一 "
                if (today.getDay() == 2) day = "星期二 "
                if (today.getDay() == 3) day = "星期三 "
                if (today.getDay() == 4) day = "星期四 "
                if (today.getDay() == 5) day = "星期五 "
                if (today.getDay() == 6) day = "星期六 "
                document.getElementById(‘clockTime‘).innerHTML = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + "  " + day;
                setTimeout(‘startTime()‘, 1000); //每一秒中重新加载startTime()方法
            }
            startTime();
            function checkTime(i) {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
        </script>

参考网址:https://www.jianshu.com/p/2fcd8230b903

原文地址:https://www.cnblogs.com/chenliuxiao/p/12148300.html

时间: 2024-10-11 10:35:48

获取当前时间显示在页面上并每秒刷新的相关文章

数据库日期时间显示在页面上格式错误的解决方案

做项目过程中肯定会碰到这样一个问题:在数据库中存的是date或datetime类型的值,从数据库里取出来遍历到页面上显示的是long类型或是GTM类型的日期时间.对于这个问题,经过研究之后有以下结论: 1.hibernate不会出现这样的问题,而mabatis则会出现这个问题. 2.数据库使用date类型的在页面上会显示long类型日期时间,使用datetime类型的在页面上会显示GTM类型日期时间. 因为我用的是mysql数据库,其他的数据库没测试过,所以也不知道其他数据库是怎样的情况,这里就

js获取当前时间显示在页面上

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js获取当前时间显示在页面上</title> <script> window.onload=function(){ //定时器每秒调用一次fnDate() setInterval(function(){ fnDate(); },1000); } //

JSP通过AJAX获取服务端的时间,在页面上自动更新

1.在页面上引入js <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Insert title here</title> <script src="../scripts/jquery.min.js" type="text/javascript">&l

使用WdatePicker时间插件限制页面上两个时间的前后范围

大多时候,开始时间&结束时间都是开始时间肯定不能大于结束时间,结束时间不能比开始时间还早吧,用WdatePicker插件选择时间的话可以很好的做好时间段的控制. 页面上的两个时间输入框: 开始时间: <input type="text" name="startDate" id="startDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" /> 结束时间:

MVC设计模式下实现数据库的连接,并获取所有数据到浏览器页面上显示

实现建立一个学生的java类:里面封装了属性的全部属性: public class Student { private int id; private String username; private String password; public Student() { super(); } public Student(int id, String username, String password) { super(); this.id = id; this.username = user

TextView采用setText赋值之后不能立即显示在页面上的问题解决

在处理比较复杂的逻辑的时候,有时候setText之后而且确实保证里面是有值的,但是也不能保证页面就一定能够显示出来该值!settext仅仅是赋值而已,真正界面上的改变还是得靠刷新动作拿到cpu时间来执行.  所以说呢,若想直接显示出该值,就得单独开辟一个线程来执行赋值操作,这样就会直接显示出来了.

jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中。

不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDictTypes() { var data = from a in dbo.DictTypes select new DictTypeListViewModel { ID = a.ID, Name = a.Name, LastChangeUser = a.LastChangeUser, LastCha

JSP读取Oracle数据库里的图片Blob字段并显示在页面上&lt;转&gt;

java代码:首先定义一个读取Oracle数据库的Blob字段并把字节写入一个输出流的方法. 1 public static void writeImg(OutputStream os) { 2 Connection con; 3 try { 4 con = ConnectionFactory.getConnection(); 5 Statement stmt = con.createStatement(); 6 ResultSet rs = stmt.executeQuery("select

获取当前时间(年/月/日/时/分/秒)

struct tm* GetCurTime(time_t inTime) { struct tm* curTime = localtime(&inTime); curTime->tm_year += 1900; curTime->tm_mon += 1; return curTime; }