<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>网页计时器</title>

</head>

<body>

<input type="button" id="b1" value="阅览时间">

<script>

//判断是否小于0，如果小于，加60//

     function f(t) {

        if (t<0){

            a=t+60;

            return a

        }

        else {

            return t

        }

    }

//获取起始时间//

    var n_time_H=new  Date().getHours();

    var n_time_m=new  Date().getMinutes();

    var n_time_s=new  Date().getSeconds();

//获取变量//

    b1Elm=document.getElementById('b1');

    b1Elm.onclick=function () {

//获取当前时间//

     var c_time_H=new  Date().getHours();

    var c_time_m=new  Date().getMinutes();

    var c_time_s=new  Date().getSeconds();

//进行时间的计算//

    var temp_h=f(c_time_H-n_time_H);

    var temp_m=f(c_time_m-n_time_m);

    var temp_s=f(c_time_s-n_time_s);

//进行判断与输出//

    if (!temp_h)

        {

            if(!temp_m){

                alert('阅览时间:'+temp_s+'秒')

            }

            else{

                alert('阅览时间:'+temp_m+'分'+temp_s+'秒')

        }

        }

    else {

        alert('阅览时间:'+temp_h+'小时'+temp_m+'分'+temp_s+'秒')

    }

    }

</script>

</body>

</html>
运行截图：

 

js之制作网页计时器的更多相关文章

  1. 20行js代码制作网页刮刮乐

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) &l ...

  2. 【原生JS】制作网页头部刷新进度条

    之前的某次番啬看到油管上有这么一个进度条,当时觉得挺好玩,一直想着做一个试试,刚才弄了一下写了一个不算太好看的简陋版本,哈哈. (本博客刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲 ...

  3. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  4. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  5. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  6. #3使用html+css+js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

  7. Cleaver快速制作网页PPT

    原文首发链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/ 写在开始之前 互联网时代,以浏览器作为入口,已经有越来越多 ...

  8. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  9. three.js 3d三维网页代码加密的实现方法

    http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...

随机推荐

  1. web测试实践——day01

    一.任务进展情况 主要是找寻网站的bug,分析bug的严重程度.同时找了本专业的同学进行博客园系统的使用. 二.存在的问题 由于上线的网站做的比较完善,导致找寻bug比较困难. 三.解决方法 对此我们 ...

  2. 微信小程序 + mock.js 实现后台模拟及调试

    一.创建小程序项目 mock.js 从 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下载 api.js:配置模拟数据和后 ...

  3. 【RL-TCPnet网络教程】第16章 UDP用户数据报协议基础知识

    第16章      UDP用户数据报协议基础知识 本章节为大家讲解UDP(User Datagram Protocol,用户数据报协议),需要大家对UDP有个基础的认识,方便后面章节UDP实战操作. ...

  4. [Swift]LeetCode225. 用队列实现栈 | Implement Stack using Queues

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  5. HBase之CF持久化系列(续1)

    这一节本来打算讲解HRegion的初始化过程中一些比较复杂的流程.不过,考虑前面的博文做的铺垫并不够,因此,在这一节,我还是特意来介绍HBase的CF持久化.关于这个话题的整体流程性分析在博文< ...

  6. Linux 文件夹压缩命令总结

    tar命令 解包:tar zxvf FileName.tar 打包:tar czvf FileName.tar DirName gz命令 解压1:gunzip FileName.gz 解压2:gzip ...

  7. 【Storm篇】--Storm中的同步服务DRPC

    一.前述 Drpc(分布式远程过程调用)是一种同步服务实现的机制,在Storm中客户端提交数据请求之后,立刻取得计算结果并返回给客户端.同时充分利用Storm的计算能力实现高密度的并行实时计算. 二. ...

  8. Hive篇--相关概念和使用二

    一.基本概念 Hive分桶: 1.概念 分桶表是对列值取哈希值的方式,将不同数据放到不同文件中存储.对于hive中每一个表.分区都可以进一步进行分桶.(可以对列,也可以对表进行分桶)由列的哈希值除以桶 ...

  9. 8.Django缓存和信号

    缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将某个views的返回值保存至内存或者memcache中, ...

  10. 采坑：python base64

    需求:  读取文本内容,对字符串进行base64加密 >>> str = 'aaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbbbbbbbbbb\nccc ...