JS — 实现简单的数字时钟
js实现简单的数字时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS — 实现简单的数字时钟效果</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div class="demo">
<span id="nowTime"></span>
</div>
</body>
<script type="text/javascript">
var newDate = '';
getLangDate();
function dateFilter(date){ //值小于10时,在前面补0
if(date < 10){
return "0"+date;
}
return date;
} function getLangDate(){
var dateObj = new Date(); //表示当前系统时间的Date对象
var year = dateObj.getFullYear(); //当前系统时间的完整年份值
var month = dateObj.getMonth()+1; //当前系统时间的月份值
var date = dateObj.getDate(); //当前系统时间的月份中的日
var day = dateObj.getDay(); //当前系统时间中的星期值
var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week = weeks[day]; //根据星期值,从数组中获取对应的星期字符串
var hour = dateObj.getHours(); //当前系统时间的小时值
var minute = dateObj.getMinutes(); //当前系统时间的分钟值
var second = dateObj.getSeconds(); //当前系统时间的秒钟值
var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午
newDate = dateFilter(year)+"-"+dateFilter(month)+"-"+dateFilter(date)+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
document.getElementById("nowTime").innerHTML = "当前时间: "+newDate+" "+week;
setTimeout(getLangDate,1000);
}
</script>
</html>
JS — 实现简单的数字时钟的更多相关文章
- JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...
- js代码 简单实现数字滚动增加动效(原)
<html><body> <span>look this:</span><span id="nums">10000< ...
- js实现动态数字时钟
1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 简单酷炫的Canvas数字时钟
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- js动态数字时钟
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...
- JS框架_(Vue.js)带有星期日期的数字时钟
百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...
- html5 canvas js(数字时钟)
<!doctype html> <html> <head> <title>canvas dClock</title> </head ...
- 一个简易的 LED 数字时钟实现方法
这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了. 首先可以很明确的一点,这个真没技术含量存在,只是需要点耐心. L ...
随机推荐
- Java关键字和基础问题
1. Java关键字 1.1 extends和implements extends继承普通class或abstract(抽象)类(java单继承) implements多继承能力,实现interfac ...
- pat1064. Complete Binary Search Tree (30)
1064. Complete Binary Search Tree (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...
- Laravel事件监听器listener与事件订阅者Subscriber的区别
其实就一句话: Each event can have multiple listeners, but a listener can't listen to more than a single ev ...
- agc016B - Colorful Hats(智商题)
题意 题目链接 有$n$个人,每个人有一种颜色,第$i$个人说除了我之外有$a_i$种不同的颜色,问是否存在一组合法解 Sol 700分的题就这么神仙了么..好难啊... 先说结论吧 设$mx, mn ...
- Bootstrap插件-collapse
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 使用JS实现图片轮播(前后首尾相接)
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...
- form表单上传域(type="file")的使用----上传文件
一,单个文件的上传 1.html/jsp页面 <%@ page language="java" contentType="text/html; charset=UT ...
- ArcSDE空间数据库中SDE用户使用探讨 (转载)
ArcSDE作为空间数据库解决方案,应用非常广泛,本短文将尝试描述SDE的工作机制,简要说明空间数据库中SDE用户的使用方法.ArcSDE如何工作ArcSDE属于中间件技术,其本身并不能够存储空间数据 ...
- uvm_sqr_ifs——TLM1事务级建模方法(四)
与uvm_tlm_if_base 一样,这个类也没有派生自任何类,定义了如下几个接口:get_next_item, try_next_item, item_done, get, peek, put, ...
- CSS变量(CSS variable)
使用 CSS 变量编写你的样式代码 基本使用: 1. --variable: <declaration-value> 2. <css-attribute>: var(--var ...