纯jsp实现的倒计时动态显示效果完整代码

本文实例讲述了纯jsp实现的倒计时动态显示效果代码。分享给大家供大家参考，具体如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div id="showTimes"></div>
<%
 long current_time=System.currentTimeMillis();
 long end_time=1337875200000l;
 long time=end_time-current_time;
 %>
<script>
var second = <%= time / 1000%>; // 剩余秒数
// 写一个方法，将秒数专为天数
var toDays = function(){
 var s = second % 60; // 秒
 var mi = (second - s) / 60 % 60; // 分钟
 var h = ((second - s) / 60 - mi ) / 60 % 24; // 小时
 var d = (((second - s) / 60 - mi ) / 60 - h ) / 24 // 天
return "剩余：" + d + "天" + h + "小时" + mi + "分钟" + s + "秒";
}
//然后写一个定时器
window.setInterval(function(){
 second --;
 document.getElementById("showTimes").innerHTML = toDays ();
}, 1000);
</script>

希望本文所述对大家JSP程序设计有所帮助。

赞 (0)

相关推荐

  • JS自动倒计时30秒后按钮才可用(两种场景)

    JS自动倒计时30秒后按钮才可用(两种场景)

    展示效果图: WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比如在收取手机验证码时允许用户在一定时间过后(未收到验证码的情况下)再次获取验证码.那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用. 查看演示 下载源码 应用场景1:用户注册时阅读完相关协议信息后才能激活按钮 某些网站注册时要求用户同意所谓的用户协议之类的信息,如果协议内容非常重要,有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活

  • 使用微信内嵌H5网页解决JS倒计时失效问题

    使用微信内嵌H5网页解决JS倒计时失效问题

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: <script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值,这里随便写写 var timer; fun

  • javascript同步服务器时间和同步倒计时小技巧

    javascript同步服务器时间和同步倒计时小技巧

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间.同步倒计时,却不占用服务器太多资源,下面我给写实现的思路: 第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页

  • js实现点击获取验证码倒计时效果

    js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

  • 微信公众号支付H5调用支付解析

    微信公众号支付H5调用支付解析

    最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付   需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/             那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.q

  • 微信支付如何实现内置浏览器的H5页面支付

    因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号,申请开通支付,这个很简单,自行百度 申请好之后 在微信公众平台页面的"微信支付"页面中的"开发配置"Tab上配置"支付授权目录","测试授权目录","测试白名单" 在微信公众平台页面的"开发者中心"中找到"AppID(

  • js代码实现点击按钮出现60秒倒计时

    js代码实现点击按钮出现60秒倒计时

    比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

  • 微信支付H5调用支付详解（java版）

    微信支付H5调用支付详解（java版）

    最近项目需要微信支付,然后看了下微信公众号支付,,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付  需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/ 那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.qq.com/wiki/d

  • js倒计时抢购实例

    js倒计时抢购实例

    本文实例为大家分享了JavaScript实现限时抢购,供大家参考,具体代码如下 运行效果图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"

  • 纯jsp实现的倒计时动态显示效果完整代码

    本文实例讲述了纯jsp实现的倒计时动态显示效果代码.分享给大家供大家参考,具体如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <div id="showTimes"></div> <% long current_time=System.currentTimeMillis(); long e

  • vue+elementUI封装一个根据后端变化的动态table(完整代码)

    vue+elementUI封装一个根据后端变化的动态table(完整代码)

    实现了自动生成和插槽两个方式,主要把 el-table 和el-pagination封装在一起 效果图: 使用组件,启用自动生成 :auto="true" 自动生成-编辑 (包括请求已经实现了)新增和删除也是一样 ps:如有额外的按钮可以用插槽实现 查询的时候,只需要多返回下面数据,就可以自动生成列,和对应操作按钮 目录 table.vue <template> <div> <el-row v-if="auto"> <el-

  • 纯JSP实现的简单登录示例

    本文实例讲述了纯JSP实现的简单登录的方法.分享给大家供大家参考,具体如下: 文件共有四个web.xml.login.jsp.logout.jsp.welcome.jsp四个文件 测试环境:Tomcat 6.0.x 假设项目名称是LoginSample,我的目录结构是这样的 ...\webapps\LoginSample\WEB-INF\web.xml ...\webapps\LoginSample\login.jsp ...\webapps\LoginSample\logout.jsp ...

  • JSP使用JDBC完成动态验证及采用MVC完成数据查询的方法

    本文实例讲述了JSP使用JDBC完成动态验证及采用MVC完成数据查询的方法.分享给大家供大家参考.具体如下: 一.目标: ① 掌握JDBC链接数据库的基本过程: ② 掌握使用JDBC进行数据查询. 二.主要内容: ① 在上一次的实例基础上,通过连接数据库完成用户登录功能,介绍JDBC的基本用法: ② 通过显示所有用户信息进一步介绍JDBC的用法和查询结果的处理. 1.JDBC概念 Java Database Connectivity的缩写,用于连接Java应用程序与各种关系数据库的标准接口.对于

  • JSP实现的简单分页显示效果代码

    本文实例讲述了JSP实现的简单分页显示效果代码.分享给大家供大家参考,具体如下: <%@ page contentType="text/html;charset=gb2312" %> <%@ page language="java" import="java.sql.*" %> <script language="javascript"> function newwin(url) { var

  • JSP静态导入与动态导入使用详解

    JSP静态导入(JSP指令标记include) JSP页面第一次被请求时,会被JSP引擎转译成Servlet的Java文件,然后再被编译成字节码文件执行.JSP指令标记为JSP页面转译提供整个页面的相关信息. include指令用于在JSP页面静态插入一个文件,被插入的文件可以是JSP页面.HTML页面.文本文件或一段Java代码.使用了include指令的JSP页面在转换成Java文件时,将被插入的文件在当前JSP页面出来该指令的位置做整体的插入,合并成一个新的JSP页面,然后JSP引擎再将这

  • android实现倒计时动态圈

    本文实例为大家分享了android实现倒计时动态圈的具体代码,供大家参考,具体内容如下 效果是这样,没动图: 布局: <LinearLayout android:layout_width="wrap_content" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:layout_centerInParent="t

  • 纯JSP+DWR实现三级联动下拉选择菜单实现技巧

    网上看到一些例子,对于一个简单的三级联动,都加上什么Struts, Hibernate诸如此类的框架.这个Ajax联动殊不知和这些框架有什么关系,一个小Demo干嘛整得那么大. 今天我做了一个dwr+jsp做的例子. web.xml: 复制代码 代码如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.s

  • js+div+css下拉导航菜单完整代码分享

    js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • JavaWeb开发之模仿知乎首页完整代码

    闲来无事,就根据知乎的首页,参考了一些资料模拟写了下,包含了动态的背景,以及登录和注册功能 登录这里使用的是spring security 注册是ajax发送的 具体代码很简单,一看就知道,包含了数据的检查等 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/j

随机推荐