zoukankan      html  css  js  c++  java
  • 移动端click时间延迟300

    解决移动端click延迟事件方法,,引入fastclick.js  然后在script标签里面写上FastClick.attach(document.body);

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>众筹影集</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/zhongchou.css">
    </head>
    <body>
    <figure><img src="img/L--E--S--L--I--E.png"></figure>
    <figure class="odd"><img src="img/pic_word.png"></figure>
    <figure><img src="img/pic.png"></figure>
    <figure class="odd"><img src="img/pic_slogan1.png"></figure>
    <article>
    <p>为纪念哥哥六十岁,由部分陕西荣迷牵头,聚合江西、北京、浙江、海南、加拿大等地荣迷力量,从数千张哥哥图片中精选出150张左右,集结成册,以飨荣迷。<br><br>
    《见得张国荣》从设计、选图、文案到编辑,全部由荣迷担任。其中有相当数量的罕见图片,少量图片首次付印。<br><br>
    《见得张国荣》共计60页,高240mm,宽190mm,封面用130克白色细布纹特种纸,裱2.5mm纸板;标题文字部分烫银,激凸;内页用157克日本原浆进口特种纸,四色印刷,专色印刷。整册模切机压圆角处理。<br><br>
    本影集定价139元,不公开发售,专供荣迷,千册起印。如不足千册,所筹款项全部退回参与者。如众筹达千册,则最终印数视实际情况决定。
    </p>
    <ul id="list">
    <li> • &nbsp;推荐他人参与本次众筹有返现奖励;凭付款人在众筹页面提供的推荐者微信号,在众筹结束后,向推荐人每本返现10元,上不封顶。</li><br>
    <li> • &nbsp;推荐或购买《见得张国荣》60册及以上数量者,可在本书尾页印上自己想对哥哥说的话,不超过60字。</li>
    </ul>
    <p>张国荣60周年众筹影集QQ群:398306287<br>本次众筹影集活动截止日期为 2016/03/31</p>
    </article>
    <figure class="odd"><img src="img/pic_slogan2.png"></figure>
    <form>
    <h4>姓名</h4>
    <input type="text" name="user" value="" id="user" placeholder="请填写你的姓名">
    <h4>手机号</h4>
    <input type="text" name="number" value="" id="number" placeholder="请填写你的手机号,保证填写无误">
    <h4>收货地址</h4>
    <input type="text" name="address" value="" id="address" placeholder="请准确填写你的地址,方便我们快递给你">
    <h4>推荐人微信号</h4>
    <input type="text" name="weixin" value="" id="weixin" placeholder="填写本次众筹推荐人微信号,为推荐人返还10元">
    </form>
    <h4>想对哥哥说的话</h4>
    <textarea placeholder="写下你想对哥哥说的话。推荐或购买60册及以上者,你的思念会出现在影集尾页..." id="TextArea1">
    </textarea>
    <div id="limit"><span id="textCount">60</span>字</div>
    <article id="shopping">
    <h4>购买数量</h4>
    <div class="clearfix">
    <span id="left"><img src="img/number_cancel.png"></span>
    <span id="mid-span">1</span>
    <span id="right"><img src="img/number_add.png"></span>
    </div>
    </article>
    <article id="money"class="clearfix">
    <div class="clearfix">
    <span>需支付:</span>
    <span id="rmb">131.4</span>
    </div>
    <div id="goumai">立即支付</div>
    </article>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/jquery.touch.js" ></script>
    <script src="js/click.js"></script>
    <script>
    $(document).ready(
    function(){
    FastClick.attach(document.body);
    var $shu =1;
    $("#right").on("click",function(){
    $shu++;
    var a=$shu*131.4;
    var b= a.toFixed(2)
    $("#mid-span").html($shu);
    $("#rmb").html(b);
    })
    $("#left").on("click",function(){
    if($shu==1){
    $("#mid-span").html("1");
    $("#rmb").html("131.4");
    }
    else{
    $shu--;
    a=$shu*131.4;
    b= a.toFixed(2)
    $("#mid-span").html($shu);
    $("#rmb").html(b);
    }
    })
    /*字数减少*/
    $("#TextArea1").on("keyup",function(){
    var curLength=$("#TextArea1").val().length;
    if(curLength>60)
    {
    var num=$("#TextArea1").val().substr(0,60);
    $("#TextArea1").val(num);
    alert("超过字数限制!" );
    }
    else
    {
    $("#textCount").text(60-$("#TextArea1").val().length);
    }
    })
    /*手机号验证*/
    $("#number").on("blur",function(){
    var telphone = $("#number").val();
    var myreg = /^1[34578]d{9}$/;
    if(!telphone==""){
    if(!myreg.test(telphone)){
    alert("请输入正确的手机号!")
    $(this).val("");
    $(this).focus();

    }
    }

    });
    }
    )
    </script>
    </body>
    </html>

  • 相关阅读:
    关于标签类的注意事项
    层叠样式表css的优先级
    link常用的作用
    html中属于布尔类型的属性
    行级标签和块级标签的区别
    拥有inline-block属性的标签
    JDK中的Timer和TimerTask详解(zhuan)
    关于 MySQL LEFT JOIN 你可能需要了解的三点(zhuan)
    Logger日志级别说明及设置方法、说明 (zhuan)
    Velocity教程 (zhuan)
  • 原文地址:https://www.cnblogs.com/wrong930803/p/5329259.html
Copyright © 2011-2022 走看看