如何在JavaScript的标签的innerHTML中放置多个值?

时间:2019-09-22 13:09:29

标签: javascript laravel laravel-5 dom countdown

首先在我的代码中,我得到输入字段的值。它正在工作,但是当我尝试在倒数标记中附加天,分,秒值时,它仅在foreach循环创建两个倒数标记时才出现一次。

我试图通过循环来赋予价值

var chek=  document.getElementsByClassName('countdown')[i].innerHTML = days +':' + hours +':'+minutes+':' + seconds ;

HTML代码

<div id="mydiv">
@foreach($auction as $auctions)
@php
$time= Carbon::createFromFormat('H:i:s',Carbon::now('Asia/Karachi')->toTimeString())->diff(Carbon::createFromFormat('H:i:s',$auctions->duration))->format('%H:%I:%S');
    list($h, $m, $s) = explode(':', $time);
    $countdown=($h * 3600) + ($m * 60) + $s;
@endphp
<input class="seconds" type="text" value="{{$countdown}}">
<span class="countdown"></span>
@endforeach
</div>

javascript代码

<script>
var i=0;

for(i=0;i<document.getElementById("mydiv").getElementsByClassName("seconds").length;i++)

{
     var current_level= document.getElementById("mydiv").getElementsByClassName("seconds")[i].value;


     console.log(current_level);


     function timer() {

        var days = Math.floor(current_level/86400);
        var remainingDays = current_level - (days * 86400);



        var hours = Math.floor(remainingDays/3600);
        var remainingHours = remainingDays - (hours * 3600);



        var minutes = Math.floor(remainingHours/60);
        var remainingMinutes = remainingHours - (minutes * 60);


        var seconds = remainingMinutes;

      var chek=  document.getElementsByClassName('countdown')[0].innerHTML = days +':' + hours +':'+minutes+':' + seconds ;

 console.log(chek);

        if(days>=1 || hours>=1 || minutes>=1  || seconds>=1){

        current_level--;
        }
     }
    }
     var countdownTimer = setInterval(timer, 1000);

</script>

代码显示两个输入字段时,它还应该显示两个倒数。

0 个答案:

没有答案