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


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代码小结
Oct 14 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
node.js通过url读取文件
Oct 16 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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中数组定义的几种方法
2013/09/01 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python and、or以及and-or语法总结
2015/04/14 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
师德标兵事迹材料
2014/12/19 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
SQL注入详解及防范方法
2021/12/06 MySQL