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


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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
Prototype Hash对象 学习
Jul 19 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
小程序分享模块超级详解(推荐)
Apr 10 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的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
初学JavaScript第二章
2008/09/30 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
js微信分享API
2020/10/11 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
Python中的index()方法使用教程
2015/05/18 Python
Python的re模块正则表达式操作
2016/05/25 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
详解Python 解压缩文件
2019/04/09 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
python logging 日志的级别调整方式
2020/02/21 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
法国在线药房:DoctiPharma
2020/10/21 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
实用的简历自我评价
2014/03/06 职场文书
个人授权委托书范文
2014/09/21 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
协议书范文
2015/01/27 职场文书
实习证明格式范文
2015/06/16 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android