Question

我是编程新手，并且一直在尝试创建一个图形倒计时脚本，随着时间的推移降低价格折扣。

随着小时倒计时，百分比折扣减少并调整价格。

所以，它可以以100％的折扣开始，70％的折扣，随着时间的推移，折扣减少，69小时折扣减少69％，30％30％等。

我找到了几个不错的图形片段 How to create a circular countdown timer using HTML, CSS or JavaScript?

http://jsfiddle.net/lloydhester/4PKEB/204/

<div id="progressBar">
  <div></div>
</div>

<a href="https://stackoverflow.com/q/24530908/1238019" class="solink" target="_blank">Div CSS Transition Direction</a>

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(timeleft + " Time to go");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(180, 180, $('#progressBar'));

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

以％进行倒计时的脚本 http://jsfiddle.net/gS4Rr/1/

<div id="counter">
    <p><span>100</span>%</p>
</div>


var stop = 6;

function decrease(){
    var percent = Number($('#counter span').text());
    if(percent > stop){
        $('#counter span').text(--percent);
        var t = setTimeout(decrease,10000);
    }
}
setTimeout(decrease,1000);

我可以找到一个示例代码来将价格提高固定％。但不是因为变化％。

非常感谢任何帮助。

Answer 1

我不确定你想要实现的是什么，但要看看 Fiddle Example 。

使用：

((timeleft/timetotal)*100).toFixed(1)

以百分比显示倒计时。

Js：

 function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;

    $element.find('div').animate({ 
        width: progressBarWidth }, 500).html(((timeleft/timetotal)*100).toFixed(1) + "% Time to go");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(180, 180, $('#progressBar'));

希望有所帮助。

倒计时脚本小时倒计时百分比下降

1 个答案: