网页特效时钟

最新推荐文章于 2023-07-01 15:46:05 发布
最新推荐文章于 2023-07-01 15:46:05 发布
阅读量478 收藏
点赞数 1
文章标签： javascript calendar function border date table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feili213/article/details/5698655
版权

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效---一个很漂亮实用的日历 </title>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
//创建一个数组,用于存放每个月的天数
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)
{
this[0] = m0;
this[1] = m1;
this[2] = m2;
this[3] = m3;
this[4] = m4;
this[5] = m5;
this[6] = m6;
this[7] = m7;
this[8] = m8;
this[9] = m9;
this[10] = m10;
this[11] = m11;
}
//实现月历
function calendar() {
var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
var today = new Date();
var thisDay;
var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
year = today.getYear() +1900;
thisDay = today.getDate();
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
nDays = monthDays[today.getMonth()];
firstDay = today;
firstDay.setDate(1);
testMe = firstDay.getDate();
if (testMe == 2) firstDay.setDate(0);
startDay = firstDay.getDay();
document.write(" <div id='rili' style='position:absolute;width:120px;'>")
document.write(" <TABLE width='180' BORDER='0' CELLSPACING='3' CELLPADDING='0' BGCOLOR='#0080FF'>")
document.write(" <TR> <TD> <table border='0' cellspacing='0' cellpadding='0' bgcolor='Silver'>");
document.write(" <TR> <th colspan='7' bgcolor='#C8E3FF'>");
var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var now = new Date();
document.writeln(" <FONT STYLE='font-size:8pt;Color:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + " </FONT>");
document.writeln(" </TH> </TR> <TR> <TH BGCOLOR='#0080FF'> <FONT STYLE='font-size:8pt;Color:White'>日 </FONT> </TH>");
document.writeln(" <th bgcolor='#0080FF'> <FONT STYLE='font-size:8pt;Color:White'>一 </FONT> </TH>");
document.writeln(" <TH BGCOLOR='#0080FF'> <FONT STYLE='font-size:8pt;Color:White'>二 </FONT> </TH>");
document.writeln(" <TH BGCOLOR='#0080FF'> <FONT STYLE='font-size:8pt;Color:White'>三 </FONT> </TH>");
document.writeln(" <TH BGCOLOR='#0080FF'> <FONT STYLE='font-size:8pt;Color:White'>四 </FONT> </TH>");
document.writeln(" <TH BGCOLOR='#0080FF'> <FONT STYLE='font-size:8pt;Color:White'>五 </FONT> </TH>");
document.writeln(" <TH BGCOLOR='#0080FF'> <FONT STYLE='font-size:8pt;Color:White'>六 </FONT> </TH>");
document.writeln(" </TR> <TR>");
column = 0;
for (i=0; i <startDay; i++) {
document.writeln("/n <TD> <FONT STYLE='font-size:8pt'> </FONT> </TD>");
column++;
}

for (i=1; i <=nDays; i++) {
if (i == thisDay) {
document.writeln(" </TD> <TD ALIGN='CENTER' BGCOLOR='#FF8040'> <FONT STYLE='font-size:8pt;Color:#ffffff'> <B>")
}
else {
document.writeln(" </TD> <TD BGCOLOR='#FFFFFF' ALIGN='CENTER'> <FONT STYLE='font-size:8pt;font-family:Arial;font-weight:bolder;Color:#330066'>");
}
document.writeln(i);
if (i == thisDay) document.writeln(" </FONT> </TD>")
column++;
if (column == 7) {
document.writeln(" <TR>");
column = 0;
}
}
document.writeln(" <TR> <TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")
document.writeln(" <FORM NAME='clock' onSubmit='0'> <FONT STYLE='font-size:8pt;Color:#ffffff'>")
document.writeln("现在时间: <INPUT TYPE='Text' size=16 NAME='face' ALIGN='TOP'> </FONT> </FORM> </TD> </TR> </TABLE>")
document.writeln(" </TD> </TR> </TABLE> </div>");
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var timerID = null;
var timerRunning = false;

function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;}

//显示当前时间
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = " " + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " 下午 " : " 上午 "
document.clock.face.value = timeValue;
timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示
timerRunning = true;}

function startclock () {
stopclock();
showtime();}
</SCRIPT>

</head>

<body onLoad="startclock(); timerONE=window.setTimeout">
<script language="JavaScript" type="text/javascript">
<!--
calendar();
//-->

</script>

</body>

</html>

