javascript - 具有右箭头形状的自定义 div

Question

我需要有关如何实现 something like this 的帮助响应式地使用 bootstrap

html代码如下所示

 <div class="wrapper">
  <div class="container">
    <div class="special">
      <div id="counter">                
        <div id="shading"></div>
      </div>
    </div>
  </div>

下面是上面html代码的css文件

.special
{
  position: relative;
  width: 840px;
  height: 247px;
  background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/special_offer_bg.png');
  background-position: -10px 74px;
  background-repeat: no-repeat;
}
#counter
{
  position: absolute;
  top: 135px;
  left: 279px;
  z-index: 4000;
}
.digit-separator
{
  position: relative;
  float: left;
  width: 17px;
  height: 44px;
  overflow: hidden;
  background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/digit_separator.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
.digit
{
  background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/digits.png');
}
#shading
{
  background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/sprites.png');
  background-position: 0px -396px;
  background-repeat: repeat-x;
  float: left;
  height: 44px;
  position: absolute;
  width: 291px; 
  z-index: 4100;
  top: 0;
  left: 0;
}

请这是上述html代码的JavaScript代码

function C3Counter(id, opt) {

            this.options = {
                stepTime: 60, // not used
                format: "dd:hh:mm:ss", // not used 
                startTime: "01:04:40:59",
                digitImages: 1,
                digitWidth: 30,
                digitHeight: 44,
                digitSlide : true,
                digitSlideTime : 200,
                digitImageHeight : 484,
                digitAnimationHeight : 44, 
                timerEnd: function(){},
                image: "digits.png", 
                updateInterval : 1000

            };



            var s;

            if (typeof opt != "undefined") {
                for (s in this.options) {
                    if (typeof opt[s] != "undefined") {
                        this.options[s] = opt[s];
                    }
                }
            } 


            if (String(options.startTime).indexOf(":") == -1) {
                options.tempStartTime = options.startTime;
            } else {
                //TODO - does not convert time with : to seconds to count
                var td = new Date(options.startTime);
            }


            this.pad2 = function(number) {
                return (number < 10 ? '0' : '') + number;
            }



            var timer = setInterval( "this.updateCounter()", options.updateInterval);
            var startTime = new Date().getTime();
            var secNo = 0;
            var timerSingle = new Array();
            var dc = 0;
            var digits = new Array();
            var d = new Date();
            var lastTime = d.getTime();


            this.calculateTime = function() {
                var tempTime = options.tempStartTime;
                if (String(options.tempStartTime).indexOf(":") == -1) {  
                    var seconds=Math.round(options.tempStartTime % 60);
                    options.tempStartTime=Math.floor(options.tempStartTime/60);
                    var minutes=Math.round(options.tempStartTime % 60);
                    options.tempStartTime=Math.floor(options.tempStartTime/60);
                    var hours=Math.round(options.tempStartTime % 24);
                    options.tempStartTime=Math.floor(options.tempStartTime/24);
                    var days=Math.round(options.tempStartTime);
                    options.timeStr = this.pad2(days)+this.pad2(hours)+this.pad2(minutes)+this.pad2(seconds);

                }

                var currTime = new Date().getTime();
                var diff = currTime - startTime;

                options.tempStartTime = options.startTime - Math.round(diff/1000);
            }


            this.calculateTime();


            for (dc=0; dc<8; dc++) {
                digits[dc] = { digit: this.options.timeStr.charAt(dc)};


                $("#"+id).append("<div id='digit"+dc+"'  style='position:relative;float:left;width:"+this.options.digitWidth+"px;height:"+this.options.digitHeight+"px;overflow:hidden;'><div class='digit' id='digit-bg"+dc+"' style='position:absolute; top:-"+digits[dc].digit*this.options.digitAnimationHeight+"px; width:"+this.options.digitWidth+"px; height:"+this.options.digitImageHeight+"px; '></div></div>");


                if (dc % 2 == 1 && dc < 6) {
                    $("#"+id).append("<div class='digit-separator' style='float:left;'></div>");
                }
            }

            $("#"+id).append("<div style='clear:both'></div>");

            this.animateDigits = function() {
                for (var dc=0; dc<8; dc++) {
                    digits[dc].digitNext = Number(this.options.timeStr.charAt(dc));
                    digits[dc].digitNext = (digits[dc].digitNext + 10)%10;

                    var no = dc;

                    if (digits[no].digit == 0) $("#digit-bg"+no).css("top", -this.options.digitImageHeight+this.options.digitHeight + "px");
                    if (digits[no].digit != digits[no].digitNext) {
                        $("#digit-bg"+no).animate( { "top" : -digits[no].digitNext*options.digitHeight+"px"}, options.digitSlideTime);
                        digits[no].digit = digits[no].digitNext;
                    }

                }

                var end = this.checkEnd();
            }



            this.checkEnd = function() {
                for (var i = 0; i < digits.length; i++) {
                    if (digits[i].digit != 0) {
                        return false;
                    }
                }
                clearInterval(timer);
                this.options.timerEnd();
                return true;
            }

            this.updateCounter = function() {
                d = new Date();

                if ((d.getTime() - lastTime) < (options.updateInterval - 50)) {
                    return;
                }
                lastTime = d.getTime();

                this.calculateTime();
                this.animateDigits();
            }

        }
C3Counter("counter", { startTime :16100 });

Answer 1

注意*您需要使用 Bootstrap v3.3.4 或更高版本和 jQuery v2.1.3 或更高版本

注意* 这看起来不像您链接到的确切示例。使用默认的 boostrap 库不可能实现这一点。

html:

<div class="wrapper">
   <div class="special">
      <span id="clock"></span>
   </div>
</div>

js:

$('#clock').countdown('2020/10/10', function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
});

CSS:

.wrapper
{
  width: 100%;
  height: auto;
  background-color: #dc403b;
}
.special
{
  width:100%;
  background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/special_offer_bg.png');
  background-position: cover;
  background-repeat: no-repeat;
  text-align: center;
  padding: 50px 0;
  font-size: 18px;
}