美文网首页
2020-06-24 纯html落地页文件

2020-06-24 纯html落地页文件

作者: gdlooker | 来源:发表于2020-07-04 17:58 被阅读0次
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="divport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .container {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex: 1;
      background-color: #ffffff;
      align-items: center;
      width: 100vw;
      height: 100vh;

    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100vw;
      min-height: 100vh;
      background-image: url('./img/bg_color.png');
      background-size: 100% 100%;
    }

    .contentBgImage {
      width: 100vw;
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-image: url('./img/bg_icon.png');
      background-size: 100% 100%;
    }

    .logoTopSpace {
      width: 100vw;
      height: 13.3vw;
      line-height: 13.3vw;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      /* background-color: #00ff00; */
    }

    .xinRenSpace {
      color: #ffffff;
      font-size: 3.86vw;
    }

    .lineHeight {
      width: 5.3vw;
      height: 0.53vw;
      background-color: #ffffff;
      margin: 0 2.67vw;
    }

    .xinRenLargeTitle {
      color: #ffffff;
      font-size: 14.9vw;
    }

    .xinRenSubTitle {
      color: #ffffff;
      font-size: 4.8vw;
    }

    .xinRenRegLogoContainer {
      width: 100vw;
      height: 28.5vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* .xinRenRegLogo {
      min-width: 200px;
      min-height: 200px;
      margin-top: 10px;
    } */

    .xinRenTitle {
      font-size: 4.8vw;
      font-weight: bold;
      color: #FADFA5;
      margin-top: 1vw;
      margin-bottom: 4vw;
    }

    .inputBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 76.53vw;

    }

    .inputBoxRow {
      display: flex;
      flex-direction: row;
      width: 76.53vw;
      height: 11.2vw;
      align-items: center;
      margin-top: 5.33vw;
    }

    .inputCodeCss {
      width: 46.67vw;
      height: 11.2vw;
      border-radius: 5.6vw;
      border-color: #ffffff;
      padding-left: 6.67vw;
      background: url('./img/mobile_code.png') 2.13vw 2.8vw no-repeat;
      background-size: 3.86vw 4.4vw;
      background-color: #ffffff;
      font-size: 4vw;
    }

    .inputCss {
      width: 67.2vw;
      height: 11.2vw;
      border-radius: 5.6vw;
      border-color: #ffffff;
      padding-left: 6.67vw;
      background: url('./img/mobile_icon.png') 2.67vw 2.67vw no-repeat;
      background-size: 3.33vw 5.06vw;
      background-color: #ffffff;
      font-size: 4vw;
    }

    .mobileIcon {
      width: 3.2vw;
      height: 5vw;
      position: relative;
      left: 4vw;
      top: 1.33vw;
    }

    .inputCodeCss::-webkit-input-placeholder {
      color: #CCCCCC;
      font-size: 4vw;
    }

    .inputCss::-webkit-input-placeholder {
      color: #CCCCCC;
      font-size: 4vw;
    }

    .spaceWidth {
      width: 4vw;
      min-height: 11.2vw;
    }

    .inputGetCode {
      width: 25.87vw;
      height: 11.2vw;
      text-align: center;
      line-height: 11.2vw;
      background-color: #FADFA5;
      color: #E81035;
      border-radius: 5.33vw;
      font-size: 3.73vw;
    }

    .addBtn {
      width: 65.33vw;
      height: 11.33vw;
      border-radius: 5.33vw;
      background-color: #FADFA5;
      color: #E81035;
      margin-top: 8vw;
      text-align: center;
      line-height: 11.33vw;
      font-size: 4.27vw;
    }

    .bottomContainer {
      width: 100vw;
      height: 13.6vw;
      line-height: 13.6vw;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .bottomItem {
      text-align: center;
      color: #ffffff;
      font-size: 4.8vw;
    }

    .popup {
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, .5);
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: none;
      justify-content: center;
      align-items: center;
    }

    .popup-content {
      width: 80vw;
      height: 20vw;
      background-color: #fff;
      box-sizing: border-box;
      padding: 10px 30px;
      color: black;
    }

    .top {
      width: 100%;
      height: 20vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1.4rem 0rem;
    }

    #modalContent {
      width: 100%;
      height: 20vw;
      line-height: 20vw;
      font-size: 6vw;
      text-align: center;
    }
  </style>
  <title>落地页手机绑定</title>
</head>

