效果格式：2019 年 04 月 13 日 星期六 13 : 24 : 49
上面的类名有多余的  因为这是之前项目中的 方便以后使用  


<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>time</title>

    </head>

    <body>

         <div class="right-currentTime-logOut">

                <span class="year fontDigi"></span>

                 <span class="separator">年</span>

                 <span class="month fontDigi"></span>

                 <span class="separator ">月</span>

                 <span class="day fontDigi"></span>

                 <span class="separator ">日</span>

                 <span class="currentDay-week"></span>

                 <span class="hour fontDigi"></span>

                 <span class="separator">:</span>

                 <span class="minute fontDigi"></span>

                 <span class="separator">:</span>

                 <span class="second fontDigi"></span>

        </div>

        <script type="text/javascript">

            document.addEventListener('DOMContentLoaded', function () {

                var _years = document.querySelector('.year');

                var _months = document.querySelector('.month');

                var _days = document.querySelector('.day');

                var _week = document.querySelector('.currentDay-week');

                var _hours = document.querySelector('.hour');

                var _minutes = document.querySelector('.minute');

                var _seconds = document.querySelector('.second');

                function setText(){

                    var date = new Date();

                    var years = date.getFullYear(),

                        months =date.getMonth() + 1,

                        days = date.getDate();

                        weeks = date.getDay();

                    var hours = date.getHours(),

                        minutes = date.getMinutes();

                       seconds = date.getSeconds();

                    _years.innerHTML = years;

                    if(months < 10){

                        _months.innerHTML =String(0) + String(months);

                    }else{

                        _months.innerHTML =  months;

                    };

                    if(days < 10){

                        _days.innerHTML =String(0) + String(days);

                    }else{

                        _days.innerHTML = days;

                    };

                    if(weeks == 1){

                        _week.innerHTML = '星期一';

                    }else if(weeks == 2){

                        _week.innerHTML = '星期二';

                    }else if(weeks == 3){

                        _week.innerHTML = '星期三';

                    }else if(weeks == 4){

                        _week.innerHTML = '星期四';

                    }else if(weeks == 5){

                        _week.innerHTML = '星期五';

                    }else if(weeks == 6){

                        _week.innerHTML = '星期六';

                    }else{

                        _week.innerHTML = '星期日';

                    };

                    if(hours < 10){

                        _hours.innerHTML =String(0) + String(hours);

                    }else{

                        _hours.innerHTML = hours;

                    };

                    if(minutes < 10){

                        _minutes.innerHTML =String(0) + String(minutes);

                    }else{

                        _minutes.innerHTML = minutes;

                    };

                    if(seconds < 10){

                        _seconds.innerHTML =String(0) + String(seconds);

                    }else{

                        _seconds.innerHTML = seconds;

                    };

                }

                setText();
//定时器

                setInterval(function () {

                    setText();

                }, 1000);

            });

        </script>

    </body>

</html>




												


											
js HTML 年月日星期 时间的的更多相关文章
	

    
								
  1. js中获得当前时间是年份和月份
		
    js中获得当前时间是年份和月份,形如:201208       //获取完整的日期 var date=new Date; var year=date.getFullYear();  var month ...
    
		
    2. 
						
  2. js时间戳如何转时间
		
    js时间戳如何转时间 一.总结 一句话总结:Date对象分别获取年now.getFullYear()月now.getMonth()+1日now.getDate()即可 Date对象分别获取年now.g ...
    
		
    3. 
						
  3. JS实现年月日三级联动+省市区三级联动+国家省市三级联动
		
    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
    
		
    4. 
						
  4. js中如何对时间进行设置
		
    js中如何对时间进行设置 Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getF ...
    
		
    5. 
						
  5. js  获取当前的时间
		
    第一个小程序,用js获取当前的时间,,比较特殊的是 月是从0开始算的,显示的时候要加1,获取日用getDate(),获取周 getDay(), 直接上代码 <!DOCTYPE html>  ...
    
		
    6. 
						
  6. js如何实现一定时间后去执行一个函数
		
    js如何实现一定时间后去执行一个函数:在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的,这也就是一个定时器效果,恰好在js中就已经给定了这样的一个函数setTimeout(), ...
    
		
    7. 
						
  7. js得到规范的时间格式函数，并调用
		
    1.js得到规范的时间格式函数 Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1 ...
    
		
    8. 
						
  8. js实现获取当前时间是本月第几周和年的第几周的方法
		
    js实现获取当前时间是本月第几周和年的第几周的方法 获取本月第几周的方法: var getMonthWeek = function (a, b, c) { /** * a = d = 当前日期 * b ...
    
		
    9. 
						
  9. html文件在head标签中引入js地址和直接写js代码，所用时间是不同的，因为引入js地址，文件加载的时候需要通过通讯协议去解析地址，读取外部文件
		
    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件
    
		
    10. 
		

	


随机推荐
	

    
									
  1. js/jquery加入的select value显示不正确问题
			
    最近有需求,通过js添加select到表格中,虽然通过append加入的代码中select的value为2 但是实际显示出来的结果不对,百度之后没有找到答案,自己想了个办法 var selects = ...
    
			
    2. 
						
  2. 题解【2.23考试T2】str
			
    2. str [题目描述] 这是一道传统题,源代码的文件名为 str.cpp/c/pas. 构造 n 个 01 字符串 S1...Sn,使得对于任意 i≠j,Si 不是 Sj 的前缀.在最小化串长和的 ...
    
			
    3. 
						
  3. selenium的显示等待、隐式等待
			
    转载:https://www.cnblogs.com/mabingxue/p/10293296.html Selenium显示等待和隐式等待的区别1.selenium的显示等待原理:显示等待,就是明确 ...
    
			
    4. 
						
  4. 一些常用的js代码
			
    跳转 window.location.href= 刷新  location.reload()
    
			
    5. 
						
  5. 编程道拓扑bcd.top 0x01/ 开局第一篇： 随便聊聊/ 随笔
			
    0x01 开局 编程道拓扑(bcd.top)是一个前端从业者的思考和总结, 如果你喜欢, 欢迎关注! 作者是一个前端从业者, 本系列会总结作者在工作和学习中的一些思考, 会有具体的技术点, 也会有关于 ...
    
			
    6. 
						
  6. buuctf wireshark
			
    首先下载文件夹 然后用wireshark进行分析 然后发现啥也不会然后查一下资料https://www.jianshu.com/p/55ec409c739e 然后根据资料找了tcp然后根据解析做出此题 ...
    
			
    7. 
						
  7. Sass&Scss入门  选择器 混合器 导入 条件判断 迭代
			
    Sass 基于ruby的一种将脚本解析成CSS的脚本语言.也可以说是一种预处理语言. Sass在css的语法基础上增加了变量.嵌套.混合.继承.导入等高级功能. 使用Sass与Sass样式库(如com ...
    
			
    8. 
						
  8. VS2015生成代码图
			
    熟悉代码调用流程,可以在调试结束前显示代码图,操作位置: 比如开源的caffe_ocr的代码图:
    
			
    9. 
						
  9. 506，display有哪些值？说明他们的作用
			
    block:转换成块状元素 inline:装换成行内元素 none:设置元素不可见 inline-block:想行内元素那样显示,但是其内容像块类型元素一样显示 list-item:想块类型元素一样显 ...
    
			
    10. 
						
  10. 分析AppClassLoader,ExtClassLoader 和URLClassLoader 的关系
			
    测试代码: class Hello { public String str = "Hello World"; public void fun() { System.out.prin ...
    
			
    11.