效果格式：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. 三维数据曲面图 season绘图  panda绘图
			
    三维数据曲面图 season绘图 panda绘图 待办 enter description here 转化成网格坐标 season可以让绘图更美观 panda绘图可以直接根据panda数据绘制图直接p ...
    
			
    2. 
						
  2. testng实现代码和数据分层
			
    todo: 参考: https://www.cnblogs.com/znicy/p/6534893.html
    
			
    3. 
						
  3. C#中的@和$  占位符
			
    c#中@的三种用法: 1.忽略转移字符 string str = "C:\\windows\\system32"; string str = @"C:\windows\s ...
    
			
    4. 
						
  4. Tinyhttp源码分析
			
    简介 Tinyhttp是一个轻量型Http Server,使用C语言开发,全部代码只500多行,还包括一个简单Client. Tinyhttp程序的逻辑为:一个无线循环,一个请求,创建一个线程,之后线 ...
    
			
    5. 
						
  5. C++11 Lambda函数
			
    Lambda函数 C++11新增了lambda函数,其基本格式如下 [捕捉列表] (参数) mutable -> 返回值类型 {函数体} 说明 []是lambda的引出符,捕捉列表能够捕捉上下文 ...
    
			
    6. 
						
  6. EF三种数据库操作模型比较
			
    https://blog.csdn.net/xiongmeiqin/article/details/80196089 EF 中 Code First 的数据迁移以及创建视图 写在前面: EF 中 Co ...
    
			
    7. 
						
  7. SqlDataAdapter对象
			
    https://blog.csdn.net/qq_39657909/article/details/80615465 一.特点介绍 1.表示用于填充 DataSet 和更新 SQL Server 数据 ...
    
			
    8. 
						
  8. java.lang.OutOfMemoryError: GC overhead limit exceeded异常处理
			
    今天写程序遇到个之前从没遇到的异常-----java.lang.OutOfMemoryError: GC overhead limit exceeded,下面附上解决方法 异常: 解决方法: 鼠标右击 ...
    
			
    9. 
						
  9. 507，介绍一下标准的css盒子模型？低版本ie的盒子模型有什么不同的？
			
    有两种,IE盒子模型,另外是W3C盒子模型: 盒模型都包括:内容(content),填充(padding),边界(margin),边框(border): 区别:IE的content部分吧border和 ...
    
			
    10. 
						
  10. Codeforces Round #610 (Div. 2)E（模拟，DFS）
			
    先找到一条多边形的边,然后循环一圈输出多边形上的点.把每个三角形看作一个结点,以两个三角形之间公用边为边建立一张图,DFS输出叶子结点,则得到先切后切的顺序. #define HAVE_STRUCT_ ...
    
			
    11.