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


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 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
js opener的使用详解
Jan 11 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
VOLVO车载收音机
2021/03/02 无线电
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php数组使用规则分析
2015/02/27 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP进程通信基础之信号
2017/02/19 PHP
js验证表单第二部分
2006/11/25 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
webpack之devtool详解
2018/02/10 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
vue使用echarts画组织结构图
2021/02/06 Vue.js
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python学生成绩管理系统简洁版
2020/04/05 Python
pandas通过loc生成新的列方法
2018/11/28 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
倡导文明标语
2014/06/16 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
JavaScript 反射学习技巧
2021/10/16 Javascript