效果格式: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. js时间戳如何转时间

    js时间戳如何转时间 一.总结 一句话总结:Date对象分别获取年now.getFullYear()月now.getMonth()+1日now.getDate()即可 Date对象分别获取年now.g ...

  3. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  4. js中如何对时间进行设置

    js中如何对时间进行设置 Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getF ...

  5. js 获取当前的时间

    第一个小程序,用js获取当前的时间,,比较特殊的是 月是从0开始算的,显示的时候要加1,获取日用getDate(),获取周 getDay(), 直接上代码 <!DOCTYPE html> ...

  6. js如何实现一定时间后去执行一个函数

    js如何实现一定时间后去执行一个函数:在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的,这也就是一个定时器效果,恰好在js中就已经给定了这样的一个函数setTimeout(), ...

  7. js得到规范的时间格式函数,并调用

    1.js得到规范的时间格式函数 Date.prototype.format = function(fmt) { var o = { "M+" : this.getMonth()+1 ...

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

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

  9. html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

随机推荐

  1. 洛谷 P5569 [SDOI2008]石子合并 GarsiaWachs算法

    石子合并终极通用版 #include<bits/stdc++.h> using namespace std ; ]; int n,t,ans; void combine(int k) { ...

  2. _mysql_exceptions.OperationalError: (2013, 'Lost connection to MySQL server during query')

    最近写了一个定时脚本,每天凌晨跑,每次跑时间很长. 在测试这个脚本的时候,跑了一个小时,发生一个错误,脚本中断,错误如下: _mysql_exceptions.OperationalError: (2 ...

  3. Django_模型

    1. ORM 2. 简单使用 3. 外键 2.0以上的版本要这样写s_grade = models.ForeignKey(Grade,on_delete=models.CASCADE) 3. 修改表名 ...

  4. 每天进步一点点------Allegro 布线完成后如何修改线宽

    一.如果要改变整个一条导线的宽度 1.在find栏里选择Cline; 2.在PCB中选择要改的导线,点击右键,选择Change Width    3.在对话框中输入你想要的线宽 3.如果要改变整个导线 ...

  5. MFC单文档视图中嵌入GLFW窗口

    开始学习OpenGL由于有一段时间,但是glfw只有窗口区,虽然通过某种手段(移步这里)可以加入工具栏,但仍然无法作为一个标准的GUI,而直接在MFC或Qt里面使用OpenGL API感觉有诸多制肘, ...

  6. 【网易官方】极客战记(codecombat)攻略-地牢-恐惧之门

    关卡连接: https://codecombat.163.com/play/level/dread-door 恐惧之门后藏满宝藏 简介: while-true 循环可以使用任何方法,如: while ...

  7. 普及C组第一题(8.9)

    2297. [noip普及组2(放到第一题)]棋盘 (好像重名了)(File IO): input:chess.in output:chess.out 题目描述 众所周知,国际象棋的棋盘是一个网格.国 ...

  8. HashSet HashMap 源码阅读笔记

    hashcode() 与 equals() 应一起重写,在HashMap 会先调用hash(key.hashcode()) 找到对应的entry数组位置 (一般初始是16,2^x,rehash后会翻倍 ...

  9. 每日扫盲(三):id_rsa、id_rsa.pub 、authorized_keys

    一.authorized_keys 1.就是为了让两个linux机器之间使用ssh不需要用户名和密码.采用了数字签名RSA或者DSA来完成这个操作 2.模型分析 假设 A (192.168.20.59 ...

  10. chomp/undef/标量 --Perl 入门第二章

    1.chomp 用途:去掉字符串 末尾的换行符 $text="a line of text \n" chomp($text) #去除行末的换行符 chomp()  --本质上是一个 ...