zoukankan      html  css  js  c++  java
  • Jquery手机发送短信之后,进入倒计时状态

    在做手机网站开发的时候,难免发生意外。这时候,就是你展示人格魅力的时候啦!

    下面是自己写的一个发送验证码给手机之后,进入的一个倒计时的效果

    js代码,我可是连<script type="text/javascript">这种都贴出来啦!

    <script type="text/javascript">
            var InterValObj; 
            var count = 60; 
            var curCount; 
            function sendMessage() {
                curCount = count;
                $("#sendMessage").attr("disabled", "true");
                $("#sendMessage").parent().children().first().children().text("在" + curCount + "秒之后重发");
                $("#sendMessage").val("在" + curCount + "秒之后重发");
                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
            }
            //timer处理函数
            function SetRemainTime() {
                if (curCount == 0) {
                    window.clearInterval(InterValObj); //停止计时器
                    $("#sendMessage").removeAttr("disabled"); //启用按钮
                    $("#sendMessage").parent().children().first().children().text("重新发送");
                    $("#sendMessage").val("重新发送");
                }
                else {
                    curCount--;
                    $("#sendMessage").val("在" + curCount + "秒之后重发");
                    $("#sendMessage").parent().children().first().children().text("在" + curCount + "秒之后重发");
                }
            }
    </script>
    

     Html代码,就一个按钮

    <input type="button" id="sendMessage" value="发送信息" />

     当然了  你还得引用最重要的库文件。

    <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet"
            type="text/css">
    <script src="jquery的库文件" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

     这都不是最重要的,重要的是 没有引用啊~

     于是js加上一句:

    $(function () {
                $("#sendMessage").click(function () {
                    sendMessage();
                })
            })

    最后的效果,在谷歌里面如下:

    点击之后

    很期待下次与大家的分享,不要问我是谁,请叫我红领巾。

  • 相关阅读:
    移动端web app开发备忘
    HDU 5391-Zball in Tina Town(数论)
    LeetCode:Invert Binary Tree
    Mongo集群之主从复制
    Cocos2d-x--iOS平台lua加密成luac资源方法和Jsc文件&lt;MAC平台开发试用--windows平台暂未研究&gt;
    优秀程序猿因何而优秀?
    Java Exception和Error的差别
    【Android开发】之Fragment与Acitvity通信
    Draw the RGB data from kinect C++ via opengl
    使用Opencv2遇到error C2061: 语法错误: 标识符dest
  • 原文地址:https://www.cnblogs.com/BlogtoSpring/p/3796202.html
Copyright © 2011-2022 走看看