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

Countdown script hours countdown Percentage goes Down

本文关键字：倒计时 小时 脚本 百分比      更新时间：2023-09-26

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

随着时间的倒数，折扣百分比减少并调整价格。

所以，它可能从100英镑开始，有70%的折扣，随着时间的减少，折扣减少，所以在69小时时，它是69%的折扣，30小时30%等等。

我找到了几个不错的图形片段如何创建一个循环倒计时计时器使用HTML, CSS或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);

我可以找到一个示例代码，以固定的%增加价格。但没有变化的百分比。

任何帮助都将非常感激。

我不确定这是否是您想要实现的，但请查看小提琴示例。

使用:

((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'));

希望有帮助。

相关文章：