JS制作一个创意数字时钟
通过js代码制作一个创意数字时钟
通过JS代码实现创意数字时钟效果如下：由数字化的卡通形象图片取代常规的数字显示当前实时北京时间。具体效果示例：
核心重点：
(1)Date方法的初步了解
(2)构建模型，从特殊到一般。
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>cnblog头部轮播图</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<style>
#div1 {
width: 100%;
height: auto;
font-size: 0px;
text-align:center;
} #div1 img {
width: 14%;
max-width:232px;
height: auto;
border:2px solid black;
}
#div1 .border-left{
border-left:0px;
}
#div1 span {
width: 1%;
font-size: 16px;
}
</style> </head> <body>
<div id="div1">
<img src="./clock/0.jpg">
<img class='border-left' src="./clock/0.jpg">
<span>:</span>
<img src="./clock/0.jpg">
<img class='border-left' src="./clock/0.jpg">
<span>:</span>
<img src="./clock/0.jpg">
<img class='border-left' src="./clock/0.jpg">
</div>
<script>
function toDuble(n) {
if (n < 10) {
return "0" + n;
} else {
return '' + n;
}
}
window.onload = function () {
var oDiv = document.getElementById('div1');
var aImgs = oDiv.getElementsByTagName('img');
function tick() {
var oDate = new Date();
var str = toDuble(oDate.getHours()) + toDuble(oDate.getMinutes()) + toDuble(oDate.getSeconds());
for (var i = 0; i < aImgs.length; i++) {
aImgs[i].src = './clock/' + str.charAt(i) + '.jpg';
}
}
setInterval(tick,1000);
tick();
}
</script>
</body>
</html>
思路：
JS制作一个创意数字时钟的更多相关文章
- 通过JS制作一个简易数码时钟
设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- JS — 实现简单的数字时钟
js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- three.js 制作一个三维的推箱子游戏
今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...
- 用js制作一个计算器
使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...
- 1000粉！使用Three.js制作一个专属3D奖牌🥇
背景 破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面, ...
- 用JS制作一个信息管理平台
首先,介绍一些需要用到的基本知识. [JSON] JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后 ...
- 用JS制作一个信息管理平台(1)
首先,介绍一些需要用到的基本知识. [JSON] JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后 ...
- JS制作一个通用的商城版历史浏览记录
正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下. JS: //cookie相关函数 function getCookieVal(offset) { var endst ...
随机推荐
- 九度oj 题目1206：字符串连接
题目1206:字符串连接 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:5117 解决:2373 题目描述: 不借用任何字符串库函数实现无冗余地接受两个字符串,然后把它们无冗余的连接起来 ...
- [luoguP1272] 重建道路
传送门 奇奇怪怪的分组背包. #include <cstdio> #include <cstring> #include <iostream> #define N ...
- Vue 实例以及生命周期
最简单的 Vue 实例 //html <div id="app"> {{message}} </div> //javascript var vm = new ...
- Linux find常用命令
今天研究一下find的一些常用的命令. find格式:find filepath [-option] [-print|-exec|-ok...] 其中常用的option主要有 -type d|f|s| ...
- 2018/3/4 Activiti教程之对于流程的基本操作以及从发起到完成还有相关注意事项(与Springboot整合版)三
写教程实在太累了,,,还浪费时间,Activiti教程就写到这好了,不过最近在玩区块链,到时候写几个区块链方面的教程. 这是一些流程的查询与删除api,删除这块,默认是级联删除(加个false参数,就 ...
- HDU 5950 Recursive sequence 递推转矩阵
Recursive sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...
- csu - 1536: Bit String Reordering (模拟)
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1536 不知道为何怎么写都写不对. 这题可以模拟. 虽然题目保证一定可以从原串变成目标串,但是不一定 ...
- zoj2853 Evolution
给定一个进化的矩阵图,问在m次之后最终的物种有多少个,实际上这和线性代数及其应用里的一个例题是一样的...总之就相当于煞笔的套个矩阵不断去乘m次,然后每次都会根据得到进化后各物种的个数,矩阵快速幂求一 ...
- cakephp2.3.8中何为component
大胆假设,小心求证 记得这句话是以前读高三的时候,一个数学老师(圆头,有点胖胖的老师,不是很记得),经常挂在嘴边的一句话, 对于我们不理解,或者说是无法确定的东西,我们不妨先大胆地去假 ...
- python内置全局变量
vars()查看内置全局变量 以字典方式返回内置全局变量 #!/usr/bin/env python # -*- coding:utf8 -*- print(vars()) #输出 # {'__bui ...