效果格式: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. HTML的网页基本结构

    写在前面 <!DOCTYPE html><html lang="en"><head>            <meta charset=& ...

  2. object转为string

    object为null时 错误:object.tostring() 空指针 正确:(string)object

  3. MarkDown的黄金搭档Typora编辑器

    让你成为热爱写作的程序员 学习编程的小伙伴,要养成记笔记的好习惯,并发布到博客上去与同行分享你的学习经验,那么传统的文本编辑器或多或少会不尽人意,效率低,而且码字体验与写代码完全不一样. 下面推荐一款 ...

  4. redis5.0.7安装及配置集群

    1.安装环境linux系统,时间2020年2月 2.官网下载https://redis.io/ 3.解压 tar -zxvf redis-5.0.7.tar.gz 4.配置文件 //创建etc文件夹, ...

  5. LED Decorative Light Manufacturer - Led Wall Lamp Performance Characteristics

    LED Decorative Light Manufacturer    introduction: LED wall lamp is a light-emitting diode as a ligh ...

  6. ABB 机器人 流水灯and跑马灯

    MODULE MainModule VAR signaldi signaldi14; PROC main() //di14_test 数字输入信号 WHILE di14_test = DO ycld; ...

  7. android关闭屏幕时不锁屏实现

    所需权限: <uses-permission android:name="android.permission.DISABLE_KEYGUARD"/> 关闭系统锁屏服务 ...

  8. layui与jQuery一起使用

    1,先导入jquery <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2 ...

  9. JS使用正则表达式获取小括号、中括号及花括号内容的方法示例

    本文实例讲述了JS使用正则表达式获取小括号.中括号及花括号内容的方法.分享给大家供大家参考,具体如下: JS 正则表达式 获取小括号 中括号 花括号内的内容 <!DOCTYPE html> ...

  10. arcgis中的Join(合并连接)和Relate(关联连接)

    arcgis中的Join(合并连接)和Relate(关联连接) 一.区别 1.连接关系不一样. Relate(关联连接)方式连接的两个表之间的记录可以是“一对一”.“多对一”.“一对多”的关系 Joi ...