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


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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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中对数据库操作的封装
2006/10/09 PHP
在PHP中使用redis
2013/11/04 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
短信提示使用 特效
2007/01/19 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python Timer 类使用介绍
2020/12/28 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
高三英语教学计划
2015/01/23 职场文书
2015年采购部工作总结
2015/04/23 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android