`
xiaoqi18
  • 浏览: 16881 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

超酷的像温度计那样的显示时间的JS日期-时间日期类

阅读更多
<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>
分享到:
评论

相关推荐

    1900-2100 两百年超酷百年日历.rar

    标签“JS特效-日期时间”进一步证实了这个日历程序的核心特性,即使用JavaScript来处理日期和时间的显示与转换。在JavaScript中,可以使用内置的Date对象来创建、操作和格式化日期。开发者可能通过自定义函数或者第...

    超酷图片显示特效js效果

    本项目名为“超酷图片显示特效js效果”,它显然聚焦于利用JavaScript实现令人惊叹的图片展示功能。这样的特效可以提升用户体验,使得网页中的图片更加吸引人,增加用户的停留时间和互动性。 在描述中提到的“超漂亮...

    超酷的js日历控件

    4. **时间处理**:JavaScript的`Date`对象是处理日期和时间的基础,但不支持农历。开发者可能需要借助第三方库,如`ChineseLunarCalendar`,或者自行实现算法来转换公历和农历。 5. **CSS样式**:“超酷”这一特点...

    一个超酷的日期选择器

    一个超酷的日期选择器 js日期选择器 日期选择器

    超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31

    超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31

    超酷进度条----带渐变颜色显示

    "超酷进度条——带渐变颜色显示"是一个专为提升应用或网站界面视觉吸引力而设计的组件。这种进度条不仅具备基本的进度指示功能,还通过渐变色彩为用户带来更丰富、动态的视觉体验。 渐变色在UI设计中的应用日益广泛...

    js 特效 html 特效 八种风格的时间日期

    js 特效 html 特效 八种风格的时间日期

    1900-2100 两百年超酷百年日历

    标题中的“1900-2100 两百年超酷百年日历”指的是一个跨越1900年至2100年的特殊日历设计或应用,它可能包含了这200年间的所有日期,旨在提供一个全面的时间规划工具或者独特的装饰品。这种日历可能具有独特的视觉...

    安卓天气日历时间选择倒计时相关-超酷的时间选择控件.rar

    这个文件可能是实现动态时间显示的核心代码,例如在日历应用中显示日期,或者在倒计时应用中实时更新剩余时间。 在实际应用中,时间选择控件一般会包括年、月、日、小时和分钟的选择,有时还会涉及秒和毫秒。它们...

    js日历控件[超酷超漂亮]

    根据提供的信息,我们可以总结出以下关于“js日历控件[超酷超漂亮]”的知识点: ### 一、概述 此控件是一款基于JavaScript的日历插件,它具有非常美观且酷炫的界面设计。从标题和描述来看,这款日历控件的设计风格...

    js+php实现一款超酷的日历控件

    - **时间显示**:可以选择是否显示时间部分,以及采用12小时制或24小时制。 - **其他月份显示**:可以选择是否在日历中显示非当前月份的部分日期。 ### 二、关键技术实现 #### 1. **JavaScript实现** - **...

    超酷文字斜斜显示.zip

    通过使用jQuery,开发者可以更高效地编写代码,减少跨浏览器兼容性问题,使得像“超酷文字斜斜显示”这样的复杂效果更容易实现。 这个特效的核心在于利用CSS(层叠样式表)来改变文本的样式和布局,结合JavaScript...

    javascript经典特效---XML超酷页面效果二.rar

    在本案例中,“javascript经典特效---XML超酷页面效果二.rar”是一个包含使用JavaScript和XML技术实现的炫酷页面效果的压缩包。下面将详细探讨JavaScript与XML的结合以及在页面效果中的应用。 首先,JavaScript是...

    javascript经典特效---拖动的超酷菜单.rar

    《JavaScript实现超酷拖动菜单详解》 在Web开发领域,JavaScript是一种不可或缺的脚本语言,它赋予网页动态交互的能力。本次我们聚焦于一个特定的话题——利用JavaScript实现拖动的超酷菜单。拖动菜单是一种增强...

    jQuery超酷文字淡入淡出显示特效

    在本文中,我们将深入探讨"jQuery超酷文字淡入淡出显示特效"这一主题,它是一种使用reveal-it.js插件实现的动态文字展示技术。这个特效插件为网页设计带来了新颖且引人注目的视觉体验,尤其适用于创建吸引人的标题或...

    日期时间控件

    例如,`ng_all.js`可能是一个包含Angular模块和组件的文件,它可能包含了Angular对日期时间控件的封装。在Angular中,可以使用ngModel指令将控件与数据模型绑定,通过指令和服务实现自定义逻辑和格式化。 ...

    Jquery实现超酷的时间轴特效.rar

    本项目使用Jquery库来实现两种超酷的时间轴特效,分别是瀑布流布局和组装形式的实现。 **一、瀑布流方式实现布局** 瀑布流布局,又称Masonry布局,源自Pinterest的设计,它允许元素在页面上自适应地填充空间,形成...

    javascript经典特效---多层超酷导航条.rar

    本资源“javascript经典特效---多层超酷导航条.rar”聚焦于利用JavaScript实现一个具有多层结构且视觉效果酷炫的导航条,这将极大地提升用户体验。 首先,我们来理解一下“多层”的概念。在网页设计中,多层导航...

    超酷超实用javascript特效100个

    6. **时间日期处理**:JavaScript提供了Date对象,可以用于显示和处理日期时间,创建倒计时、日历、计时器等效果。结合AJAX,还能实现动态更新时间的信息。 7. **其他特效**:还有许多其他特效,比如轮播图、弹出框...

    用JavaScript创建超酷时钟背景特效

    本文介绍了一个使用JavaScript实现的动态时钟背景特效,它不仅能够实时显示当前时间,还通过特殊的层叠效果使时钟呈现为背景的一部分,从而不会影响页面的整体布局。 #### 二、技术原理及实现步骤 ##### 1. 动态...

Global site tag (gtag.js) - Google Analytics