We_Relese/App/Relese/Views/Play/__/_Title.cshtml

@using WeApp.Helpers
@model WeApp.TrainingCamp.Dto.CampDto
<div class="area title-box" style="">
    <div class="d-flex current-time">
        <span id="current-time" class="time">
            <span>@(DateTime.Now.ToString("HH"))</span>:<span>@(DateTime.Now.ToString("mm"))</span>:<span>@(DateTime.Now.ToString("ss"))</span>
        </span>
        <span class="date ">
            <span class="week pb-2">@(DateTime.Today.ToString("dddd"))</span>
            <span class="day">@(DateTime.Today.ToString("yyyy年MM月dd日"))</span>
        </span>
    </div>
    <div class="title">
        @*<h4 class="m-0">应急演练培训推演平台</h4>*@
        <img src="~/Content/V2/Img/header-title.png" style=" " />
        <div class="svg-icon" style="">
            <svg width="768" height="80">
                <polyline fill="transparent" stroke-width="4" points="0,18 138.24,18 153.6,36 192,36 207.36,54 552.96,54 576,36 614.4,36 629.76,18 768,18" stroke="#00206e">
                    <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 396.73457750675294, 0, 396.73457750675294" to="0, 0, 793.47, 0" dur="3s" begin="0s" calcMode="spline" keyTimes="0;1" keySplines="0.4,1,0.49,0.98" repeatCount="indefinite"></animate>
                </polyline>
                <polyline fill="transparent" stroke-width="4" points="230.4,64 537.6,64" stroke="#00206e">
                    <animate attributeName="stroke-dasharray" attributeType="XML" from="0, 153.6, 0, 153.6" to="0, 0, 307.2, 0" dur="3s" begin="0s" calcMode="spline" keyTimes="0;1" keySplines=".4,1,.49,.98" repeatCount="indefinite"></animate>
                </polyline>
            </svg>
        </div>
    </div>
    <div class="time-down" id="time-down">
        <span>倒计时</span>
        <div class="time">
            <span></span>
            <span></span>
            <strong>:</strong>
            <span></span>
            <span></span>
        </div>
    </div>
</div>
@using (Html.BeginScripts())
{
    <script>
        $(function () {
            timeCurrent();
        });
        var currentTimer, $h = $('#current-time span').eq(0), $m = $('#current-time span').eq(1), $s = $('#current-time span').eq(2);
        function timeCurrent(time, rate) {
            clearInterval(currentTimer);
            rate = rate || 1;
            var today = new Date();
            time = (time || new Date()) - new Date(today.getFullYear(), today.getMonth(), today.getDate());
            currentTimer = setInterval(function () {
                time += 1000 * rate;
                var hour = parseInt(time / 1000 / 60 / 60 % 24),
                    minute = parseInt(time / 1000 / 60 % 60),
                    seconds = parseInt(time / 1000 % 60);

                if (hour < 10) {
                    hour = `0${hour}`;
                }
                if (minute < 10) {
                    minute = `0${minute}`;
                }
                if (seconds < 10) {
                    seconds = `0${seconds}`;
                }
                $h.html(hour);
                $m.html(minute);
                $s.html(seconds);
            }, 1000);
        }

        var downTimer, laveTime = 0, $m1 = $('#time-down .time span').eq(0), $m2 = $('#time-down .time span').eq(1), $s1 = $('#time-down .time span').eq(2), $s2 = $('#time-down .time span').eq(3);

        function timeDown(rate, time) {
            var arr = localStorage.getItem('@(Model.Id)-timeDown') ? localStorage.getItem('@(Model.Id)-timeDown').split(",") : null;
            arr = arr || [1000 * 60 * @(Model.MaxRoundMinute>0?Model.MaxRoundMinute:15), 1];
            rate = rate || arr[1];
            laveTime = time * 1000 * 60 || laveTime || arr[0];
            clearInterval(downTimer);
            downTimer = setInterval(function () {
                laveTime -= 1000 * rate;
                if (laveTime >= 0) {
                    //var day = parseInt(time / 1000 / 60 / 60 / 24);
                    //var hour = parseInt(time / 1000 / 60 / 60 % 24);
                    var  minute = parseInt(laveTime / 1000 / 60 % 60);
                    var seconds = parseInt(laveTime / 1000 % 60);
                    if (minute < 10) {
                        minute = `0${minute}`;
                    }
                    if (seconds < 10) {
                        seconds = `0${seconds}`;
                    }
                    $m1.html(minute.toString().substr(0, 1));
                    $m2.html(minute.toString().substr(1, 1));
                    $s1.html(seconds.toString().substr(0, 1));
                    $s2.html(seconds.toString().substr(1, 1));
                    localStorage.setItem('@(Model.Id)-timeDown', `${laveTime},${rate}`);
                } else {
                    localStorage.removeItem('@(Model.Id)-timeDown');
                }
            },
                1000);
        }

        iwbHub.client.getRefreshCurrentTime = function (msg) {
            console.log('getRefreshCurrentTime: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(Model.Id)') {
                            timeCurrent(data.rate, data.date);
                        }
                    }
                } catch (e) {
                    console.log('getRefreshCurrentTime: ', e);
                }
            }
        }

        iwbHub.client.getRefreshDownTime = function (msg) {
            console.log('getRefreshDownTime: ', msg);
            if (msg) {
                try {
                    //var data = JSON.parse(msg);
                    var data = msg;
                    if (data) {
                        if (data.no == '@(Model.Id)') {
                            timeDown(data.rate, data.minute);
                        }
                    }
                } catch (e) {
                    console.log('getRefreshDownTime: ', e);
                }
            }
        }
    </script>
}