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


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 09 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JS中Location使用详解
May 12 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
JS实现纸牌发牌动画
Jan 19 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笔试题
2009/08/04 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
javascript实现的listview效果
2007/04/28 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
python读写json文件的简单实现
2017/04/11 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
Python根据成绩分析系统浅析
2019/02/11 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Python实现图像的垂直投影示例
2020/01/17 Python
浅谈Python 参数与变量
2020/06/20 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
护理实习生带教计划
2015/01/16 职场文书
2016教师节感恩话语
2015/12/09 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书