js实现温度计时间样式代码分享


Posted in Javascript onAugust 21, 2015

这是一款基于js实现温度计时间样式代码,与我们见过的日期显示都不一样,很有创意,分享给大家学习学习

运行效果图:----------------------查看效果-----------------------

js实现温度计时间样式代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的javascript实现温度计时间样式代码如下

<title> 温度计式样的时间 </title>
<SCRIPT language=javascript>
var cellwidth=10; // EACH "CELL" WIDTH IN PIXELS
var cellheight=10; // EACH "CELL" HEIGHT IN PIXELS
var fontsize=11; // FONT SIZE OF THE NUMBERS. SETTING THIS TOO BIG CAUSES UNDESIRED EFFECTS.
var fontcolor="080080"; // ENTER ANY HTML or RGB COLOR CODE
var fontstyle="bold"; // ENTER EITHER BOLD, ITALICS, NONE
var oncolor="red"; // COLOR OF ACTIVE CELLS
var offcolor="lightgrey"; // COLOR OF INACTIVE CELLS

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var binclk, now;
var t='<table cellspacing="1" cellpadding="0" border="0"><tr><td align="center"> </td>';
for(i=0;i<=58;i+=2)t+='<td align="left" colspan="2"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">'+i+'<br> |</font></td>';
t+='<td> </td></tr><tr><td align="center"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">时: </font></td>';
for(i=0;i<=23;i++){
t+='<td>';
t+=(NS4)? '<ilayer name="hrs'+i+'" height="'+cellheight+'" width="'+cellwidth+'" bgcolor="'+offcolor+'"></ilayer>' : '<div id="hrs'+i+'" style="position:relative; width:'+cellwidth+'px; font-size:1px; height:'+cellheight+'px; background-color:'+offcolor+'"></div>';
t+='</td>';
}
t+='<td colspan="36"><td> </td></tr><tr><td align="center"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">分: </font></td>';
for(i=0;i<=59;i++){
t+='<td>';
t+=(NS4)? '<ilayer name="min'+i+'" width="'+cellwidth+'" height="'+cellheight+'" bgcolor="'+offcolor+'"></ilayer>' : '<div id="min'+i+'" style="position:relative; width:'+cellwidth+'px; font-size:1px; height:'+cellheight+'px; background-color:'+offcolor+'"></div>';
t+='</td>';
}
t+='<td> </td></tr><tr><td align="center"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'">秒: </font></td>';
for(i=0;i<=59;i++)
{
t+='<td>';
t+=(NS4)? '<ilayer name="sec'+i+'" width="'+cellwidth+'" height="'+cellheight+'" bgcolor="'+offcolor+'"></ilayer>' : '<div id="sec'+i+'" style="position:relative; width:'+cellwidth+'px; font-size:1px; height:'+cellheight+'px; background-color:'+offcolor+'"></div>';
t+='</td>';
}
t+='<td> </td></tr><tr><td> </td><td> </td>';
for(i=1;i<=59;i+=2)t+='<td align="left" colspan="2"><font style="font-size:'+fontsize+'px; font-weight:'+fontstyle+'; color: '+fontcolor+'"> |<br>'+i+'</font></td>';
t+='</tr></table>';
document.write(t);
function init(){
getvals();
for(i=0;i<=now.h;i++)setbgcolor('hrs'+i, oncolor);
for(i=0;i<=now.m;i++)setbgcolor('min'+i, oncolor);
for(i=0;i<=now.s;i++)setbgcolor('sec'+i, oncolor);
setInterval('setclock()', 100);
}
function getvals(){
now=new Date();
now.s=now.getSeconds();
now.h=now.getHours();
now.m=now.getMinutes();
}
function setclock(){
getvals();
if((now.h==0)&&(now.m==0)) for(i=1;i<=23;i++)setbgcolor('hrs'+i, offcolor);
if((now.s==0)&&(now.m==0)) for (i=1;i<=59;i++)setbgcolor('min'+i, offcolor);
if(now.s==0) for(i=1;i<=59;i++)setbgcolor('sec'+i, offcolor);
setbgcolor('hrs'+now.h, oncolor);
setbgcolor('min'+now.m, oncolor);
setbgcolor('sec'+now.s, oncolor);
}
function resize(){
if(NS4)history.go(0);
}
function setbgcolor(idstr, color){
if(IE4)document.all[idstr].style.backgroundColor=color;
if(NS4)document.layers[idstr].bgColor=color;
if(NS6)document.getElementById(idstr).style.backgroundColor=color;
}
window.onload=init;
window.onresize=resize;
</SCRIPT>

以上就是为大家分享的javascript实现温度计时间样式代码,希望大家可以喜欢。

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 #Javascript
JS打字效果的动态菜单代码分享
Aug 21 #Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 #Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 #Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 #Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 #Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 #Javascript
You might like
PHP 进程锁定问题分析研究
2009/11/24 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP数据过滤的方法
2013/10/30 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
python对url格式解析的方法
2015/05/13 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
详解Python 解压缩文件
2019/04/09 Python
python中def是做什么的
2020/06/10 Python
详解Python流程控制语句
2020/10/28 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
python 制作网站小说下载器
2021/02/20 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
演讲稿的写法
2014/05/19 职场文书
新闻学专业求职信
2014/07/28 职场文书
安全承诺书格式范本
2015/04/28 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS