js+jsp页面，用定时器实现多个倒计时

已于 2022-10-12 17:46:21 修改
阅读量851 收藏 1
点赞数
分类专栏： 前端难点 项目实战 文章标签： servlet html java
于 2022-10-10 13:21:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amor_1998/article/details/127242689
版权

效果如图所示

css和html不做解释

js分为有两部分（一、实现右上角的时间变化  二、实现每个列表的倒计时）

一、实现右上角的时间变化

        1、使用 setInterval("time()",1000)，每隔1秒调用一次time（）

 该方法比较简单，就是分别获取天、时、秒，然后用拿到该div的id值，用innerHTMl改变text值

    function time() {
        var vWeek;
        vWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        var date =  new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var vWeek_s = date.getDay();
            document.getElementById("time").innerHTML=vWeek[vWeek_s]+' / '+dateState()+this.addZero(hours) + '：' + this.addZero(minutes) + '：' + this.addZero(seconds);
    };

    //小于10的拼接上0字符串
    function addZero(s){
        return s < 10 ? ('0' + s) : s;
    }
    //判断是上午、下午、晚上
    function dateState() {
        let date = new Date();
        if (date.getHours() >= 6 && date.getHours() < 12) {
            return "上午班 "
        } else if (date.getHours() >= 12 && date.getHours() < 18) {
            return "下午班 "
        } else {
            return "晚班 "
        }
    }

二、实现每个列表的倒计时

代码2.0版本

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2022/9/27
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="/assets/vendor/jquery/js/jquery-3.2.1.min.js"></script>
    <title>透析进度</title>
</head>

<style>
.mainpage{
    display: flex;
    flex-wrap: wrap;
    padding: 1%;
    background: #010D1B;
}
.header{
    display: flex;
    width: 100%;
    background-image: radial-gradient(circle at 0%, #010D1B ,#0F79A3, #010D1B);
    justify-content: center;
    position: relative;
    height: 50px;
    align-items: center;
}
.header-title{
    font-size: 29px;
    color: #60D3F0;
    font-family: PangMenZhengDao-3;
    font-weight: 400;
    /* line-height: 0px; */
    color: #60D3F0;
    text-shadow: 0px 3px 6px rgba(0 120 145 0.58);
    letter-spacing: 10px;
    opacity: 1;
    text-align: center;
}
.header-time{
    position: absolute;
    right: 2%;
    display: flex;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #B2DFE4;
}
.warp-item{
    width: 249px;
    height: 58px;
    border: solid 2px #0F79A3;
    margin: 4px;
    padding: 5px;
    /* font-weight: bold; */
    background-color: #0E2F58;
    border-radius: 12px;
    font-family: Microsoft YaHei;
    color: #fff;
}
.item-top{
    height: 27px;
    display: flex;
    flex-direction: row;
    font-size: 15px;
    justify-content: space-between;
    /* line-height: 25px; */
    align-items: center;

}
.item-status{
    color: #0F79A3;
}
.item-text{
    display: flex;
    font-weight: bold;
}
.item-bottom{
    height: 20px;
    display: flex;
    /* line-height: 14px; */
    align-items: center;
}
.item-progress{
    border-radius: 6px;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 7px;
    background-color: #3C4D6B;
}

.item-progress-bar,
.item-progress-bar-change{
    background-color: #1CAFFC;
    width: 80%;
    height: 5px;
    border-radius: 6px;
    margin: 1px;
}

.warp-item-off{
    width: 249px;
    height: 58px;
    border: solid 2px #0F79A3;
    margin: 4px;
    padding: 5px;
    /* font-weight: bold; */
    border-radius: 12px;
    font-family: Microsoft YaHei;
    background: #0F79A3;
    color: #fff;
}
.item-status-off{
    color: #26D08C;
}
.item-time,
.item-time-change{
    margin: 5px 7px;
    font-size: 13px;
}
.header-time img{
    height: 15px;
    width: 15px;
    margin: 0px 2px;
}

.bottom{
    color: #9BA0B6;
    font-size: 12px;
    font-weight: 400;
    background-color: #010D1B;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0px;
    padding: 0px 0px 15px 0px;
}
.item-status{
    width: 55px;
}
</style>

<body>
<div id="app">
    <div class="header">
        <div class="header-title">透析进度</div>
        <div class="header-time" >
            <img src="../../../assets/image/dialysis_progress/time.png" alt="">
            <div id="time"></div>
        </div>
    </div>
    <div class="mainpage">
<%--                     <div class="warp-item">--%>
<%--                             <div class="item-top">--%>
<%--                                 <div class="item-text">--%>
<%--                                     <div class="item-text-place">南二A厅</div>--%>
<%--                                     <div class="item-text-number">001</div>--%>
<%--                                     <div class="item-text-name">李二狗</div>--%>
<%--                                 </div>--%>
<%--                                 <div class="item-status-off">已下机</div>--%>
<%--                             </div>--%>
<%--                             <div class="item-bottom">--%>
<%--                                 <div class="item-progress">--%>
<%--                                     <div class="item-progress-bar"   style="width:30%" > </div>--%>
<%--                                 </div>--%>
<%--                                 <div class="item-time">01:21</div>--%>
<%--                             </div>--%>
<%--                     </div>--%>

        <c:forEach items="${result}" var="res" >
            <c:if test="${'3' eq res.state}">
                <div class="warp-item-off">
                    <div class="item-top">
                        <div class="item-text">
                            <div class="item-text-place">${res.message}</div>
                                <%--判断是什么透析状态--%>
                        </div>
                        <c:if test="${'0' eq res.state}">
                            <div class="item-status">未称重</div>
                        </c:if>
                        <c:if test="${'1' eq res.state}">
                            <div class="item-status">已称重</div>
                        </c:if>
                        <c:if test="${'2' eq res.state}">
                            <div class="item-status">透析中</div>
                        </c:if>
                        <c:if test="${'3' eq res.state}">
                            <div class="item-status-off">已下机</div>
                        </c:if>
                    </div>
                    <div class="item-bottom">
                        <c:if test="${'无法统计' ne res.time}">
                            <div class="item-progress">
                                <div class="item-progress-bar" style="width:${res.schedule}%"> </div>
                            </div>
                        </c:if>
                        <div class="item-time" >${res.time}</div>
                    </div>
                </div>
            </c:if>
            <c:if test="${'3' ne res.state}">
                <div class="warp-item">
                    <div class="item-top">
                        <div class="item-text">
                            <div class="item-text-place">${res.message}</div>
                                <%--判断是什么透析状态--%>
                        </div>
                        <c:if test="${'0' eq res.state}">
                            <div class="item-status">未称重</div>
                        </c:if>
                        <c:if test="${'1' eq res.state}">
                            <div class="item-status">已称重</div>
                        </c:if>
                        <c:if test="${'2' eq res.state}">
                            <div class="item-status">透析中</div>
                        </c:if>
                        <c:if test="${'3' eq res.state}">
                            <div class="item-status-off">已下机</div>
                        </c:if>
                    </div>
                    <div class="item-bottom">
                        <c:if test="${'无法统计' ne res.time}">
                            <div class="item-progress">
                                <div class="item-progress-bar" style="width:${res.schedule}%"> </div>
                            </div>
                        </c:if>
                        <div class="item-time"  >${res.time}</div>
                    </div>
                </div>
            </c:if>
          </c:forEach>
        </div>
    </div>
    <div class="bottom">南京医科大学第二附属医院血液净化中心管理系统</div>
</div>
</body>
</html>
<%--<script src="http://code.jquery.com/jquery-latest.js"></script>--%>
<script type="text/javascript">

   window.setTimeout(function(){
       window.location.reload();
   },300000);

    function time() {
        var vWeek;
        vWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        var date =  new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var vWeek_s = date.getDay();
            document.getElementById("time").innerHTML=vWeek[vWeek_s]+' / '+dateState()+this.addZero(hours) + '：' + this.addZero(minutes) + '：' + this.addZero(seconds);
    };

    //小于10的拼接上0字符串
    function addZero(s){
        return s < 10 ? ('0' + s) : s;
    }
    //判断是上午、下午、晚上
    function dateState() {
        let date = new Date();
        if (date.getHours() >= 6 && date.getHours() < 12) {
            return "上午班 "
        } else if (date.getHours() >= 12 && date.getHours() < 18) {
            return "下午班 "
        } else {
            return "晚班 "
        }
    }
    setInterval("time()",60000)


    //    计算"透析中"，进度条和剩余时间
    $(document).ready(function(){
        window.setInterval("ChangeStrToMinutes()",200);
    })



    var res=new Array();
    var restTimeList=new Array();
    for( var timeItem of ${result}){
        restTimeList.push(timeItem.time)
    }
    // var resttimeNumber = new Array()

   var refreshTimeLine = document.getElementsByClassName("item-bottom")
   var refreshTime = document.getElementsByClassName("item-time")
    function ChangeStrToMinutes()
    {
        res=${result}
        for( var index in res) {
            if(res[index].state=='2'&&restTimeList[index]!='00:00' ) {
                //    计算进度条变化
                var minTime = minToHour(restTimeList[index]) - 1
                var schedule = (res[index].dialysisOrderTime * 60 - minTime) / (res[index].dialysisOrderTime * 60) * 100 + '%'

                refreshTimeLine[index].querySelector(".item-progress-bar").style.width = schedule

                //    计算倒数时间变化
                refreshTime[index].innerHTML = ChangeHourMinutestr(minTime)
                debugger

                restTimeList[index]=ChangeHourMinutestr(minTime)
            }
        }
    };


          function minToHour(time){
               // 小时转换成分钟
            if(time!='无法统计'){
                var arrminutes = time.split(":");
                if (arrminutes.length == 2) {
                    var minutes = parseInt(arrminutes[0]) * 60 + parseInt(arrminutes[1]);
                    // restTimeList.push(minutes)
                    // resttimeNumber.push(minutes)
                    return minutes
                }
                else {
                    return 0;
                }
            }
        };



    function ChangeHourMinutestr(str) {
        return ((Math.floor(str / 60)).toString().length < 2 ? "0" + (Math.floor(str / 60)).toString() :
            (Math.floor(str / 60)).toString()) + ":" + ((str % 60).toString().length < 2 ? "0" + (str % 60).toString() : (str % 60).toString());
    }

</script>

代码1.0版本

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2022/9/27
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>透析进度</title>
</head>
<style>
.mainpage{
    display: flex;
    flex-wrap: wrap;
    padding: 1%;
    background: #010D1B;
}
.header{
    display: flex;
    width: 100%;
    background-image: radial-gradient(circle at 0%, #010D1B ,#0F79A3, #010D1B);
    justify-content: center;
    position: relative;
    height: 50px;
    align-items: center;
}
.header-title{
    font-size: 29px;
    color: #60D3F0;
    font-family: PangMenZhengDao-3;
    font-weight: 400;
    /* line-height: 0px; */
    color: #60D3F0;
    text-shadow: 0px 3px 6px rgba(0 120 145 0.58);
    letter-spacing: 10px;
    opacity: 1;
    text-align: center;
}
.header-time{
    position: absolute;
    right: 2%;
    display: flex;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #B2DFE4;
}
.warp-item{
    width: 249px;
    height: 58px;
    border: solid 2px #0F79A3;
    margin: 4px;
    padding: 5px;
    /* font-weight: bold; */
    background-color: #0E2F58;
    border-radius: 12px;
    font-family: Microsoft YaHei;
    color: #fff;
}
.item-top{
    height: 27px;
    display: flex;
    flex-direction: row;
    font-size: 15px;
    justify-content: space-between;
    /* line-height: 25px; */
    align-items: center;

}
.item-status{
    color: #0F79A3;
}
.item-text{
    display: flex;
    font-weight: bold;
}
.item-bottom{
    height: 20px;
    display: flex;
    /* line-height: 14px; */
    align-items: center;
}
.item-progress{
    border-radius: 6px;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 7px;
    background-color: #3C4D6B;
}

.item-progress-bar,
.item-progress-bar-change{
    background-color: #1CAFFC;
    width: 80%;
    height: 5px;
    border-radius: 6px;
    margin: 1px;
}

.warp-item-off{
    width: 249px;
    height: 58px;
    border: solid 2px #0F79A3;
    margin: 4px;
    padding: 5px;
    /* font-weight: bold; */
    border-radius: 12px;
    font-family: Microsoft YaHei;
    background: #0F79A3;
    color: #fff;
}
.item-status-off{
    color: #26D08C;
}
.item-time,
.item-time-change{
    margin: 5px 7px;
    font-size: 13px;
}
.header-time img{
    height: 15px;
    width: 15px;
    margin: 0px 2px;
}

.bottom{
    color: #9BA0B6;
    font-size: 12px;
    font-weight: 400;
    background-color: #010D1B;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0px;
    padding: 0px 0px 15px 0px;
}
.item-status{
    width: 55px;
}
</style>

<body>
<div id="app">
    <div class="header">
        <div class="header-title">透析进度</div>
        <div class="header-time" >
            <img src="../../../assets/image/dialysis_progress/time.png" alt="">
            <div id="time"></div>
        </div>
    </div>
    <div class="mainpage">
<%--                     <div class="warp-item">--%>
<%--                             <div class="item-top">--%>
<%--                                 <div class="item-text">--%>
<%--                                     <div class="item-text-place">南二A厅</div>--%>
<%--                                     <div class="item-text-number">001</div>--%>
<%--                                     <div class="item-text-name">李二狗</div>--%>
<%--                                 </div>--%>
<%--                                 <div class="item-status-off">已下机</div>--%>
<%--                             </div>--%>
<%--                             <div class="item-bottom">--%>
<%--                                 <div class="item-progress">--%>
<%--                                     <div class="item-progress-bar"   style="width:30%" > </div>--%>
<%--                                 </div>--%>
<%--                                 <div class="item-time">01:21</div>--%>
<%--                             </div>--%>
<%--                     </div>--%>

        <c:forEach items="${result}" var="res" >
            <c:if test="${'3' eq res.state}">
                <div class="warp-item-off">
                    <div class="item-top">
                        <div class="item-text">
                            <div class="item-text-place">${res.message}</div>
                                <%--判断是什么透析状态--%>
                        </div>
                        <c:if test="${'0' eq res.state}">
                            <div class="item-status">未称重</div>
                        </c:if>
                        <c:if test="${'1' eq res.state}">
                            <div class="item-status">已称重</div>
                        </c:if>
                        <c:if test="${'2' eq res.state}">
                            <div class="item-status">透析中</div>
                        </c:if>
                        <c:if test="${'3' eq res.state}">
                            <div class="item-status-off">已下机</div>
                        </c:if>
                    </div>
                    <div class="item-bottom">
                        <c:if test="${'无法统计' ne res.time}">
                            <div class="item-progress">
                                <div class="item-progress-bar" style="width:${res.schedule}"> </div>
                            </div>
                        </c:if>
                        <div class="item-time" >${res.time}</div>
                    </div>
                </div>
            </c:if>
            <c:if test="${'3' ne res.state}">
                <div class="warp-item">
                    <div class="item-top">
                        <div class="item-text">
                            <div class="item-text-place">${res.message}</div>
                                <%--判断是什么透析状态--%>
                        </div>
                        <c:if test="${'0' eq res.state}">
                            <div class="item-status">未称重</div>
                        </c:if>
                        <c:if test="${'1' eq res.state}">
                            <div class="item-status">已称重</div>
                        </c:if>
                        <c:if test="${'2' eq res.state}">
                            <div class="item-status">透析中</div>
                        </c:if>
                        <c:if test="${'3' eq res.state}">
                            <div class="item-status-off">已下机</div>
                        </c:if>
                    </div>
                    <div class="item-bottom">
                        <c:if test="${'无法统计' ne res.time}">
                            <div class="item-progress">
                                <div class="item-progress-bar" style="width:${res.schedule}"> </div>
                            </div>
                        </c:if>
                        <div class="item-time"  >${res.time}</div>
                    </div>
                </div>
            </c:if>
          </c:forEach>
        </div>
    </div>
    <div class="bottom">南京医科大学第二附属医院血液净化中心管理系统</div>
</div>
</body>
</html>

<script type="text/javascript">
    function time() {
        var vWeek;
        vWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        var date =  new Date();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var vWeek_s = date.getDay();
            document.getElementById("time").innerHTML=vWeek[vWeek_s]+' / '+dateState()+this.addZero(hours) + '：' + this.addZero(minutes) + '：' + this.addZero(seconds);
    };

    //小于10的拼接上0字符串
    function addZero(s){
        return s < 10 ? ('0' + s) : s;
    }
    //判断是上午、下午、晚上
    function dateState() {
        let date = new Date();
        if (date.getHours() >= 6 && date.getHours() < 12) {
            return "上午班 "
        } else if (date.getHours() >= 12 && date.getHours() < 18) {
            return "下午班 "
        } else {
            return "晚班 "
        }
    }
    setInterval("time()",1000)

    var x=10;
    var timeChangeList=new Array();
    // var bedId=new Array();

    $(document).ready(function(){
        ChangeStrToMinutes()

    })



    var res=new Array();
    var restTimeList=new Array();
    var resttimeNumber = new Array()



    function ChangeStrToMinutes()
    {
        //1.得到小时
            res=${result}
        for( item in res){
            console.log('时间为',res[item].time)
            //    2.小时转换成分钟
            if(res[item].time!='无法统计'){
                var arrminutes = res[item].time.split(":");
                if (arrminutes.length == 2) {
                    var minutes = parseInt(arrminutes[0]) * 60 + parseInt(arrminutes[1]);
                    restTimeList.push(minutes)
                    resttimeNumber.push(minutes)
                }
                else {
                    return 0;
                }
            }
        }
        refreshTimeSchedule(restTimeList)
    };

    //3.计算剩余时间
    var refreshTimeLine = document.getElementsByClassName("item-progress-bar")
    var refreshTime = document.getElementsByClassName("item-time")


    //改变进度条
    function refreshTimeSchedule(restTimeList) {
        var TimeList = new Array()
        TimeList=restTimeList
        for (item in TimeList) {
            if (TimeList[item] != '0') {
                TimeList[item]= TimeList[item]+1
                var resttimeMath = (TimeList[item] / 260) * 100
                  resttimeMath= Math.floor(resttimeMath * 100) / 100;
                refreshTimeLine[item].style.width =resttimeMath+"%"
            }
        }
        console.log(refreshTime.length)
        debugger

        changeResttimeNumber(resttimeNumber)
    }
    setInterval("refreshTimeSchedule(restTimeList)",3000)



    //改变时间显示
    function changeResttimeNumber(resttimeNumber){
            for( item2 in resttimeNumber ){
                if(resttimeNumber[item2]!='0') {
                    resttimeNumber[item2]-=1;
                    console.log(resttimeNumber[item2])
                    if (refreshTime[item2].innerHTML == '00:00'||refreshTime[item2].innerHTML == "无法统计") {

                    }else {
                        var changeResttime = ChangeHourMinutestr(resttimeNumber[item2])
                        debugger
                        refreshTime[item2].innerHTML = changeResttime
                        console.log(changeResttime)
                    }
                }
            }
    }

    function ChangeHourMinutestr(str) {
        return ((Math.floor(str / 60)).toString().length < 2 ? "0" + (Math.floor(str / 60)).toString() :
            (Math.floor(str / 60)).toString()) + ":" + ((str % 60).toString().length < 2 ? "0" + (str % 60).toString() : (str % 60).toString());
    }

</script>

Amor_1998
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的jsp 定时器实例
12-04
一个简单非常的jsp定时器 MyEclipse+tomcat+sql2000
jsp定时器，web程序定时执行任务
john_1984的专栏
09-23 7269
这个类最终功能是每天某个时间点(如每晚22点)执行某一功能。 首先，介绍java定时器（java.util.Timer）有定时执行计划任务的功能，通过设定定时器的间隔时间，会自动在此间隔时间后执行预先安排好的任务(java.util. TimerTask) 如: 每隔一个小时执行任务 timer.schedule(TimerTask, 0, 60 * 60 * 1000)。
js实现一个页面多个秒杀倒计时
monster
05-31 331
js实现秒杀倒计时
JSP中定时器的使用
夜上窗的博客
01-07 3367
JSP中存在两种： 只执行一次的定时器 <script> //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用...
vue中实现倒计时（一个定时器实现多个倒计时）
@小蚜虫
05-28 1886
vue中实现倒计时（一个定时器实现多个倒计时） 1.定义计算两个时间差得方法（如果项目很多地方用到倒计时，建议将此方法封装为全局函数） /** *@奇乐（2018-11-18） * --公共方法名称：计算时间差 * 参数： * ksTime:开始时间 :【yyyy-dd-mm hh:mm:ss】格式时间字符串 * jsType:计算类型 ：true:当前时间-ksTime false：ksTime-当前时间 * 返回结果： * newTimes:{ *
vue 页面多个倒计时
weixin_64064327的博客
07-20 1031
vue 页面多个倒计时
前端页面列表多个倒计时功能实现
最新发布
qq_73720914的博客
09-06 474
try {// 获取到列表数据 对裂变数据进行动态添加新的键值// 这边我们定义一个 倒计时结束的时间 转换成时间戳// vue2动态添加的对象是不具备响应式的 所以用$set// 结束时间 - 当前时间 如果小于等于0 那么就不需要再倒计时了this.$set(item, 'countDown', '无效')// 结束时间 - 当前时间 > 0的时候 设置倒计时的数据} else {this.$set(item, 'countDown', '00分00秒')})})} else {
jsp倒计时简单实现方法
01-08
本文实例讲述了jsp倒计时简单实现方法。分享给大家供大家参考，具体如下： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <% //当前时间毫秒数 Long current_time1=System....
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
10-23
主要介绍了JS+JSP通过img标签调用实现静态页面访问次数统计的方法,基于JavaScript动态调用jsp页面通过对TXT文本文件的读写实现统计访问次数的功能,需要的朋友可以参考下
纯jsp实现的倒计时动态显示效果完整代码
01-08
本文实例讲述了纯jsp实现的倒计时动态显示效果代码。分享给大家供大家参考，具体如下： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <div id=showTimes></div> <% long ...
一个页面多个倒计时 js
iteye_8029的博客
03-30 388
jQuery倒计时（CountDown）小插件 可以用于一个页面多个倒计时，调用也非常方便。 /* jquery.countdown.js */ (function($){ var countdown = function(item, config) { var seconds = parseInt($(item).attr...
JS实现倒计时(一个页面多个倒计时)
lyna的博客
08-23 3502
&lt;span&gt; &lt;i class="day-countdown" id="{$p.id}" data-timestamp="{$p.end_time}"&gt;00天00:00:00&lt;/i&gt;后 过期 &lt;/span&gt; &lt;!-- $p.id:后台传来的唯一号 $p.end_time:后台传来的
setInterval的最简易用法Practice
Puzzle_L的博客
04-22 151
【代码】setInterval的最简易用法Practice。
Javascript setInterval()
热门推荐
zsx0728的博客
05-15 1万+
文章目录JavaScript setInterval()示例 1：每 1 秒显示一次文本示例 2：每 5 秒显示一次时间JavaScript clearInterval()示例 3：使用 clearInterval() 方法参考文档     在本教程中，您将借助示例了解 JavaScript setInterval() 方法。     在 JavaScript 中，可以在指定的时间间隔内执行一段代码。这些时间间隔称为定时事件。     有两种方法可以在特定时间间隔执行代码。他们是： setInterval
JSP界面简单倒计时实例
格林王子举哥
12-23 403
<body style="width:99.5%;overflow:hidden;background:#F7F7F7;"> <div id="timer" style="float:right;margin-top:-20px;margin-right:10px"></div> </body> <script> //界面倒计时...
JSP倒计时显示
weixin_44302503的博客
03-29 559
倒计时显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
利用jsp和javabean编写一个时钟
Sazer的博客
11-03 406
jsp、javabean
如何在jsp中设置定时器
u013479571的专栏
01-15 1万+
定时器是我们经常使用到的工具，那么如何在开发网站时使用定时器呢？下面就以jsp为例进行讲解： 定时器可以在指定的时间，指定周期内完成指定的指令，对于定期的进行操作非常有用；设置定时器的方式有许多种，本例中使用的是javax.servlet.ServletContextListener和java.util.Timer来实现；
jsp网页计时器功能,在这里找了半天一个简单的都没有
dawjkd的博客
03-08 426
超级简单的网页计数器功能
用jsp写一个登录页面附带定时刷新吗
06-07
可以，以下是一个简单的示例： ```jsp <%@ page contentType="text/html; charset=UTF-8" language="java" %> <%@ page import="java.util.*" %> <html> <head> <title>Login</title> </head> <body> <h1>Login</h1> <form action="login.jsp" method="post"> Username: <input type="text" name="username"><br> Password: <input type="password" name="password"><br> <input type="submit" value="Login"> </form> <% // 处理登录逻辑 String username = request.getParameter("username"); String password = request.getParameter("password"); if ("admin".equals(username) && "123456".equals(password)) { session.setAttribute("username", username); response.sendRedirect("home.jsp"); } else { out.println("<p style='color:red'>Invalid username or password</p>"); } %> <% // 定时刷新页面 response.setIntHeader("Refresh", 30); // 30秒自动刷新 %> </body> </html> ``` 在这个示例中，我们使用 JSP 实现了一个简单的登录页面，并在页面中加入了定时刷新的功能。当用户提交登录表单时，后台会根据输入的用户名和密码进行验证，并在验证通过后将用户名存入 session 并跳转到主页。如果验证失败，则会在页面上显示错误信息。同时，我们通过设置 `response.setIntHeader("Refresh", 30)` 实现了页面的自动刷新，每隔 30 秒重新加载页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值