<!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. 实验5 Spark SQL编程初级实践

    今天做实验[Spark SQL 编程初级实践],虽然网上有答案,但都是用scala语言写的,于是我用java语言重写实现一下. 1 ．Spark SQL 基本操作将下列 JSON 格式数据复制到 Li ...

  2. 百度AI

    官网:http://ai.baidu.com/tech/face SDK:https://ai.baidu.com/sdk#bfr API说明 百度Face SDK Android 版是一种面向 An ...

  3. 最新版Navicat Premium12 中文破解版 安装激活

    对于PHPer 来说 Navicat Premium  简直就是神器有木有,反正我是这样觉得的,昨天刚更新了最新版本 Navicat Premium 12 ,官网是免费试用14 天的,肿么能行呢,我们 ...

  4. PHP GZIP压缩+BASE64

    <?php $str = ' {"pf":"AC25c","dt":"2017-02-04 09:49:49",& ...

  5. 【转载】CSS3 文字溶解效果

    代码如下: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <ti ...

  6. [Swift]LeetCode1009. 十进制整数的补码 | Complement of Base 10 Integer

    Every non-negative integer N has a binary representation.  For example, 5 can be represented as &quo ...

  7. 4.Django模板语言和分页

    继承 extends 子版只能继承一个父模板 1.父模板 master.html <!DOCTYPE html> <html lang="en"> < ...

  8. knockoutjs 上自己实现的flux

    在knockoutjs 上实现 Flux 单向数据流 状态机,主要解决多个组件之间对数据的耦合问题. 一.其实简单 flux的设计理念和实现方案,很大程度上人借鉴和参考了Vuex的实现,只是简化了某些 ...

  9. InstallShield Limited Edition使用说明

    从Visual Studio 2012开始,微软就把自家原来的安装与部署工具彻底废掉了,转而让大家去安装使用第三方的打包工具“InstallShield Limited Edition for Vis ...

  10. 并发编程（二）—— CountDownLatch、CyclicBarrier和Semaphore

    本文将讲解CountDownLatch,CyclicBarrier和Semaphore这三个并发包里面的辅助类. CountDownLatch 正如每个Java文档所描述的那样,CountDownLa ...