倒计时js和html代码

该代码使用了jquery,开始需要引入jquery包


html代码

<body>
<div class="content">
    <button class="getcode">点击获取button>
div>
body>
js实现代码

<script type="text/javascript">

      window.onload=function () {
          $(".getcode").on('click',function () {
              var self = this,
                  countDom = $('.getcode'),
                  startTime = Date.now();//获取时间戳

              countDom.html('60s');

              countDom.attr('disabled', 'disabled');
              function setTime(bindDom, startTime) {

                  var _interval = setInterval(function() {
                      // 匿名函数

                      (function(iii) {//iii的值是startTime的值

                          var s = parseInt((Date.now() - iii) / 1000);
                          if (s < 60) {

                              bindDom.html((60 - (s)) + 's');

                          } else {

                              clearInterval(_interval);

                              bindDom.html('点击获取').removeAttr('disabled');
                          }
                      })(startTime)



                  }, 1000);
              };

              setTime(countDom, startTime);
          });
   script>
css样式

<style>
    .content{
        margin: 50px auto;
        text-align: center;
    }
    .getcode{
        width: 100px;
        padding: 15px 20px;
        border: 1px solid #8a6d3b;
        background-color: #8a6d3b;
        border-radius: 5px;
        cursor: pointer;
    }
style>

你可能感兴趣的:(组件)