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 相关文章推荐
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 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获取操作系统语言代码
2013/11/04 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python Socket编程入门教程
2014/07/11 Python
python实现的文件夹清理程序分享
2014/11/22 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python程序运行原理图文解析
2018/02/10 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
个人租房协议书
2014/11/28 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书