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


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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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实现获取客户端IP并获取IP信息
2015/03/17 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
解决yum对python依赖版本问题
2019/07/05 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
高考备战决心书
2014/03/11 职场文书
国庆节慰问信
2015/02/15 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
vue实力踩坑之push当前页无效
2022/04/10 Vue.js