关于JS实现倒计时的问题 100C

现在一个类似于论坛的,发表成功后三分钟倒计时显示,三分钟之后不能修改如何实现啊

4个回答

不能修改应该是服务器端控制,判断添加时间和服务器当前时间相差大于3分钟才给修改(datediff),客户js分分钟被会的人绕过。。
一定要js做就设置修改按钮disabled为true,用setInterval进行倒计时操作

u013084254
wuxin123456666 那个时间如何传到页面上去显示倒计时?
大约 3 年之前 回复

用服务器端标签赋值给js变量,大概写个示例

 <input type="button" id="btnEdit" value="编辑" disabled="disabled" /><!--默认不可编辑-->
<script>
    //var addtime = '<%=数据库里面的时间%>';//注意这要格式化为 2016/8/5 15:15:23 这种格式,然后可以直接传递给js的Date构造函数生成时间对象,不能是2016-8-5 ...这种
    var addtime = '2016/8/5 15:15:23';//示例数据
    var endtime = new Date(addtime);
    endtime.setMinutes(endtime.getMinutes() + 3);//结束时间

    var nowtime = new Date();
    var btn=document.getElementById('btnEdit');
    if (nowtime.getTime() >= endtime.getTime())//超过3分钟,可以编辑
        btnEdit.disabled = false;
    else {//没超过3分钟,计时器来判断
        var timer = setInterval(function () {
            if (new Date().getTime() >= endtime.getTime()) {
                btnEdit.disabled = false;
                btnEdit.value = '编辑';
            }
            else {
                var ts = Math.floor((endtime.getTime() - new Date().getTime() )/ 1000);
                btnEdit.value = ts + '秒后可以编辑';
            }
        }, 1000);//1s执行一次
    }
</script>
showbo
支付宝加好友偷能量挖 回复wuxin123456666: 要转成我那种格式,自己看你服务器端语言怎么转。。
大约 3 年之前 回复
u013084254
wuxin123456666 我从后台传过来的是一个list集合的时间,我要用JS循环你这个方法吗?
大约 3 年之前 回复
showbo
支付宝加好友偷能量挖 if (new Date().getTime() >= endtime.getTime()) { clearInterval(timer);/*这里忘记清除计时器了。。*/ btnEdit.disabled = false; btnEdit.value = '编辑'; }
大约 3 年之前 回复
caozhy
贵阳老马马善福专业维修游泳池堵漏防水工程 这个正解
大约 3 年之前 回复

发表成功:肯定发给了后台,后台数据库写下数据库并记录下发表时间。
倒计时显示:肯定是js实现的,计时器3分钟,利于用户体验。
3分钟之内:点击修改,发送给后台请求,后台判断时间是否超过3分钟,如果没有超过允许修改。
3分钟之外:点击修改,发送给后台请求,。。。。不允许修改(超时)

向 asp.net web服务器控件添加客户端脚本事件 以编程方式向 ASP.NET 控件添加客户端事件处理程序
#在页面的 Init 或 Load 事件中调用控件的 Attributes 集合的 Add 方法
向按钮控件添加客户端 Onclick 事件
#在按钮控件(Button、LinkButton 和 ImageButton 控件)中,将 OnClientClick 属性设置为要执行的客户端脚本
举例:
前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testServerControls.aspx.cs" Inherits="WebApplication4.testServerControls" %>
<!DOCTYPE html>



function test() { alert("hello new world"); }




后台代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication4
{
public partial class testServerControls : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//将客户端按钮控件的属性设置为客户端脚本test()
btnServer.OnClientClick = "test()";
//调用控件的 Attributes 集合的 Add 方法
String displayControlName = "spanCounter";
//在span中显示文本框的字符长度
TextBox1.Attributes.Add("onkeyup", displayControlName + ".innerText=this.value.length;");
}
}
}


提交 的时候获取当前时间,将时间传过去,然后显示倒计时:

html>



倒计时

<!--以下为css样式-->

<br><br> .daojishi h2<br><br> {<br><br> font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;<br><br> font-size:14px;<br><br> margin-bottom:5px;<br><br> color:#151515;<br><br> }<br><br> .daojishi #timer<br><br> {<br><br> font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;<br><br> font-size:14px;<br><br> color:#151515;<br><br> font-weight:bold;<br><br> }<br><br>

<br><br>







剩余时间为:











Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!