HTML部分:

     <div class="div">
<div id="div"> </div>
</div>

  CSS样式部分:

*{margin:; padding:;}
.div{width:100%;height:636px;background: linear-gradient(to top, #333 0%, #fff 100%);}
#div{box-sizing: border-box;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-100%);font-family: STXingkai;font-size: 50PX;}

  JS部分:

         function biao(){
var div = document.getElementById("div");
var dt = new Date(); //获取当前系统时间
var year = dt.getFullYear(); //获取年
var month = dt.getMonth()+1; //获取月
var ri = dt.getUTCDate();   //获取日
var hours = dt.getHours();  //获取时
var min = dt.getMinutes();  //获取分
var sec = dt.getSeconds();  //获取秒
var day = dt.getDay();    //获取星期几,返回的是数字,不是一二三这种中文,
var arr = ["一","二","三","四","五","六","日"] //将星期返回的数字转换成中文的一二三四
div.innerHTML=year+"年"+month+"月"+ri+"日"+hours+"时"+"<br />"+min+"分"+sec+"秒"+"星期:"+arr[day-1];
}
setInterval("biao()",1000); //setInterval定时器:第一个值为biao()这个方法,第二个值为多少秒执行一次。

最终效果:

  

  

JS动态获取当前时间的更多相关文章

  1. Titanium系列--利用js动态获取当前时间

    动态获取时间: //显示时间 function getDateTime() { var now = new Date(); var year = now.getFullYear(); var mont ...

  2. js动态获取当前时间(年、月、日、上午/下午、时、分、秒)

    //获取动态时间function mytime() { var mydate = new Date(); var year = mydate.getFullYear(); var month = my ...

  3. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  4. js实现获取当前时间是本月第几周和年的第几周的方法

    js实现获取当前时间是本月第几周和年的第几周的方法 获取本月第几周的方法: var getMonthWeek = function (a, b, c) { /** * a = d = 当前日期 * b ...

  5. js动态获取浏览器或页面等容器的宽高

    首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...

  6. js实现获取当前时间是本月第几周的方法

    这篇文章主要介绍了js实现获取当前时间是本月第几周的方法,涉及javascript针对日期及时间的相关操作技巧,非常简单实用,需要的朋友可以参考下. 本文实例讲述了js实现获取当前时间是本月第几周的方 ...

  7. JS简单获取当前日期时间的方法(yyyy-MM-dd hh:mm:ss)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. jsp页面动态获取系统时间

    最近在做练习时碰到了这样一个问题:"读者选择查询图书相应信息,跳转到书目的详细信息界面,当可借阅数量大于零,点击借阅按钮,提示用户借阅成功,并显示归还日期(三个月),否则提示用户该书可借阅数 ...

  9. js动态获取子复选项并设计全选及提交

    在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台 本章将讲述如何通过js控制实现该操作: 1:设计父类别为radio,为每一个radio都加 ...

随机推荐

  1. yum部署、使用 zabbix监控 - 详细过程

    yum部署zabbix监控 第1章 yum部署zabbix服务端... 1 1.1 命令行部署... 1 1.1.1 yum源配置-解释... 2 1.1.2 MariaDB 与 mysql 3 1. ...

  2. centos7.4 搭建zabbix-server 3.4.5

    监控对服务器的重要性来说已经不需要我来一一赘述了,在众多的监控工具之中选择使用zabbix的原因是觉得它功能强大,可以引用的模板有很多,而且图形化做的草鸡棒. 废话就不多了,直接吃鸡. 本次搭建全部采 ...

  3. Kotlin——从无到有系列教程(5): 你该知道的Kotlin可空类型、空安全(null)、类型转换等特性

    在我们熟知的Java中,定义一个变量可以默认不赋值,因为Java的系统会给我们默认赋一个默认值,并且Java可定义一个赋值为null的变量,这样在使用这个变量的时候都会去显示判断该变量是否为null. ...

  4. js 抓取屏幕宽度设置字体大小 rem

    var doc = window.document var docEl = doc.documentElement var tid function refreshRem () { var width ...

  5. 纯CSS3模拟星体旋转效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Java集合系列[2]----LinkedList源码分析

    上篇我们分析了ArrayList的底层实现,知道了ArrayList底层是基于数组实现的,因此具有查找修改快而插入删除慢的特点.本篇介绍的LinkedList是List接口的另一种实现,它的底层是基于 ...

  7. mysql数据库快速入门(1)

    1.数据库操作 1.1.连接mysql服务器 mysql -u root( 用户名 ) -p 1.2.退出mysql命令提示窗 exit 1.3.查看版本 SELECT VERSION(); 1.4. ...

  8. springboot开启access_log日志输出

    由于在调试时需要查看access_log日志,但是springboot默认并没有开启,因此查看了一下文档,在springboot的配置文件中添加如下设置,即可将日志输出当磁盘文件中以供查看. #日志开 ...

  9. JavaScript基础知识(数据类型及转换、运算符)

    9.数据类型 概念:表示当前存储的数据的分类(表示数字 - 整数和小数) u  原始类型(原始值) -----[typeof运算符:判断变量的原始类型] *number(数字):表示数字        ...

  10. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](二)

    前言: 在本系列第一篇<一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](一)>中,我为大家介绍了搭建空白解决方案以 ...