特殊日期提示功能的实现方法


Posted in Javascript onJune 16, 2016

1.概述

在设计开发网站时,可以在页面中加入显示系统日期的功能,如果在显示系统日期的同时能够显示相应的节日,可以给网站浏览者提供帮助。

2.技术要点

实现特殊日期提示的功能,大致可分为以下几个步骤:

(1)创建Date()对象的实例,使用getYear()、getMonth(),getDate()、getDay()方法获取当前系统时间中有关年、月、日、星期的数据信息。

(2)使用getMonth()方法获取的月信息是从0开始计数的,所以要将月份对应的数据自动加1。

(3)使用getDay()方法获取的星期信息是数值型数据,需要使用数据对象Array将其转换为对应的文字信息。

(4)根据获取的月份和日判断显示的节日名称。

(5)将所有的数据组合并输出到浏览器上,需要使用<div>标记的innerHTML方法实现。

3.具体实现代码

(1)应用JavaScript编写特殊日期提示的函数datePrompt(),用于指定显示该特殊日期的<div>标记。提示特殊日期的自定义函数的代码如下:

<SCRIPT language="javascript">
<!--
function datePrompt(){
calendar = new Date(); //获取日期对象
day = calendar.getDay();
month = calendar.getMonth()+1; //获取月
date = calendar.getDate(); //获取日
year = calendar.getFullYear(); //获取4位的年
var dayname = new Array ("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var time=year +"年"+month+"月"+date + "日 "+dayname[day]+" "; //组合日期
var holiday="";
if ((month == 1) && (date == 1)) holiday="<font color=red>元旦";
if ((month == 5) && (date == 1)) holiday="<font color=red>国际劳动节";
if ((month == 5) && (date == 4)) holiday="<font color=red>青年节";
if ((month == 6) && (date == 1)) holiday="<font color=red>国际儿童节";
if ((month == 7) && (date == 1)) holiday="<font color=red>建党纪念日";
if ((month == 8) && (date == 1)) holiday="<font color=red>建军节";
if ((month == 10) && (date == 1)) holiday="<font color=red>国庆节";
if ((month == 12) && (date == 25)) holiday="<font color=red>圣诞节";
time=time+holiday;
clock.innerHTML=time; //显示系统日期,并进行特殊日期提示
}
//-->
</SCRIPT>

(2)在需要实时显示特殊日期时间的页面中<body>标记的onLoad事件中,调用刚刚编写的datePrompt()函数,并在该页面中适当的位置加入<div>标记,通过以下代码来调用自定义函数,关键代码如下:

<body onLoad="datePrompt()">
<td width="219" height="27" align="center" background="images/1.JPG"><div id="clock">
</div></td>

以上所述是小编给大家介绍的特殊日期提示功能的实现方法的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 #Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 #Javascript
客户端验证用户名和密码的方法详解
Jun 16 #Javascript
检查表单元素的值是否为空的实例代码
Jun 16 #Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 #Javascript
基于JS代码实现实时显示系统时间
Jun 16 #Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 #Javascript
You might like
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python修改操作系统时间的方法
2015/05/18 Python
python和ruby,我选谁?
2017/09/13 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python中return self的用法详解
2018/07/27 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
终端业务员岗位职责
2013/11/27 职场文书
自我鉴定怎么写
2014/01/12 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
平安建设工作方案
2014/06/02 职场文书
小学语文教研活动总结
2014/07/01 职场文书
同学聚会感言一句话
2015/07/30 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
redis cluster支持pipeline的实现思路
2021/06/23 Redis
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android