您的位置:68399皇家赌场 > 服务器租用 > www.68399.com:基于javascript完成的购物百货店商品倒

www.68399.com:基于javascript完成的购物百货店商品倒

发布时间:2019-08-23 21:46编辑:服务器租用浏览(145)

    基于javascript完成的购物超级市场商品倒计时实例,javascript购物商铺

    话相当少说,上边跟着笔者一同来看下实例代码吧

    Js:

    /**
     * Author: Black_Jay郗
     * downCount: 时间转换 倒计时
     */
    (function ($) {
      $.fn.downCount = function (options, callback) {
        var settings = $.extend({
            date: null,
            offset: null
          }, options);
        if (!settings.date) {
          $.error('Date is not defined.');
        }
        if (!Date.parse(settings.date)) {
          $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
        }
        var container = this;
        var currentDate = function () {
          var date = new Date();
          /*var utc = date.getTime()   (date.getTimezoneOffset() * 60000);
          var new_date = new Date(utc   (3600000*settings.offset));*/
          return date;
        };
        function countdown () {
          var target_date = new Date(settings.date),
            current_date = currentDate();
          var difference = target_date - current_date;
          if (difference < 0) {
            clearInterval(interval);//取消 setInterval() 函数设定的定时执行操作
            if (callback && typeof callback === 'function') callback();
            return;
          }
          var _second = 1000,
            _minute = _second * 60,
            _hour = _minute * 60,
            _day = _hour * 24;
          var days = Math.floor(difference / _day),
            hours = Math.floor(((difference % _day) / _hour)   (days*24)),
            minutes = Math.floor((difference % _hour) / _minute),
            seconds = Math.floor((difference % _minute) / _second);
            days = (String(days).length >= 2) ? days : '0'   days;
            hours = (String(hours).length >= 2) ? hours : '0'   hours;
            minutes = (String(minutes).length >= 2) ? minutes : '0'   minutes;
            seconds = (String(seconds).length >= 2) ? seconds : '0'   seconds;
          container.find('.hours').text(hours);
          container.find('.minutes').text(minutes);
          container.find('.seconds').text(seconds);
        };
        var interval = setInterval(countdown, 1000);
      };
    })(jQuery);
    

    html:

    <!-- 倒计时显示Star -->
    <p class="countdown">
      00:
      00:
      00
    </p>
    <!-- 倒计时End -->
    

    谈到底输入你想要的截至时间

    JS:

    $('.countdown').downCount({
      date: '11/09/2016 13:45:00',
      offset:  10
    }, function () {
      alert('秒杀已结束');
    });
    

    上述就是本文的全体内容,希望本文的开始和结果对大家的上学大概职业能带来一定的接济,同时也期待多多扶助帮客之家!

    话十分少说,下边跟着作者一齐来看下实例代码吧 Js: /** * Author: Black_Jay郗 *...

    话十分少说,上边跟着小编一同来看下实例代码吧

    JavaScript仿百货店达成图片广告轮播实例代码,javascript图片广告

    世家在逛购物商铺的时候不精晓有没有理会到超级市场首页下面都会有种种轮播广告,效果相当好,下边我给大家整理特此分享给大家学习。具体内容如下所示:

    1.HTML框架

    正如图,分为八个部分,首先有个div承载,然后叁个ul寄存图片,三个ul贮存数字,再五个button即可

     

    <div class="out">
    <ul class="img">
    <li><img src="img/1.png" alt="www.68399.com 1"></li>
    <li><img src="img/2.png" alt="www.68399.com 2"></li>
    <li><img src="img/3.png" alt="www.68399.com 3"></li>
    <li><img src="img/4.png" alt="www.68399.com 4"></li>
    <li><img src="img/5.png" alt="www.68399.com 5"></li>
    </ul>
    <ul class="num">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    <input class="left btn" type="button" value="<">
    <input class="right btn" type="button" value=">">
    </div>
    

    2.CSS配置

    先是外框div要设置和图片大小一致,而且居中对齐,position设置为相对牢固,因为背后的图样什么的都是相对这么些大框来相对定位的

    //div外框
    .out{
    width: 560px;
    height: 350px;
    margin: 0 auto;
    position: relative;
    border: 2px solid red;
    }
    

    随着设置图片,五张图片叠合那几个通过absolute那本本性来促成,因为上面大家把父级容器设置为relative,所以里面包车型客车子成分都以周旋父级div来相对定位的

    .img {
    list-style-type: none;
    }
    .img li{
    position: absolute;
    top:0;
    cursor: pointer;
    }
    

    接下去的其余因素小编会用注释写到代码中

    .num{
    list-style-type: none;
    /*这个属性会使得text-align失效,所以下面手动写上宽度即可*/
    position: absolute;
    width: 100%;
    bottom:0;
    text-align: center;
    }
    .num li{
    width: 20px;
    height: 20px;
    /*行高这个属性使得元素垂直居中*/
    line-height: 20px;
    text-align: center;
    /*inline-block使得所有元素按行排列*/
    display: inline-block;
    background-color: #4a4a4a;
    color: #fff;
    border-radius: 50%;
    /*鼠标放上去会有小手*/
    cursor: pointer;
    }
    /*鼠标放到图片上的时候才显示btn*/
    .out:hover .btn{
    display: block;
    }
    .btn{
    width: 30px;
    height: 50px;
    position: absolute;
    display: none;
    /*通过top和margin来定位属性到垂直居中*/
    top: 50%;
    margin-top: -30px;
    border: 0;
    /*使用rgba可以修改透明度*/
    background-color: rgba(0,0,0,.5);
    color: #fff;
    }
    .right{
    right: 0;
    }
    

    www.68399.com ,效用如下:

     

    3.jquery决定轮播

    达成手动轮播

    意思就是鼠标移到上面数字,就展现相应的图样

    //手动控制轮播图
    $(".img li").eq(0).fadeIn(300);//加载页面的时候让第一个图片显示
    $(".num li").eq(0).addClass("active");//给序号为1的加上红色背景
    $(".num li").mouseover(function () {
    //当前的数字显示红色背景,其他的数字都隐藏背景
    $(this).addClass("active").siblings().removeClass("active");
    //当前数字对应的图片显示,其他图片都隐藏
    var index = $(this).index();
    $(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
    })
    

    完成全自动轮播

    //实现自动轮播
    var i = 0;//计时器控制数字
    var t = setInterval(move,1500);
    //该方法显示与序号对应的图片
    function move() {
    if (  i ==5){
    i = 0;
    }
    $(".num li").eq(i).addClass("active").siblings().removeClass("active");
    $(".img li").eq(i).stop().fadeIn(300).siblings().stop().fadeOut(300);
    }
    //鼠标移入后停止自动轮播
    $(".out").hover(function () {
    clearInterval(t);
    }, function () {
    t = setInterval(move,1500);
    });
    

    贯彻点击轮播

    //按钮移动事件
    $(".right").click(function () {
    move();
    });
    $(".left").click(function () {
    i = i-2;
    move();
    });
    

    动态调整li数字突显数量

    经过图片数量调节标签数量就可以

    //手动控制li数量
    var size = $(".img li").size();
    for (var k=1;k<=size;k  ){
    $(".num").append("<li>" k "</li>");
    }
    $(".num li").eq(0).addClass("active");
    

    javascript仿京东导航侧面分类导航下拉菜单效果,javascript分类导航

    正文实例为大家大饱眼福了看似于京东、天猫商城市廛侧边分类导航下拉菜单,供大家参谋,具体内容如下

    效果图:

     www.68399.com 6

    兑今世码:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="gb2312">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title></title>
      <style>
       *{margin:0;padding:0;}
       .ul{position:relative;width:200px;height:auto;} 
       .ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}
       .ul li a{display:block;background:#fff;color:#000;text-decoration:none;}
       .ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}
       .ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}
       .ul li div dl dd{float:left; width:100px;}
       .ul .liname div{display:block;}
      </style>
      <script>
        window.onload=function(){
          var aLi=document.getElementsByTagName("li");
          for(var i=0;aLi.length>i;i  ){
            aLi[i].i=i;
            aLi[i].onmouseover=function(){
              this.className="liname";
    
              var h1=this.i*25;
              var h2=this.getElementsByTagName("div")[0].offsetHeight;
              if(h2<h1){
                this.getElementsByTagName("div")[0].style.top=h1 'px';
              }
    
            }
            aLi[i].onmouseout=function(){
              this.className="";
            }
          }
        }
      </script>
    </head>
    <body>
      <ul class="ul">
        <li>
          <a href="">类别1</a>
          <div class="div">
            <dl>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
            </dl>
          </div>
        </li>
        <li>
        <a href="">类别2</a>
          <div class="div">
            <dl>
              <dd>类别2</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
            </dl>
          </div>
        </li>
        <li><a href="">类别3</a><div class="div">
            <dl>
              <dd>类别3</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
            </dl>
          </div>
          </li>
        <li><a href="">类别4</a><div class="div">
            <dl>
              <dd>类别4</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
            </dl>
          </div>
          </li>
        <li><a href="">类别5</a><div class="div">
            <dl>
              <dd>类别5</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
            </dl>
          </div>
          </li>
        <li><a href="">类别6</a><div class="div">
            <dl>
              <dd>类别6</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
            </dl>
          </div>
          </li>
        <li><a href="">类别7</a><div class="div">
            <dl>
              <dd>类别7</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
            </dl>
          </div>
          </li>
        <li><a href="">类别8</a><div class="div">
            <dl>
              <dd>类别8</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
              <dd>类别1</dd>
            </dl>
          </div>
          </li>
      </ul>
    </body>
    </html>
    

    梦想本文所述对大家学习javascript程序设计具有援助。

    Js:

    你大概感兴趣的小说:

    • js实现协理手提式有线电话机滑动切换的轮播图片效果实例
    • 原生js和jquery实现图片轮播淡入淡出效果
    • 原生js和jquery完成图片轮播特效
    • JS完结简易图片轮播效果的秘籍
    • js达成点击左右开关轮播图片效果实例
    • 用box固定长度宽度实现图片自动轮播js代码
    • js图片自动轮播代码分享(js图片轮播)
    • 简简单单的js图片轮换代码(js图片轮播)
    • 带左右箭头图片轮播的JS代码
    • 原生javascript完成图片轮播效果代码
    • js 图片轮播(5张图片)

    大家在逛购物商店的时候不知道有没有留神到超级市场首页上边都会有各类轮播广...

    你只怕感兴趣的篇章:

    • 能够比美Flash的JS导航菜单
    • JS实多级联合浮动下拉菜单类,轻松达成省市区联合浮动菜单!
    • JavaScript 下拉菜单完成代码
    • css js下拉菜单
    • 下拉菜单点击完毕再而三跳转职能的js代码
    • Js点击弹出下拉菜单功效实例
    • js下拉菜单语言选取简单完毕
    • JS 完毕导航栏悬停效率
    • jsp少将后台传递过来的json格式的list数据绑定到下拉菜单select
    • JS CSS 制作的拔尖轻松的下拉菜单附图

    本文实例为大家大饱眼福了就疑似于京东、Tmall百货店右侧分类导航下拉菜单,供...

    /**
     * Author: Black_Jay郗
     * downCount: 时间转换 倒计时
     */
    (function ($) {
      $.fn.downCount = function (options, callback) {
        var settings = $.extend({
            date: null,
            offset: null
          }, options);
        if (!settings.date) {
          $.error('Date is not defined.');
        }
        if (!Date.parse(settings.date)) {
          $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
        }
        var container = this;
        var currentDate = function () {
          var date = new Date();
          /*var utc = date.getTime()   (date.getTimezoneOffset() * 60000);
          var new_date = new Date(utc   (3600000*settings.offset));*/
          return date;
        };
        function countdown () {
          var target_date = new Date(settings.date),
            current_date = currentDate();
          var difference = target_date - current_date;
          if (difference < 0) {
            clearInterval(interval);//取消 setInterval() 函数设定的定时执行操作
            if (callback && typeof callback === 'function') callback();
            return;
          }
          var _second = 1000,
            _minute = _second * 60,
            _hour = _minute * 60,
            _day = _hour * 24;
          var days = Math.floor(difference / _day),
            hours = Math.floor(((difference % _day) / _hour)   (days*24)),
            minutes = Math.floor((difference % _hour) / _minute),
            seconds = Math.floor((difference % _minute) / _second);
            days = (String(days).length >= 2) ? days : '0'   days;
            hours = (String(hours).length >= 2) ? hours : '0'   hours;
            minutes = (String(minutes).length >= 2) ? minutes : '0'   minutes;
            seconds = (String(seconds).length >= 2) ? seconds : '0'   seconds;
          container.find('.hours').text(hours);
          container.find('.minutes').text(minutes);
          container.find('.seconds').text(seconds);
        };
        var interval = setInterval(countdown, 1000);
      };
    })(jQuery);
    

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:www.68399.com:基于javascript完成的购物百货店商品倒

    关键词: 68399皇家赌场

上一篇:chenxi的html学习笔记

下一篇:没有了