【温故而知新-Javascript】时间效果(显示当前时间、显示当前日期、显示页面停留时间、倒计时)

简介:

1.显示当前时间

复制代码
<body onload="showtime()">
<div>当前时间:
<span id="clock"></span >
</div>
<script type="application/javascript">
function showtime()//创建函数
{
    var nowTime = new Date();//创建时间对象实例
    var hours = nowTime.getHours();//获取当前小时数
    var minutes = nowTime.getMinutes();//获取当前分钟数
    var seconds = nowTime.getSeconds();//获取当前秒数
    var timer = " "+((hours>12)?hours-12:hours);//将小时数质赋予变量timer
    timer +=((minutes<10)?"0:":":")+minutes;//将分钟数值赋予变量timer
    timer += ((seconds<10)?"0:":":")+seconds;//将秒数值赋予变量timer
    timer +=" "+((hours>12)?"pm":"am");//将字符am或pm赋予变量timer
    document.getElementById('clock').innerHTML =timer;
    setTimeout("showtime()",1000);
}
</script>
</body>
复制代码

 

2.显示当前日期

复制代码
<body onload="initArray()">
<div> <span id="todayIs"></span></div>
<script type="application/javascript">
function initArray()
{
    var today = new Date();
    var d = new Array(
    "星期日","星期一","星期二","星期三","星期四","星期五","星期六")
    //如果为2014年,getYear返回2014-1900=114,getFullYear返回2014
    var hh="<font color='#FBAE66' style='font-size:9pt;font-family:宋体'>今天是: "+
today.getFullYear()+""+(today.getMonth()+1)+""+today.getDate()+""+d[today.getDay()]+"</font>";
document.getElementById('todayIs').innerHTML = hh;
}
</script>
</body>
复制代码

 

3.显示页面停留时间

复制代码
<body>
<div>当前页面停留时间:<span id="yy004" >0时0分0秒</span></div>
<script type="text/javascript">
var sec =0;
var minu=0;
var hou=0;
//每隔一秒刷新一次
window.setTimeout("uupdate()",1000);

function uupdate()
{
    sec++;    
    if(sec==60)
    {
        sec =0;
        minu +=1;
    }
    if(minu==60)
    {
        minu=0;
        hou+=1;
    }
    var ss04 =hou+ ""+minu+""+sec+"";
    document.getElementById('yy004').innerHTML=ss04;
    window.setTimeout("uupdate()",1000);
}
</script>
</body>
复制代码

 

4.倒计时

复制代码
<body>
<div id="yy005"></div>
<script type="application/javascript">
var nowDay = new Date();
var yyear = nowDay.getFullYear()+1;
var timeDate = new Date(yyear+"-01-01");
var date = timeDate.getTime()-nowDay.getTime();//获取剩余时间
//将剩余时间转换为剩余天数
var time = Math.floor(date/(1000*60*60*24)); 
var show005="";
if(time>=0)
{
    show005 = "现在离"+yyear+"年元旦还有:<font color='red'><b>"+time+"</b></font>天";
    document.getElementById('yy005').innerHTML=show005;
    
}
</script>
</body>
复制代码





本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/4059142.html,如需转载请自行联系原作者
目录
相关文章
|
10天前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
32 2
|
11月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
222 1
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
245 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
9月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
349 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
204 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
9月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
203 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
7月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
JavaScript 前端开发
分享12个效果精美的 JavaScript 倒计时脚本
  倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒计时。今天,在这篇文章中收集了12优秀的倒计时脚本,有一天你可能会用到的。 您可能感兴趣的相关文章 10套精美的免费网站后台管理系统模板 8个惊艳的 HTML5 ...
1558 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
245 2
|
11月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
164 1
JavaScript中的原型 保姆级文章一文搞懂