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


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 相关文章推荐
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
vue实现图片预览组件封装与使用
Jul 13 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+java实现自动新闻滚动窗口
2006/10/09 PHP
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
php判断变量类型常用方法
2012/04/24 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
json的使用小结
2016/06/08 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
py-charm延长试用期限实例
2019/12/22 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python colormap库的安装和使用详情
2020/10/06 Python
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
中职应届生会计求职信
2013/10/23 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
公司投资建议书
2014/05/16 职场文书
农村门前三包责任书
2014/07/25 职场文书
仲裁协议书
2014/09/26 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
放弃继承权公证书
2015/01/23 职场文书
雨中的树观后感
2015/06/03 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python