<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

  protected void Button1_Click(object sender, EventArgs e)

  {

    Response.Write("你已经交卷。");

    //代码进行处理，跳转到

  }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

  <title></title>

  <script type="text/javascript">

    var overDate = 0.004 //设置要倒计时的小时数

    EndTimeMsg = overDate * 60 * 60

    function show() {

      h = Math.floor(EndTimeMsg / 60 / 60);

      m = Math.floor((EndTimeMsg - h * 60 * 60) / 60)

      s = Math.floor((EndTimeMsg - h * 60 * 60 - m * 60))

      document.getElementById("HH").innerHTML = h

      document.getElementById("MM").innerHTML = m

      document.getElementById("SS").innerHTML = s

      EndTimeMsg--;

      if (EndTimeMsg <= 10 && EndTimeMsg > 9) {

        alert(s + " 后将自动交卷");

        document.getElementById("SS").innerHTML = s

        document.getElementById("OK").innerHTML = " 后将自动交卷"

      }

      if (EndTimeMsg < 0) {

        document.getElementById('<%=Button1.ClientID %>').click();

      }

    }

    setInterval("show()", 1000)

  </script>

</head>

<body>

  <form id="form1" runat="server">

  <div><strong id="HH"></strong>时 <strong id="MM"></strong>分 <strong id="SS"></strong>

    秒<strong id="OK" style="color: red"></strong> </div>

  <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="交卷" />

  </form>

</body>

</html>

　　

WEB 倒计时的更多相关文章

  1. 原创：微信小程序+WEB使用JS实现注册【60s】倒计时功能

    1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubm ...

  2. web前端处理订单待支付倒计时计算显示问题

    在商城类项目的时候,有很多待支付的订单,有时候在订单列表页面会分别显示倒计时,就是页面会有很多倒计时的订单. 处理方法: 1.调用后端接口拿到所有的订单,获取所有的倒计时订单,获取到期时间(尽量时间戳 ...

  3. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  4. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  5. 20个非常棒的jQuery倒计时脚本

    使用jQuery倒计时插件可能是最简单最好的方式添加动态和交互式倒数计时器到您的网站上.我相信你已经注意到了,例如倒计时功能运行网站,显示倒计时,直到一个大事件.当网站正在维护,告诉用户什么时候回来, ...

  6. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. js圣诞节倒计时网页

    在线预览:http://keleyi.com/keleyi/phtml/jstexiao/17.htm 以下是代码: <!DOCTYPE html> <html xmlns=&quo ...

  8. jQuery倒计时插件

    倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...

  9. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

随机推荐

  1. poj3274 Gold Balanced Lineup(HASH)

    Description Farmer John's N cows (1 ≤ N ≤ 100,000) share many similarities. In fact, FJ has been abl ...

  2. 使用Oracle(SQL Plus)

    error: connection as sys should be as SYSDBA or SYSOPER 用户名 :sys 密码:  自己设定的database:ORCLconnect as : ...

  3. 15分XX秒后订单自动关闭（倒计时）

    //订单记录 function get_order(){ //请求订单ajax方法 XX.send_api("method",{data},function(){ var date ...

  4. 三、SpringBoot-application.properties配置文件和application.yml配置文件

    其实SpringBoot的配置文件有.properties和.yml两种形式,两种配置文件的效果类似,只不过是格式不同而已,孩儿们可以根据下面这几种张截图,通过对比端口号的配置,以及连接SQLServ ...

  5. stream.fail() eof() EOF

    ifstream infile("student.dat"); while((c=infile.get())!=EOF){}    //EOF的值是-1 但在 #include&l ...

  6. Struts2学习第一天--Struts2的概述、Struts2的入门、Struts2常见的配置、Struts2的Action的编写

    action的name要与访问路径对应.hello.action. 加到tomcat启动 访问:http://localhost:8080/struts2-1/demo1/demo1.jsp 改为su ...

  7. postgreSQL PL/SQL编程学习笔记（六）——杂七杂八

    1 PL/pgSQL Under the Hood This part discusses some implementation details that are frequently import ...

  8. Python描述符深入理解

    Python的描述符乍眼看去简单,但是细节方面如果不注意容易掉坑,总结以下几个坑,以作备忘,先看代码: class D: def __get__(self, inst, owner): if inst ...

  9. Node.js的mysql执行多表联合查询

    数据库(test)中的表结构(admin.user) //执行多表结合查询 var mysql = require('mysql'); var connection = mysql.createCon ...

  10. 简单了解树形DP

    今天在B站看了一个树形DP教学视频有所收获,做一个小小的总结 AV号和链接在这:av12194537 那么先介绍一下树形DP 树形DP就是在树这个特殊的数据结构上进行的DP.有两种方向:自顶向下和自底 ...