feili213
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页特效--时钟代码
06-25
可以放到网页上，增添美观的时钟---外圈是年月日内圈为JavaScript时钟
HTML网页数字时钟特效代码
03-20
HTML网页数字时钟代码基于Vue.js2.3.4制作，打开网页，动态显示日期、星期、时、分、秒。
网页特效之时钟
初阶农民工的博客
07-24 788
思路：首先使用定位功能把时钟、时针、分针、秒针聚合，然后使用日期函数得到当前时间的时分秒和毫秒，然后使用css3属性transform和旋转函数rotate()改变角度，达到使针转动的目的。 关键知识：position定位，日期函数Date()获得当前时分秒的使用，transform属性 具体代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &...
js时钟特效
01-18
一款精美的指针时钟，其代码使用JavaScript做成
网页时间特效_正确取时间
weixin_33736832的博客
04-13 70
<div id="sys_time"></div><script>setInterval("sys_time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script> 转载于:https://ww...
纯js代码制作的网页时钟特效【附实例】
10-22
下面小编就为大家带来一篇纯js代码制作的网页时钟特效【附实例】。小编觉得听错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS实现网页时钟特效
10-15
主要为大家详细介绍了JS实现网页时钟特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS典型网页特效.doc
01-07
【JS典型网页特效】是指利用JavaScript编程语言在网页上实现各种动态效果，如电子时钟、滑动菜单、轮播图等。这些特效能够提升用户体验，使网页更具吸引力。本篇将详细介绍如何使用JavaScript实现一个电子时钟的网页...
网页特效——时间日期篇3
04-17
包括日历，日历生成器，日期自由选择，日期显示，生日提醒器，剩余时间，十六进制时间显示，时间按钮提示，时间特殊显示，时间呼唤起，时间精确计算程序，时间日期转换，时间跳动器，时间相互对比，时间与日期的变换，时钟1，时钟2，时钟家在背景上，时钟显示在指针指定位置，手表，鼠标时钟，鼠标在日历中的多种用途，随时间变化提示，外圈日期内圈时间，万年历1、万年历2、万年历3、万年历4
给页面写一个炫酷的时钟特效【web前端】
一键难忘的博客
08-11 2134
今天看到某网站的时间特别的丑陋，所以就诞生了写一个看时间的炫酷的时钟前端页面。特点就是炫酷，特效好，个人以心情愉快的感觉。对于时间的变化，我打算使用翻页的特效来完成，色系的话采用黑色以主题，给人一种神秘的感觉。而且要获取到本地的时间的数据来实时更新它的变化。...
ASP.NET MVC-- 在网页上显示一个时钟
feihu19851111的专栏
05-29 1904
html> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers m=checkTime(m) s=checkTime(s)
含泪整理最优质时间轴网页特效素材，你想要的这里都有
m0_66459945的博客
01-25 1617
看到大家都在问时间轴网页特效素材，既要免费又要质量好，数量还要多，小编好不容易挖到了宝藏素材网站哦，资源优质数量庞大，使用体验也很好，要是需要的话，赶紧看一看，小编会给大家详细介绍噢 免费资源最多，又全面的网站，我找到啦！！它有很多素材，成品类的，元素类的，应有尽有。我刚找到这个网站的时候真的非常惊喜，非常良心的网站。 为大家整理了网页特效-时间轴网页特效合集 为了方便大家更快的找到资源，小编给大家指引路线： 进入网站后-点击-平面-资源库-网页特效栏目，然后再点击日期时间-时间轴分类，这样就能找到
html实现动态时间，以及动图动图效果
最新发布
qq_66922072的博客
07-01 2528
通过不断获取不断获取本地时间之后上传到html页面上实现setTimeout：用于定时执行某个函数参数1：运行函数参数2：时间参数（毫秒），规定n秒后执行Date对象：可以获取当前电脑的时间的对象document.querySelector(".shwoTime").innerHTML：通过class值（.showTime)定位，填充信息通过对png图片设置旋转实现动图效果/* 设置10s旋转完成，匀速旋转，一只旋转*//* 下面的这个是一个函数，自定义旋转方式 */from {
纯JS制作一个网页时钟特效
Byte_Dance的博客
01-05 5202
  主要逻辑 根据JS 的Date属性 求得当前的 时 分 秒 之后,按照 360/(时|分|秒)  来对三个指针元素进行旋转 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title
网页当前时间显示（特效）
大象
07-16 1289
参考来源http://www.cnblogs.com/alan-forever/p/3344512.html效果图 动态更佳可直接在浏览器打开链显示上图接：http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf 代码在前端页面嵌入代码<embed width="160" height="70" align=
前端实现好看的动态时钟效果
老电影故事的博客
07-13 953
HTML CSS JS
HTML显示日期时间代码 - [js 特效代码]
热门推荐
Arthur0088的专栏
12-29 5万+
一种： 兼容FireFox的当前时间的JS脚本当前时间document.getElementById(time).innerHTML=new Date().toLocaleString()+ 星期+日一二三四五六.charAt(new Date().getDay());setInterval("document.getElementById(t
如何在html网页中加入”时钟显示“特效
05-25
可以通过使用JavaScript来实现在HTML网页中添加时钟显示特效。以下是一个简单的例子： 1. 在HTML中添加一个显示时间的容器： ``` <div id="clock"></div> ``` 2. 在JavaScript中编写时钟代码： ``` function showTime() { var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); var session = "AM"; if (h == 0) { h = 12; } if (h > 12) { h = h - 12; session = "PM"; } h = (h < 10) ? "0" + h : h; m = (m < 10) ? "0" + m : m; s = (s < 10) ? "0" + s : s; var time = h + ":" + m + ":" + s + " " + session; document.getElementById("clock").innerText = time; document.getElementById("clock").textContent = time; setTimeout(showTime, 1000); } showTime(); ``` 3. 将JavaScript代码插入到HTML中： ``` <script> // JavaScript代码 </script> ``` 这样就可以在HTML网页中添加时钟显示特效了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值