数字时钟小插件

学习js中----今天试着写了下数字时钟。

html代码如下:

<body style="font-size:50px;background:black;color:#fff;">

<img src="img/1.png">
<img src="img/4.png">
:
<img src="img/0.png">
<img src="img/6.png">
:
<img src="img/5.png">
<img src="img/9.png">
</body>

js代码如下

function toDou(n) {
if(n<10){
return "0"+n;
}else{
return n;
}
}
window.onload=function(){
function clock(){
var aImg=document.getElementsByTagName("img");
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var str=‘‘+toDou(h)+toDou(m)+toDou(s);

for(var i=0;i<aImg.length;i++)
aImg[i].src="img/"+str.charAt(i)+".png";
}
clock();
setInterval(clock, 1000);
}

img如下(自己下载下来链接上吧。)

时间: 2024-11-03 03:25:03

数字时钟小插件的相关文章

桌面小控件的实例-----数字时钟

为了实现一个数字时钟的桌面组件,开发者需要在程序界面上定义8个ImageView,其中6个ImageView用于显示小时.分钟.秒钟的数字,另外两个ImageView用于显示小时.分钟.秒钟之间的冒号. 为了让桌面组件实时的显示当前时间,程序需要每个1秒更新一次程序界面上的6个ImageView,让它们显示当前小时.分钟.秒钟的数字即可. import java.text.SimpleDateFormat;import java.util.Date;import java.util.Timer;

[Java项目01][数字时钟]

我从2016年3月份开始学Java,看的是某宝得来的视频,目前Java SE还没学完. 前几天手痒在网上搜Java小项目,看到Youtube上的歪果仁们做的Java数字时钟,非常简单,适合我这样的新手,于是也做了一份. 效果大概是是这样的: 源代码传到了GitHub上: https://github.com/jpch89/Digital-Clock 另外还录了份视频,免得以后自己忘了怎么做,传到了Vimeo上: https://vimeo.com/159116313 参考资料如下: 1. Cre

小巧实用的数字加减插件(jquery插件)

自己的第一个jquery插件,规模虽然不大,但是小成就满满,对jquery又有了更进一步的认识. 简单实用的数字加减插件,实现通过加减按钮对文本框内的数字进行增减操作. 效果图: 参数: 默认值.最大值.最小值.增减度. 可单独对每个input设置参数,也可以对所有input统一设置.参考代码在下方: 使用方法: 1.引用css.js文件(记得引用jquery.min.js) 2.前台: 2.1无参数 <input type="text" class="numberTe

JS小插件之1——pager 分页

学习JS大半年之久,第一次自己尝试写一些小插件,写法参考网上某位牛人写代码的思路. 此处代码写的是静态分页.如果需动态分页,还可以修改下.第一次写,还有很多地方可以优化.希望各位大牛踊跃拍砖. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <t

JS — 实现简单的数字时钟

js实现简单的数字时钟 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS — 实现简单的数字时钟效果</title> 6 <link rel="stylesheet" type="text/css" href=""> 7 </head>

js实现动态数字时钟

1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS — 实现简单的数字时钟效果</title> <link rel="stylesheet" type="text/css" href=""> </head> <body&g

VALIDFORM前端小插件实现表单验证;

好开心啊,有了这个小插件就不用在服务器端去写用户输入的东西是否合法,又美观: 这个是官网,使用入门那儿很简单,不如直接改demo; 下载的demo就是这个: 小李子(永奇商城注册页面表单验证): 就是这个,那个邮箱正则验证效果如何加上去的呢: 看demo就知道(把demo里面之中整个demo文件夹拷贝在项目之中,将css之中validform必须的留下,其他删除掉,也就是demo文件夹里面/*==========以下部分是Validform必须的===========*/这一行字下面的css样式

浮动【电梯】或【回到顶部】小插件:iElevator.js

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null, btns: null, backtop: null, selected: '', sticky: -1, visible: { isHide: 'no', numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, h

Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)

这个数字时钟的源码可以在Qt Demo中找到,风格是仿Android的,不过该Demo中含有三种动画效果(鉴于本人未曾用过Android的系统,因此不知道Android的数字时钟是否也含有这三种效果),其分别为滑动.翻页和旋转. 由于本人的Qt Creator输入中文后显示的都是乱码,因而在此只能使用英文进行注释,后期如果有时间再进行中文的相关整理.可能有些地方理解并不是很正确.希望大家多多指正! 以下为源码: [cpp] view plaincopy #include <QtCore> #i