<body>
  <div class="container" onclick="hidePopup(false)">
    <div class="content">
      <div class="contentBgImage">
        <div class="logoTopSpace">
          <div class="lineHeight"></div>
          <div class="xinRenSpace">新人专享</div>
          <div class="lineHeight"></div>
        </div>
        <div class="xinRenLargeTitle">
          新人免单领取
        </div>
        <div class="xinRenSubTitle">嗨新朋友 送你一份新人礼</div>
        <div class="xinRenRegLogoContainer">
        </div>
        <div class="xinRenTitle">购物前先领券在拿返利</div>
        <div class='inputBox'>
          <input placeholder="请输入手机号" class="inputCss" id="inputPhone" type="number" />
        </div>

        <div class="inputBoxRow">
          <input placeholder="请输入验证码" class="inputCodeCss" id="inputCode" />
          <div class="spaceWidth"></div>
          <div class="inputGetCode" id="inputGetCode">获取验证码</div>
        </div>

        <div class="addBtn" id="addBtn">
          立即登陆
        </div>
      </div>

      <div class="bottomContainer">
        <div class="bottomItem">
          已有
        </div>
        <div class="bottomItem" id="userNumber">
          23122
        </div>
        <div class="bottomItem">
          位用户领取福利！
        </div>

      </div>

      <div class="popup" id="popup">
        <div class="popup-content">
          <div class="top">
            <p id="modalContent">提示信息</p>
          </div>
        </div>
      </div>

    </div>

  </div>
  </div>
    <script src="https://jic.talkingdata.com/app/h5/v1?appid=3FE50D39CED948F1B199D11382FED33D&vn=1.7.5&vc=35"></script>
  <script type="text/javascript">
    window.onload = function () {

      var phone = document.getElementById('inputPhone'); //手机号码
      var inputCode = document.getElementById('inputCode');//输入验证码
      var inputGetCode = document.getElementById('inputGetCode'); //验证码
      var addBtn = document.getElementById('addBtn') //立即登陆按钮
      var userNumber = document.getElementById('userNumber'); //用户随机数
      var channel_code = "";
      var daoji = 60;
      var number = randomNum(10000, 99999);
      var isClick = true; //控制验证码 防止快速点击
      var isAddBtn = true;//用户点击注册 防止快速重复点击
      userNumber.innerText = number  //随机数的值 
      var timerInt;
      //给定一个值,使点 确定按钮 为 true,点其他为 false
      var isDelete = false;
      var Enter_Signin = 0;
      Enter_Signin++;
      console.log(TDAPP, 123123)
      TDAPP.onEvent("Signin_Enter_Signin", "通用渠道页_进入渠道落地页", { "times": Enter_Signin });

      //输入手机号码埋点
      var Signin_enter_phone = 0;
      //当用户输入完成之后
      phone.onblur = function () {
        Signin_enter_phone++;
        console.log('手机输入埋点', Signin_enter_phone)
        TDAPP.onEvent("Signin_enter_phone", "通用渠道页_输入手机号", { "times": Signin_enter_phone });
      }

      //输入验证码埋点
      var Signin_enter_verification = 0;
      inputCode.onblur = function () {
        Signin_enter_verification++;
        console.log('验证码输入埋点', Signin_enter_verification);
        TDAPP.onEvent("Signin_enter_verification", "通用渠道页_输入验证码", { "times": Signin_enter_verification });
      }
      var Click_registered = 0;
      //显示弹窗函数，设置display为flex
      function showPopup(inputVal) {
        document.getElementById("popup").style.display = "flex";
        document.getElementById('modalContent').innerText = inputVal;
        setTimeout(function () {
          hidePopup(false);
        }, 2000)
      }

      //关闭弹窗函数，设置display为none，传一个参数，把true和false传进去
      function hidePopup(x, e) {
        //处理冒泡，event 的 cancelable 事件返回一个布尔值 
        // 确定按钮有event参数，不会返回undefined（因为取消和其他区域，没传值 默认undefined）
        if (e != undefined) {
          e.cancelBubble = true;
        }
        document.getElementById("popup").style.display = "none";
        isDelete = x;
        //console.log(x);
      }

      var Signin_Get_verification = 0;
      //获取验证码
      inputGetCode.onclick = function () {
        if (isClick) {
          isClick = false;
          //开启定时器
          setTimeout(() => {
            isClick = true;
            console.log('定时器点击设为true了')
          }, 1000);

          if (daoji != 60) {
            console.log('禁用按钮')
            inputGetCode.setAttribute('disabled', 'disabled');
            return;
          }
          if (!phone.value) {
            showPopup('请输入手机号码')
            return;
          }
          var phoneVal = phone.value.replace(/[^\d]+/, '');
          let phoneSta = checkMobile(phoneVal); //检测是不是手机号码
          if (!phoneSta) {
            showPopup('请输入正确的手机号码');
            return;
          }
          //console.log(phoneVal)
          //发送验证码
          sendCode();
          Signin_Get_verification++
          TDAPP.onEvent("Signin_Get_verification", "通用渠道页_获取验证码", { "times": Signin_Get_verification });

        }
      }

      //发送手机验证码
      function sendCode() {
        var xmlhttp = new XMLHttpRequest();
        var url = "https://app-v2-api.mlj130.com/v1/channel/send-verify-code?mobile=" + phone.value;
        console.log('验证码url地址', url)
        xmlhttp.open("GET", url, true)   //线上地址
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            timeStart();
            var resJson = JSON.parse(xmlhttp.responseText)
            if (resJson['result'] == 'success') {
              showPopup('发送成功')
            } else {
              //resJson['result']=='error'
              showPopup(resJson['message'])
              if (!!timerInt) {
                clearInterval(timerInt);
              }
            }
          } else {
            console.log('注册失败')
          }
        }
        xmlhttp.send()
      }
      //开启倒计时
      function timeStart() {
        timerInt = setInterval(function () {
          daoji--;
          console.log(daoji)
          if (daoji <= 0) {
            inputGetCode.innerText = "获取验证码"
            inputGetCode.setAttribute('disabled', 'value');
            daoji = 60;
            clearInterval(timerInt)
          } else {
            inputGetCode.innerText = daoji + "s";
          }

        }, 1000);
      }
      //注册登陆事件
      addBtn.onclick = function () {
        if (isAddBtn) {
          isAddBtn = false;
          setTimeout(function () {
            isAddBtn = true;
          }, 2000);
          //获取表单数据
          var phoneVal = phone.value;
          if (!phoneVal) {
            showPopup('请输入手机号码');
            return;
          }
          phoneVal = phoneVal.replace(/[^\d]+/, '');
          let phoneSta = checkMobile(phoneVal); //检测是不是手机号码
          if (!phoneSta) {
            showPopup('请输入正确的手机号码');
            return;
          }
          if (!inputCode.value) {
            showPopup('请输入验证码');
            return;
          }
          //获取本地url地址的
          var href = window.location.href  //获取当前落地页 的地址
          //根据?udid切割
          var hrefArray = href.split("?channel_code="); //截取地址 
          channel_code = hrefArray[1];
          regChannel();//注册渠道
          Click_registered++
          TDAPP.onEvent("Click_registered", "通用渠道页_点击注册", { "times": Click_registered });
        }


      }
      //检测手机号码 
      function checkMobile(value) {
        let partten = /^(((1[0-9][0-9]{1})|159|153)+\d{8})$/;
        if (partten.test(value)) {
          return true;
        }
        else {
          return false;
        }
      }

      //注册渠道
      function regChannel() {
        var xmlhttp = new XMLHttpRequest()
        var url = "https://app-v2-api.mlj130.com/v1/channel/record-mobile?vcode=" + inputCode.value + "&mobile=" + phone.value + "&channel_code=" + channel_code;
        console.log('注册url地址', url)
        xmlhttp.open("GET", url, true)   //线上地址
        xmlhttp.onreadystatechange = function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var resJson = JSON.parse(xmlhttp.responseText)
            if (resJson['result'] == 'success') {
              window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.maliujia.huimai";// app的下载地址
            } else {
              alert(resJson['message'])
            }
          } else {
            console.log('注册失败', xmlhttp.readyState)
          }
        }
        xmlhttp.send()
      }

      // 生成随机数据
      function randomNum(minNum, maxNum) {
        switch (arguments.length) {
          case 1:
            return parseInt(Math.random() * minNum + 1, 10);
            break;
          case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
            break;
          default:
            return 0;
            break;
        }
      }
    }

  </script>
</body>

</html>

    相关文章

      网友评论

          本文标题：2020-06-24 纯html落地页文件

          本文链接：https://www.haomeiwen.com/subject/uosrfktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2020-06-24 纯html落地页文件|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！