效果格式：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. 请求响应状态status为canceled
			
    发出ajax请求之后 发现status状态是canceled 1. 和form冲突 我的提交代码是这样的 $.ajax({ //几个参数需要注意一下 type: "POST",// ...
    
			
    2. 
						
  2. 配置SSH使用密钥认证：实现免输入密码登陆
			
    一.实际工作生产场景分析 张三是某公司员工,由于业务上的需求,需要经常使用SSH工具登陆服务器A的root账户进行操作,为避免重复进行密码验证身份.现采用张山的公钥发送给服务器A,免输入密码登陆到服务 ...
    
			
    3. 
						
  3. Wordpress里提示警告信息creating default object from empty value in *** 的解决方法
			
    PHP里提示 Creating default object from empty value 的问题,一般是由于PHP版升级的原因,PHP 5.4 以上的版本一般会报这个错误.PHP的解决方法:找到 ...
    
			
    4. 
						
  4. 每天进步一点点------Xilinx FPGA开发工具 EDK SDK术语
			
    XPS:Xilinx Platform Studio,平台工作室.用于嵌入式处理器硬件部分的开发. SDK:Software Development Kit,软件开发套件.基于Eclipse平台,支持 ...
    
			
    5. 
						
  5. java基础(十)之向上转型/向下转型
			
    向上转型:将子类的对象赋值给父类的引用. 向下转型:将父类的对象赋值给子类的引用. 向上转型 Student a = new Student(); Person zhang = a; 或者 Perso ...
    
			
    6. 
						
  6. drf大总结
			
    接口 """ 1.什么是接口:url+请求参数+响应数据 | 接口文档 2.接口规范: url:https,api,资源(名词复数),v1,get|post表示操作资源的 ...
    
			
    7. 
						
  7. Linux实现树莓派3B的国密SM9算法交叉编译——（一）环境部署、简单测试与eclipse工程项目测试
			
    这篇文章主要介绍了交叉编译的实现,包括环境部署,并简单测试交叉编译环境是否安装成功. 一.交叉编译 在一个平台上生成另一个平台上的可执行代码.为什么要大费周折的进行交叉编译呢?一句话:不得已而为之.有 ...
    
			
    8. 
						
  8. 微信小程序UDP通信，注意点 接收 onMessage 收到的message是ArrayBuffer缓冲，不能直接输出，要另转String处理
			
    1.WXML 页面代码 <!--index.wxml--> <view class="container"> <view class="us ...
    
			
    9. 
						
  9. 【PAT甲级】1105 Spiral Matrix (25分)
			
    题意:输入一个正整数N(实则<=1e5),接着输入一行N个正整数(<=1e4).降序输出螺旋矩阵. trick: 测试点1,3运行超时原因:直接用sqrt(N)来表示矩阵的宽会在N是素数时 ...
    
			
    10. 
						
  10. 无显示器安装raspberry zero w树莓派 zero w
			
    笔者的环境 1. Macbook 电脑用于烧录树莓派系统到SD卡 2. 树莓派 zero w 把SD卡放进读卡器,插到Mac电脑上, 打开命令行工具Terminal diskutil list列出di ...
    
			
    11.