<!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. getMemory的经典例子

    //NO.1:程序首先申请一个char类型的指针str,并把str指向NULL(即str里存的是NULL的地址,*str为NULL中的值为0),调用函数的过程中做了如下动作:1申请一个char类型的指 ...

  2. FFmpeg 结构体学习(三)： AVPacket 分析

    在上文FFmpeg 结构体学习(二): AVStream 分析我们学习了AVStream结构体的相关内容.本文,我们将讲述一下AVPacket. AVPacket是存储压缩编码数据相关信息的结构体.下 ...

  3. [Swift]LeetCode83. 删除排序链表中的重复元素 | Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. Example 1 ...

  4. [Swift]LeetCode240. 搜索二维矩阵 II | Search a 2D Matrix II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  5. [Swift]LeetCode784. 字母大小写全排列 | Letter Case Permutation

    Given a string S, we can transform every letter individually to be lowercase or uppercase to create ...

  6. [Swift]LeetCode844. 比较含退格的字符串 | Backspace String Compare

    Given two strings S and T, return if they are equal when both are typed into empty text editors. # m ...

  7. [Swift]LeetCode998. 最大二叉树 II | Maximum Binary Tree II

    We are given the root node of a maximum tree: a tree where every node has a value greater than any o ...

  8. dpkg: 处理软件包 xxx (--configure)时出错 解决办法

    第一步:备份 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bk 第二步:新建 $ sudo mkdir /var/lib/dpkg/info 第三步 ...

  9. Linux自启动执行脚本方法

    1. 在/etc/rc.d/init.d/下创建脚本,要遵守service script的标准: 例如: vi /etc/rc.d/init.d/gfs #!/bin/bash#case " ...

  10. cmd命令窗口的快速选中复制黏贴

    右击"窗口标题栏",选择属性,进入属性面板: 在"选项"面板勾选编辑选项下的"快速编辑模式"; 点击确认. 这时鼠标左键就有了选中功能,可以 ...