<!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. PIL成就你的自信之路

    1.强大的PIL库 在Python中,有一个优秀的图像处理框架,就是PIL库,本博文会分模块,介绍PIL库中的各种方法,并列举相关例子. 学习总结:PIL库可以让我们得到更多的需求,以此来满足我们的需 ...

  2. 初次接触之R语言

    一.什么是R? 最受欢迎的数据分析和可视化平台之一. 其他分析平台:Excel.SPSS.SAS 二.为什么选择R? 免费.支持WINDOWS/MAC OS/Linux. 开源

  3. Excel大批量数据导出

    package com.tebon.ams.util; import lombok.extern.slf4j.Slf4j;import org.apache.poi.openxml4j.excepti ...

  4. 熟悉HBase基本操作

    1. ssh localhost start-dfs.sh start-hbase.sh hbase shell create 'Student', 'S_No', 'S_Name', 'S_Sex' ...

  5. [Swift]LeetCode530. 二叉搜索树的最小绝对差 | Minimum Absolute Difference in BST

    Given a binary search tree with non-negative values, find the minimum absolute difference between va ...

  6. [Swift]LeetCode936. 戳印序列 | Stamping The Sequence

    You want to form a target string of lowercase letters. At the beginning, your sequence is target.len ...

  7. Kubernetes 笔记 05 yaml 配置文件详解

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...

  8. 【转】kali配置--修改IP和DNS

    修改IP地址 1 编辑文件 nano /etc/network/interfaces 2 在选择静态IP或DHCP,编辑文件内容并保存退出 (1)静态IP: ``` #Loop回环地址 auto lo ...

  9. Carousel轮播图

     <div id="carousel-example-generic" class="carousel slide" data-ride="ca ...

  10. 『Raid 平面最近点对』

    平面最近点对 平面最近点对算是一个经典的问题了,虽然谈不上是什么专门的算法,但是拿出问题模型好好分析一个是有必要的. 给定\(n\)个二元组\((x,y)\),代表同一平面内的\(n\)个点的坐标,求 ...