js图片时间翻转
带素材
代码一：
<!--
Author: XiaoWen
Create a file: 2016-12-12 10:08:02
Last modified: 2016-12-12 11:30:34
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js翻转的时间</title>
<style>
div{
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<script>
document.write('<div id="time_box"></div>');
var time_box=document.getElementById("time_box");
var a_img=document.getElementsByTagName("img");
for(var i=0;i<8;i++){
time_box.innerHTML+='<img alt="图片' + i + '">';
};
var arr=["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"]
var t1=setInterval(function(){
var t2;
var time=new Date();
var time_str=add0(time.getHours())+""+add0(time.getMinutes())+""+add0(time.getSeconds());
a_img[0].src=arr[time_str[0]];
a_img[1].src=arr[time_str[1]];
a_img[2].src="colon.jpg";
a_img[3].src=arr[time_str[2]];
a_img[4].src=arr[time_str[3]];
a_img[5].src="colon.jpg";
a_img[6].src=arr[time_str[4]];
a_img[7].src=arr[time_str[5]];
t2=setInterval(function(){
console.log("t2")
clearInterval(t2)
a_img[2].src="space.jpg";
a_img[5].src="space.jpg";
},500)
},1000);
function add0(a){
if(a<10){
return "0"+a;
}else{
return a;
};
};
</script>
</body>
</html>
代码二：
<!--
Author: XiaoWen
Create a file: 2016-12-12 10:08:02
Last modified: 2016-12-12 12:05:10
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js翻转的时间2</title>
<style>
div{
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<script>
document.write('<div id="time_box"></div>');
var time_box=document.getElementById("time_box");
var a_img=document.getElementsByTagName("img");
for(var i=0;i<8;i++){
time_box.innerHTML+='<img alt="图片' + i + '">';
}; var t2;
var arr=["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"]
var t1=setInterval(function(){
var time=new Date();
var time_str=add0(time.getHours())+":"+add0(time.getMinutes())+":"+add0(time.getSeconds());
var j=0;
for(var i=0;i<a_img.length;i++){
if(i==2 || i==5){
a_img[i].src="colon.jpg";
clearInterval(t2)
t2=setInterval(function(){
a_img[2].src="space.jpg";
a_img[5].src="space.jpg";
},500)
}else{
a_img[i].src=arr[time_str[i]];
}
}
},1000);
function add0(a){
if(a<10){
return "0"+a;
}else{
return a;
};
};
</script>
</body>
</html>
代码三：
<!--
Author: XiaoWen
Create a file: 2016-12-12 10:08:02
Last modified: 2016-12-12 12:14:29
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js翻转的时间3</title>
<style>
div{
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<script>
document.write('<div id="time_box"></div>');
var time_box=document.getElementById("time_box");
var a_img=document.getElementsByTagName("img");
for(var i=0;i<8;i++){
time_box.innerHTML+='<img alt="图片' + i + '">';
};
var t2;
var t1=setInterval(function(){
var time=new Date();
var time_str=add0(time.getHours())+":"+add0(time.getMinutes())+":"+add0(time.getSeconds());
var j=0;
for(var i=0;i<a_img.length;i++){
a_img[i].src=time_str[i] + ".jpg";
}
a_img[2].src="colon.jpg";
a_img[5].src="colon.jpg";
setTimeout(function(){
a_img[2].src="space.jpg";
a_img[5].src="space.jpg";
},500);
},1000);
function add0(a){
if(a<10){
return "0"+a;
}else{
return a;
};
};
</script>
</body>
</html>
js图片时间翻转的更多相关文章
- js图片时间和倒计时
图片时间原理 原理:使用定时器每秒获取时间,获取时间的时,分,秒,组成一个6位数的字符串,然后用charAt,截取出对应的字符,图片命名和数字相对应就ok拉 倒计时原理 原 ...
- JS图片延迟加载分析及简单的demo
JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...
- css3图片3D翻转效果
点击图片看翻转效果 html结构 <div class="flip"> <div class="front"> <img src= ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- ImageDrawer.js图片绘制插件
ImageDrawer.js图片绘制插件有以下一些可用的配置参数. Duration:整个动画或每个步骤的绘制时间(以秒为单位) Background:在绘图时将颜色放在图片上 Callback:绘画 ...
- 项目总结07：JS图片的上传预览和表单提交（FileReader()方法）
JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...
- JS图片Switchable切换大集合
JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
随机推荐
- FIFO跨时钟域读写
今天面试,要走时问了我一个问题:如果两个时钟一个时钟慢一个时钟快,来读写FIFO,其中读出的数据是 连续的一段一段的. 图1 图1为写时序控制,可以看出数据是两个时钟周期的长度,当然实际中可以是任意周 ...
- CSS线性渐变
/*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...
- JavaScript小功能
1. JS判断是否为一个有效日期 1 2 3 4 function check(date){ return (new Date(date).getDate()==date.substring( ...
- 前端---HTML
HTML基础 本章内容: 简介 HTML定义 标签定义和属性 HTML5基本结构 HTML5字符集 <head>标签 <title> <base/> <lin ...
- [转] mhvtl虚拟磁带库的安装与应用
转自:candon123 -- http://candon123.blog.51cto.com/704299/388192/ 1.获取mhvtl: 官方网站:http://mhvtl.nimsa.u ...
- Oracle 包（Package）
引用这位大大的: http://www.cnblogs.com/lovemoon714/archive/2012/02/29/2373695.html 1.为什么要使用包? 答:在一个大型 ...
- ytxgnopyvw
Rt.不是我的博客被盗了 而是我要测试一下某网站是自动抓取我的博客还是手动抓取. 如果是手动抓取,那么该网站的管理员一定会看见这篇博文, 希望管理员能够自己反省. ytxgn只是为了百度搜索方便罢了.
- coredump调试的使用
一,什么是coredump 跑程序的时候经常碰到SIGNAL 或者 call trace的问题,需要定位解决,这里说的大部分是指对应程序由于各种异常或者bug导致在运行过程中异常退出或者中止,并且在满 ...
- IOS一些好的用户体验设置
1,下载图片时,如果 用户操作UI,那么就停止子线程,用户停止操作子线程时,开启子线程继续下载. SDWebImage :专门下载图片. 2,网络请求时.本地要进行一些验证,以减少服务器的压力.
- three.js 源码注释（四十四）Light/DirectionalLight.js
/** * * DirectionalLight方法 根据设置灯光的颜属性color, 强度属性intensity创建平行光光源. * DirectionalLight 对象的功能函数采用定义构造的函 ...