JS实现浏览器状态栏显示时间的方法


Posted in Javascript onOctober 27, 2015

本文实例讲述了JS实现浏览器状态栏显示时间的方法。分享给大家供大家参考,具体如下:

以前做个人主页的时候,总喜欢把自己的网页搞的很个性,在网上做跑马灯文字,在状态栏显示问候语,或者在状态栏添加时间显示,本代码就是实现了状态栏显示当前时间的物资,火狐没测度,IE下效果完美。

运行效果截图如下:

JS实现浏览器状态栏显示时间的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>状态栏时间显示</TITLE>
</HEAD>
<script language="JavaScript">
var timerID = null;
var timerRunning = false;
function stopclock (){
  if(timerRunning)
    clearTimeout(timerID);
  timerRunning = false;
}
function showtime () {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds()
  var timeValue = " " + ((hours >12) ? hours -12 :hours)
  timeValue += ((minutes < 10) ? ":0" : ":") + minutes
  timeValue += ((seconds < 10) ? ":0" : ":") + seconds
  timeValue += (hours >= 12) ? " 下午" : " 上午"
  window.status = timeValue;
  timerID = setTimeout("showtime()",1000);
  timerRunning = true;
}
function startclock () {
  stopclock();
  showtime();
}
</script>
<body bgcolor="#336699" topmargin="0" leftmargin="0" onLoad="startclock()">请看左下角!状态栏有时间显示!</BODY>
</HTML>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 #Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 #Javascript
jQuery无刷新分页完整实例代码
Oct 27 #Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 #Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 #Javascript
JavaScript编程中window的location与history对象详解
Oct 26 #Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 #Javascript
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
最新pycharm安装教程
2020/11/18 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
班风学风建设方案
2014/05/06 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
2015年中秋寄语
2015/07/31 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
排查MySQL生产环境索引没有效果
2022/04/11 MySQL