日历HTML代码

最新推荐文章于 2023-05-29 10:23:16 发布
最新推荐文章于 2023-05-29 10:23:16 发布
阅读量1.7w 收藏 8
点赞数 1
分类专栏： 01 Html 文章标签： 日历 html calendar function javascript border

参考图片:



<HTML>
<title>十分漂亮实用的月历-时间日期类特效-网页特效代码-鸿新网—分享不一样的网络资源、让您不再为找资源而烦恼！</title>
<HEAD>
<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("<TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' ALIGN='CENTER' BGCOLOR='#0080FF'>")
document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' 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:9pt;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:9pt;Color:White'>日</FONT></TH>");
document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>");
document.writeln("</TR><TR>");
column = 0;
for (i=0; i<startDay; i++) {
document.writeln("\n<TD><FONT STYLE='font-size:9pt'> </FONT></TD>");
column++;
}
for (i=1; i<=nDays; i++) {
if (i == thisDay) {
document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9pt;Color:#ffffff'><B>")
}
else {
document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;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:9pt;Color:#ffffff'>")
document.writeln("现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></TD></TR></TABLE>")
document.writeln("</TD></TR></TABLE></FORM>");
}
</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 BACKGROUND="bg1.jpg"
onLoad="startclock(); timerONE=window.setTimeout" TEXT="#000000" TOPMARGIN="0">
<B><DIV ALIGN="center"></DIV>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write("<BR><BR><BR><BR>")
calendar();
//-->
</SCRIPT>
</B></P>
<CENTER><FONT COLOR="#9999FF"><B>很漂亮的月历</B></FONT>
</CENTER>
</BODY>
</HTML>


passport_daizi
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html日历修改,HTML精美日历插件
weixin_34524284的博客
06-03 1392
Html精美日历插件，包括日期选择，日期查看，星期查看等等功能。文章末尾附有演示地址。先看看效果图：源代码：varCalendarHandler={currentYear:0,currentMonth:0,isRunning:false,initialize:function(){$calendarItem=this.CreateCalendar(0,0,0);$("#...
Html日历代码
06-21
Html日历代码
万年历的代码
yun039018的博客
05-29 261
上一月</button><button id="nav7" onclick="zz()">下一月</button><button id="fan" onclick="oo()">返回今天一</td><td class="e3">二</td><td class="e3">三</td><td class="e3">四</td><td class="e3">五
JAVA 海啸_JAVA日历
weixin_35466750的博客
03-05 164
var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);var days = new Array("日","一", "二", "三","四"...
HTML+CSS+JavaScript实现简单的日历效果
apple_54470279的博客
04-06 5547
初学前端花了一下午写了一个简单的日历效果： 可以选择按月或者按年切换，当前日期会有绿色的背景显示， 所有的日期都会正确的对应星期几。 所有代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单日历效果</title> <style> * { ...
php html5日历添加事件,javascript html实现网页版日历代码
weixin_35720393的博客
03-11 650
本文实例为大家分享了网页版日历代码，供大家参考，具体内容如下效果图：实现代码：var my = new Date();function showc() {var k=1;var j=1;var today;var tomonth;var theday=1;//日期var max;var temp;var tempday;//这个月第一天的星期document.write ("" + my.getF...
日历 利用js制作Html日历插件 可在日历里面根据需求插入数据
fang5211的博客
07-06 1640
可修改的日历插件
HTML日历源代码
03-07
HTML日历源代码
PHP 简单日历实现代码
10-29
写文件系统的时候看中了个国外的HTML模板...上面有个日历,就想用PHP写出来...
calendar-js:日历类。 使用CSS Grid Layout布局生成一年或一个月的日历HTML代码
05-08
使用CSS Grid Layout布局生成一年或一个月的日历HTML代码。内容执照 要求jQuery的支持CSS网格布局规范（级别1）的Web浏览器： 谷歌浏览器> = 57 Mozilla Firefox> = 52 苹果Safari> = 10.1 Microsoft Edge> = 16 ...
基于HTML5的web版日历
12-23
基于HTML5的web版日历
自己编码实现HTML显示日历
09-04
自己编码实现点击文本框，弹出日期进行选择，主要技术HTML+JS，供学习和参考
HTML5手机端万年历日历特效代码
03-20
HTML5手机端万年历日历代码是一款HTML5响应式带农历的手机移动端万年历日历代码。
HTML页面日历插件
真皮的博客
01-22 3339
web页面显示日历插件。如下图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body, td, .p1, .p2, .i { font-family: arial } body { margin: 6px 0 0 0; ba
js怎么制作html的主题,js+html制作简单日历的方法
weixin_30345333的博客
05-31 244
新手一枚，不会写什么高大上的博文，一些平时做的小练习，献丑代码：无标题文档* {margin: 0;padding: 0}#calendar {width: 210px;margin: 100px auto;overflow: hidden;border: 1px solid #000;padding: 20px;position: relative}#calendar h4 {text-alig...
html 日历系统 源码,calendar.html
weixin_39831705的博客
06-19 633
Full Calendar - Bootstrap后台管理系统模版Ace下载try{ace.settings.check('navbar' , 'fixed')}catch(e){}Ace Admin44 Tasks to completeSoftware Update65%Hardware Upgrade35%Unit Testing15%Bug Fixes90%See tasks with d...
jquery表格日历写入html代码,基于jQuery日历插件制作日历
weixin_35997054的博客
06-03 397
来看下最终效果图吧：是长得丑了一点，不要吐槽我-。-首先来说说这个日历主要的制作逻辑吧：·一个月份最多有31天，需要一个7X6的表格去装载·如果知道了某个月份1号是星期几，这个月份有多少天，一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*)·加上一些控件让用户可以方便操作吧(比如可以输入年份、月份，可以点击选择年份、月份)新建一个html文件，html结构：日一二三四五六再加点样式进去，打开...
jQuery日历记事插件SimpleCalendar（附源代码）
liu_chenglong的博客
11-20 2129
二期修改SimpleCalendar为日历记事插件，并修复多个bug，带农历、节假日。 一、效果图： 二、Simple-Calendar插件的使用方法 1、引入资源 (1). 使用日历插件前首先要引用资源：JS和CSS 说明：由于提示需要用到弹框插件，这里选择了项目已带的插件layui。 <!--引入css--> <link rel="styleshe...
jquery表格日历写入html代码,简单的日历记事本jQuery插件e-calendar(带样式美化)
weixin_33935636的博客
06-03 692
e-calendar是记录或设置指定日期事件的一款jQuery插件，类似于工作备忘录的功能。使用教程：1、引入e-calendar插件2、HTML代码3、参数配置weekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], /*星期*/months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', '...
写一个日历html代码
最新发布
09-25
这是一个简单的日历HTML代码示例。代码中通过使用HTML的table标签来创建一个包含日期的表格。首先定义了一些基本的CSS样式，包括设置边框、单元格宽高和居中对齐等。然后，使用table、tr和td标签来构建表格的行和列...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值