Bootstrap左侧下拉三级菜单,js与jQuery达成的用户注册协议倒计时成效实例

Tencent用过的插件jQuery twentytwenty 效果相比较,jquerytwentytwenty

Bootstrap侧面下拉三级菜单,

jQuery siteslider 动画幻灯片,jquerysiteslider

js与jQuery完毕的用户注册协议倒计时功用实例【两种情势】,jsjquery

本文实例陈说了js与jQuery完毕的用户注册协议倒计时成效。分享给大家供大家参照他事他说加以考察,具体如下:

方法一:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>www.jb51.net 注册倒计时</title>
  <script type="text/javascript">
    //用户有十秒钟的时间看协议,超过十秒钟,“同意”按钮将生效
    var Seconds = 10;
    //计时器ID
    var setIntervalID;
    function ok() {
      var getid = document.getElementById("but");
      if (Seconds <= 0) {
        getid.value="同意";
        getid.disabled = false; //或者写成getid.disabled=""; 启用getid控件。
        //停止计时器
        clearInterval(setIntervalID);
      }
      else {
        getid.value = "请仔细阅读协议还剩下【" + Seconds + "】秒";
      }
      Seconds--;
    }
   setIntervalID=setInterval("ok()", 1000);
  </script>
</head>
<body>
<textarea cols="20" rows="8"></textarea><br />
<!--disabled="disabled" 默认submit表单是禁用的,也就是只读的,不能点击-->
<input type="submit" id ="but" value="同意" disabled="disabled" />
</body>
</html>

运作效果:

澳门葡京 1

Bootstrap左侧下拉三级菜单,js与jQuery达成的用户注册协议倒计时成效实例。方法二:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>www.jb51.net 注册倒计时</title>
  <script src="jquery-1.7.2.min.js"></script>
</head>
<body>
  <form action="http://www.bkjia.com/" method="post" name="agree">
    <input type="submit" class="button" value="" name="agreeb">
  </form>
</body>
</html>
<script>
  var secs = 5;
  var si;
  $(function () {
    $(".button").attr("disabled", "disabled");
    $(".button").val("请认真查看<服务条款和声明>(" + secs + ")")
    si = setInterval(a, 1000);
  })
  function a() {
    $(".button").val("请认真查看<服务条款和声明>(" + (secs-1) + ")");
    if (secs == 0) {
      clearInterval(si);
      $(".button").val("我同意" ).removeAttr("disabled");
    }
    secs--;
  }
</script>

运营效果:

澳门葡京 2

澳门葡京 ,方法三:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>www.jb51.net 注册倒计时</title>
</head>
<body>
  <form action="http://www.bkjia.com/" method="post" name="agree">
    <input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">
  </form>
</body>
</html>
<script>
  var secs = 30;
  document.agree.agreeb.disabled = true;
  for (var i = 1; i <= secs; i++) {
    window.setTimeout("update(" + i + ")", i * 1000);
  }
  function update(num) {
    if (num == secs) {
      document.agree.agreeb.value = " 我 同 意 ";
      document.agree.agreeb.disabled = false;
    }
    else {
      var printnr = secs - num;
      document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr + ")";
    }
  }
</script>

运行效果:

澳门葡京 3

PS:这里再为我们推荐三款时间及日期相关工具供大家参照他事他说加以考察运用:

在线秒表工具:

在线日期/天数总计器:

在线日期天数差总结器:

Unix时间戳(timestamp)调换工具:

越来越多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作能力总括》、《JavaScript查找算法技巧计算》、《JavaScript错误与调整技艺总括》、《JavaScript数据结构与算法技术总括》、《JavaScript遍历算法与工夫计算》及《JavaScript数学生运动算用法总计》

但愿本文所述对大家JavaScript程序设计有着帮忙。

本文实例陈说了js与jQuery达成的用户注册协议倒计时成效。分享给大家供…

在线实例

左右对比 上下对比

在线实例

效果一 效果二 效果三

在线实例

效果一 效果二

利用方法

<div class="twentytwenty-container">
    <img src="/api/jq/5733e37340d99/img/2.jpg" alt="澳门葡京 4">
    <img src="/api/jq/5733e37340d99/img/1.jpg" alt="澳门葡京 5">
</div>
<script>
    $(function() {
        $('.twentytwenty-container').twentytwenty();
    });
</script>

  

twentytwenty
效果相比较,jquerytwentytwenty 在线实例 左右相比较 上下相比 使用办法
divclass=”twentytwenty-container”imgsrc=”/api/jq/5733…

