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


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 parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
vuex 的简单使用
Mar 22 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
微信小程序用户登录和登录态维护的实现
Dec 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判断手机访问还是电脑访问示例分享
2014/01/20 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP进程同步代码实例
2015/02/12 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
node.js中npm包管理工具用法分析
2020/02/14 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基于Python检测动态物体颜色过程解析
2019/12/04 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
python实现PCA降维的示例详解
2020/02/24 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
教师考核评语
2014/04/28 职场文书
医德考评自我评价
2014/09/14 职场文书
2014年工程工作总结
2014/11/25 职场文书
关于教师节的广播稿
2015/08/19 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server