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


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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
论JavaScript模块化编程
Mar 07 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
js瀑布流布局的实现
Jun 28 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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调用Oracle存储过程
2006/10/09 PHP
php二维码生成以及下载实现
2017/09/28 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
javascript中的this详解
2014/12/08 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python环境变量设置方法
2016/08/28 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python导入pandas具体步骤方法
2019/06/23 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
组织关系转移介绍信
2014/01/16 职场文书
班风口号
2014/06/18 职场文书
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android