使用方法

<script src="/api/jq/BootstrapCaidan/js/metismenu.js"></script>
<script>
    $(function () {
        $('#menu').metisMenu();
    });
</script>

  澳门葡京 6

 


下载

 

在线实例 效果一
效果二 效果三 使用办法
scriptsrc=”/api/jq/BootstrapCaidan/js/metismenu.js”/scriptscript$(function(){$(‘#menu’)…

动用办法

<div class="container demo-1">
            <div id="slider" class="sl-slider-wrapper">
                <div class="sl-slider">
                    <div class="sl-slide bg-1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                        <div class="sl-slide-inner">
                            <div class="deco" data-icon="H"></div>
                            <h2>A bene placito</h2>
                            <blockquote><p>You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity.</p><cite>Ralph Waldo Emerson</cite></blockquote>
                        </div>
                    </div>

                    <div class="sl-slide bg-2" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
                        <div class="sl-slide-inner">
                            <div class="deco" data-icon="q"></div>
                            <h2>Regula aurea</h2>
                            <blockquote><p>Until he extends the circle of his compassion to all living things, man will not himself find peace.</p><cite>Albert Schweitzer</cite></blockquote>
                        </div>
                    </div>

                    <div class="sl-slide bg-3" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <div class="deco" data-icon="O"></div>
                            <h2>Dum spiro, spero</h2>
                            <blockquote><p>Thousands of people who say they 'love' animals sit down once or twice a day to enjoy the flesh of creatures who have been utterly deprived of everything that could make their lives worth living and who endured the awful suffering and the terror of the abattoirs.</p><cite>Dame Jane Morris Goodall</cite></blockquote>
                        </div>
                    </div>

                    <div class="sl-slide bg-4" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <div class="deco" data-icon="I"></div>
                            <h2>Donna nobis pacem</h2>
                            <blockquote><p>The human body has no more need for cows' milk than it does for dogs' milk, horses' milk, or giraffes' milk.</p><cite>Michael Klaper M.D.</cite></blockquote>
                        </div>
                    </div>

                    <div class="sl-slide bg-5" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
                        <div class="sl-slide-inner">
                            <div class="deco" data-icon="t"></div>
                            <h2>Acta Non Verba</h2>
                            <blockquote><p>I think if you want to eat more meat you should kill it yourself and eat it raw so that you are not blinded by the hypocrisy of having it processed for you.</p><cite>Margi Clarke</cite></blockquote>
                        </div>
                    </div>
                </div><!-- /sl-slider -->

                <nav id="nav-arrows" class="nav-arrows">
                    Previous
                    Next
                </nav>

                <nav id="nav-dots" class="nav-dots">
                    
                    
                    
                    
                    
                </nav>

            </div><!-- /slider-wrapper -->

        </div>
        <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="/api/jq/5733e3636bc3e/js/jquery.ba-cond.min.js"></script>
        <script type="text/javascript" src="/api/jq/5733e3636bc3e/js/jquery.slitslider.js"></script>
        <script type="text/javascript">
            $(function() {

                var Page = (function() {

                    var $navArrows = $('#nav-arrows'),
                            $nav = $('#nav-dots > span'),
                            slitslider = $('#slider').slitslider({
                        onBeforeChange: function(slide, pos) {

                            $nav.removeClass('nav-dot-current');
                            $nav.eq(pos).addClass('nav-dot-current');

                        }
                    }),
                            init = function() {

                                initEvents();

                            },
                            initEvents = function() {

                                // add navigation events
                                $navArrows.children(':last').on('click', function() {

                                    slitslider.next();
                                    return false;

                                });

                                $navArrows.children(':first').on('click', function() {

                                    slitslider.previous();
                                    return false;

                                });

                                $nav.each(function(i) {

                                    $(this).on('click', function(event) {

                                        var $dot = $(this);

                                        if (!slitslider.isActive()) {

                                            $nav.removeClass('nav-dot-current');
                                            $dot.addClass('nav-dot-current');

                                        }

                                        slitslider.jump(i + 1);
                                        return false;

                                    });

                                });

                            };

                    return {init: init};

                })();

                Page.init();

            });
        </script>

  

 

siteslider 动画幻灯片,jquerysiteslider
在线实例 效果一 效果二 使用办法
divclass=”containerdemo-1″divid=”slider”class=”sl-slider-wrapper”divclass=”sl-sli…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website