在实现代码之前，先思考一个问题：
同样点击一个按钮调用后台，WebForm与小程序有什么区别？
WebForm 是重量级的，服务器控件的Button，执行时会将整个页面提交到后台，执行完成之后，服务器会将整个页面再重新加载一次。
为什么我们看到重新加载的页面，控件的值没有变化？那只是因为在整个页面提交时，保存了控件的值，重新加载时，重新渲染出来了而已。
相当于：我们做菜，想买瓶酱油，出门时把锅碗瓢盆都带在身上，买完酱油，锅碗瓢盆重新放回原位。
所以：
第一，这个消耗是比较大的；
第二，点击按钮之后的页面，其实已经不是我们前面的页面，是重新加载出来的页面。
说完WebForm, 那小程序呢？
小程序其实相当于WebForm用 Ajax 方式来实现功能，没有“服务器控件”的概念，所以非常轻量，原理完全不同。
回到原来的需求上来：
在WebForm中实现发送验证码，点击按钮后按钮禁用60秒的效果
应该怎么做呢？
两种方式：
1、采用Ajax 方式实现，这个思路比较简单，但写代码要麻烦一点，需要写ajax 相关的代码。
2、采用WebForm原生的服务器控件来实现。
我们想实现的，是第2种方式。
第2种方式，禁用按钮60秒的效果应该在哪个阶段来实现呢？
如果采用类似 OnClientClick 的方式，来实现，则必须前端执行完，才可以执行后端。而且即使能实现，效果也不好。
如果60秒走完才执行后端，白白浪费了时间。
如果60秒没走完就执行了后端，60秒效果没有达到。
所以，必须换思路，在后端执行完之后再来执行60秒效果就可以了。
因为按钮点击完，页面会重新加载一次，我们在前端利用这个机会把60秒的效果展现出来就可以了。
思路清晰，要做就容易了：
.aspx 代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestSmsCode.aspx.cs" Inherits="SWSchool.Mobile.TestSmsCode" %> <!DOCTYPE html> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../JS/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var seconds = parseInt($('#<%= hfSeconds.ClientID %>').val()); if (seconds > 0) { startCountdown(seconds); } function startCountdown(seconds) { var btnSendSms = $('#<%= btnSendSms.ClientID %>'); btnSendSms.prop('disabled', true); var interval = setInterval(function () { if (seconds > 0) { btnSendSms.val('重新发送(' + seconds + 's)'); seconds--; } else { clearInterval(interval); btnSendSms.prop('disabled', false); btnSendSms.val('发送验证码'); $('#<%= hfSeconds.ClientID %>').val('0'); } }, 1000); } }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txtMobile" runat="server" Width="200px" MaxLength="11" placeholder="请输入手机号"></asp:TextBox> <asp:Button ID="btnSendSms" runat="server" Text="发送验证码" OnClick="btnSendSms_Click" /> <asp:HiddenField ID="hfSeconds" runat="server" Value="0" /> <br /><br /> <asp:TextBox ID="txtSmsCode" runat="server" Width="200px" MaxLength="6" placeholder="请输入验证码"></asp:TextBox> <asp:Button ID="btnVerifySms" runat="server" Text="验证验证码" OnClick="btnVerifySms_Click" /> <br /><br /> <asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label> </div> </form> </body> </html>.aspx.cs 代码：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace SWSchool.Mobile { public partial class TestSmsCode : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnSendSms_Click(object sender, EventArgs e) { //todo : implement SMS sending logic here this.hfSeconds.Value = "60"; Response.Write("<script>alert('SMS sent successfully!');</script>"); } protected void btnVerifySms_Click(object sender, EventArgs e) { } } }
