<%@ 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. python 单双引号交替的json串

    单双引号交替的json串 1.常见的json串,类似于这种{"isSucess":true, "name":"yoyo", "st ...

  2. IOC AOP 设计模式

    IOC AOP 不是什么技术而是一种设计模式  学习 IOC AOP 其实是在学习一种思想. 1.IOC IOC其实是 将对象的创建和获取提取到外部.由外部IOC容器提供需要的组件. 看下面代码: p ...

  3. html5标签兼容低版本浏览器

    随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元 ...

  4. Graphic 完成文字缩放

    思路:将文字生成图片,再加载此图片伸缩至需要大小. 首先要获取文字的实际大小.宽度高度,再通过图片缩放就OK了 public static void DrawText() { Font f = , F ...

  5. android studio中使用recyclerview小白篇(三)

    继续接着昨天的来,昨天终于弄好了一个例子,但是那个没有点击事件, 需要自己添加,参照别人的例子,弄了个比较简单的,主要是改动myRecycleradatper.java中的部分. 增加如下的接口: / ...

  6. .NET中的程序集

    参考:http://blog.sina.com.cn/s/blog_7ade159d0102wmg9.html 程序集(Assembly,装配件,.NET程序集) 程序集是应用程序的部署单元,.NET ...

  7. .NET和C#的版本历史

    维基百科页面:https://en.wikipedia.org/wiki/.NET_Framework_version_history Versionnumber CLRversion Release ...

  8. 【转】C#控件——DataGridView单元格文本自动换行

    源地址:https://www.cnblogs.com/wangshenhe/archive/2012/07/25/2608324.html DataGridView是.NET开发中常用的控件,在开发 ...

  9. ubuntu 上安装支付宝安全插件不能运行问题

    1.在ubuntu的firefox浏览器中打开支付宝首页,不能登录,按照提示下载插件 aliedit.tar.gz 2.解压到某个文件夹下,有文件aliedit.sh, 运行 # sh aliedit ...

  10. rabbitMq使用学习笔记

    rabbitmq的工作原理: MQ全称为Message Queue,即消息队列, RabbitMQ是由erlang语言开发,基于AMQP(Advanced MessageQueue 高级消息队列协议) ...