<!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. git 服务器搭建与运用

    环境:CentOS 6 为了不影响后面的安装 安装依赖库 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-dev ...

  2. MongoDB 分片键的选择与案例

    MongoDB版本:3.6 一.分片键类别 1.升序片键 升序片键例如:日期时间字段.自增字段. 2.随机分发片键 随机分发片键例如:用户名.邮件名.UUID.MD5值或者是其它的一些没有规律的值的列 ...

  3. spring的定时器

    一:基于xml配置的方式 1:编写普通的pojo 类 package com.aflyun.web.task; import org.springframework.stereotype.Compon ...

  4. Trie 简介

    一.Trie简介 在计算机科学中,Trie,又称字典树.前缀树.单词查找树或键树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎 ...

  5. IntelliJ IDEA 使用 Git 并将 GitHub 作为远程代码仓库

    安装本地Git 官方下载地址:http://git-scm.com/downloads 不过这个地址一般下不动,我们可以选择在腾讯软件中心下载,速度很快. 腾讯软件中心的下载地址:https://pc ...

  6. [Swift]LeetCode697. 数组的度 | Degree of an Array

    Given a non-empty array of non-negative integers nums, the degreeof this array is defined as the max ...

  7. [Swift]LeetCode775. 全局倒置与局部倒置 | Global and Local Inversions

    We have some permutation Aof [0, 1, ..., N - 1], where N is the length of A. The number of (global) ...

  8. linux各个服务器的软件自启动

    首先你需要编写一个shell脚本,也就是启动app的,当然还应该有stop的脚本 这里贴出我的,因为每个人的服务安装路劲不同,故启动不同,仅供参考.如有雷同,纯属你智障 web服务器: 应用服务器: ...

  9. Python内置函数(23)——format

    英文文档: format(value[, format_spec]) Convert a value to a “formatted” representation, as controlled by ...

  10. 查询运营商的ip段

    查询运营商的ip段 所有的IP地址都是通过国际组织NIC(Network Information Center)统一分配的,目前世界上有三个这样的网络信息中心: InterNic: 负责美国及其他地区 ...