Передача бритвенной переменной в функцию JavaScript - PullRequest
Новая
       4

Передача бритвенной переменной в функцию JavaScript

0 голосов
/ 05 июля 2018

Я работаю на аукционном сайте в Asp.net MVC и пытаюсь показать, сколько времени осталось на аукционе каждого предмета. Я передаю список элементов на мою страницу cshtml с моей моделью, а затем перебираю их так:

Моя функция JavaScript для запуска таймера: 

function countdown(time) {
    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = time - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Display the result in the element with id="timeLeft"
    document.getElementById("timeLeft").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";

}, 1000);

Затем мой итератор моей Модели, вызывающий функцию js с датой окончания элемента 

@foreach (var item in Model)
    {
        //code here
        countdown(@item.EndDate)
        <text id="timeLeft"></text>
    }

На мой скрипт ссылается <script src="~/Scripts/countdown.js" />

Проблема, с которой я сталкиваюсь, заключается в том, как вызвать эту функцию js с помощью переменной бритвы c #. Делать что-то базовое для одного предмета, например: 

<body onload= "countdown('@item.EndDate')">

Когда я помещаю свою переменную бритвы, она отключает мою функцию. Как мне нужно передать мою переменную в мою функцию js?
EX: (с единичным элементом модели)
enter image description here enter image description here

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

Если вы хотите сделать таймер в javascript, я бы использовал функцию window.setInterval, затем установите второй параметр равным временному интервалу.

Эта функция countdown должна передавать три параметра

  1. Конец года
  2. Конец месяца
  3. Конец Дня 

    function countdown(endYear,endMonth,endDay) {
    	 window.setInterval(function () { StartCount(endYear, endMonth, endDay, 'andy timer'); }, 1000);
    }

    function StartCount(endYear,endMonth,endDay){
    	var now=new Date();
    	var endDate=new Date(endYear,endMonth-1,endDay);

    	var leftTime=endDate.getTime() - now.getTime();

    	var leftSecond=parseInt(leftTime/1000);

    	var day=Math.floor(leftSecond/(60*60*24));

    	var hour=Math.floor((leftSecond-day*24*60*60)/3600);

    	var minute=Math.floor((leftSecond - day * 24 * 60 * 60 - hour * 3600) / 60);

    	var second = Math.floor(leftSecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60);
    	
          document.getElementById("timeLeft").innerHTML = day + "d " + hour + "h "
        + minute + "m " + second + "s ";
    }

    countdown(2018,10,5)
<div id='timeLeft'></div>

Вы можете использовать это на теге тела 

<body onload= "countdown(@Model.EndDate.Year,@Model.EndDate.Month,@Model.EndDate.Day)">

EDIT

Работает на c # MVC онлайн: https://dotnetfiddle.net/ERcwAb

0 голосов
/ 06 июля 2018

Я придумал сумасшедший способ сделать то, что пытался сделать, может быть неэффективным, может быть грехом для всего сообщества программистов, но вот оно: 

@foreach (var item in Model)
{
    <script>
    function countdown(endYear, endMonth, endDay, endHours, endMin, num) {
        window.setInterval(function () { StartCount(endYear, endMonth, endDay, endHours, endMin, num); }, 1000);
    }

    function StartCount(endYear, endMonth, endDay, endHours, endMin, num) {
        var now = new Date();
        var endDate = new Date(endYear, endMonth - 1, endDay, endHours, endMin);

        var leftTime = endDate.getTime() - now.getTime();

        var leftSecond = parseInt(leftTime / 1000);

        var day = Math.floor(leftSecond / (60 * 60 * 24));

        var hour = Math.floor((leftSecond - day * 24 * 60 * 60) / 3600);

        var minute = Math.floor((leftSecond - day * 24 * 60 * 60 - hour * 3600) / 60);

        var second = Math.floor(leftSecond - day * 24 * 60 * 60 - hour * 3600 - minute * 60);

        var id = "timeLeft" + num;

        document.getElementById(id).innerHTML = day + "d " + hour + "h "
      + minute + "m " + second + "s ";
    }
    countdown(@item.EndDate.Year, @item.EndDate.Month, @item.EndDate.Day,@item.EndDate.Hour, @item.EndDate.Minute, @num)
    </script>

    @{string countNum = "timeLeft" + num;}
     <text id= @countNum></text>
     @{num++;}
     //code
}

Но он все равно загружается асинхронно, где все элементы будут загружаться, затем все часы появляются через секунду, и весь контент перемещается соответственно. Может быть из-за моей первоначальной проблемы с невозможностью вызвать нагрузку на тело.

0 голосов
/ 05 июля 2018

Попробуйте использовать следующий синтаксис: 

@foreach (var item in Model)
{
    //code here
    countdown(`${@item.EndDate}`)
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...