lql
/
fj-dc-ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        html,body,header,section,footer,div,ul,ol,li,img,a,span,input,textarea,h1,h2,h3,h4,h5,h6,p{
            margin:0;
            border:0;
            padding:0;
            font-style:normal;
        }
        .mainBox{
            padding: 15px;
        }
        .first_p{
            font-size: 16px;
            text-indent: 2em;
            line-height: 32px;
        }
        .second_p,.third_p{
            margin-top: 20px;
        }
        .fourth_p{
            margin:15px;
        }
        .sure{
            display: inline-block;
            width: 100%;
            margin-top: 30px;
            text-align: center;
            width: 100%;
            height: 2rem;
            border-radius: 4px;
            border: 2px solid #3699FF;
            line-height: 2rem;
            color: #ffffff;
            background-color: #3699FF;
            font-size: 1em;
        }
        .cancel{
            margin-top: 20px;
            display: inline-block;
            text-align: center;
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            color: #999999;
            font-size: 1em;
        }
        .aui-radio {
            outline: none;
            width: 1.2rem;
            height: 1.2rem;
            background-color: #ffffff;
            border: solid 1px #dddddd;
            -webkit-border-radius: 0.6rem;
            border-radius: 0.6rem;
            font-size: 0.8rem;
            margin: 0;
            padding: 0;
            position: relative;
            display: inline-block;
            vertical-align: top;
            cursor: default;
            -webkit-appearance: none;
            -webkit-user-select: none;
                    user-select: none;
            -webkit-transition: background-color ease 0.1s;
                    transition: background-color ease 0.1s;
        }
        .aui-radio:checked,
        .aui-radio.aui-checked{
            background-color: #3699FF;
            border: solid 1px #3699FF;
            text-align: center;
            background-clip: padding-box;
        }
            .aui-radio:checked:before,
            .aui-radio.aui-checked:before,
            .aui-radio:checked:after,
            .aui-radio.aui-checked:after{
                content: '';
                width: 0.5rem;
                height: 0.3rem;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -0.25rem;
                margin-top: -0.25rem;
                background: transparent;
                border: 1px solid #ffffff;
                border-top: none;
                border-right: none;
                z-index: 2;
                -webkit-border-radius: 0;
                        border-radius: 0;
                -webkit-transform: rotate(-45deg);
                        transform: rotate(-45deg);
            }
    </style>
</head>
<body>
    <div class="mainBox">
        <h4>
            尊敬的<span id="name">xxx</span>专家：
        </h4>

        <p class="first_p">
            您好！因工作需要，水利部建设质量与管理安全中心（建安中心）诚邀您参加<span id="year">2019</span>年度第<span id="pici">xx</span>批次稽察工作。您所要稽察的地点是：<span>北京市、天津市</span>，本次稽察工作开始时间为：<span>2019年10月21日</span>。请您根据自身情况，在限制时间内选择是否参加本次稽察工作，谢谢！
        </p>
        <p class="second_p">
            <div id="countdown"></div>
        </p>
        <p class="third_p">
            请选择是否参加：
        </p>
        <p class="fourth_p aui-content-padded">
            <label style="margin-right: 30px;"><input class="aui-radio" type="radio" name="demo" checked="" > 参加</label>
            <label><input class="aui-radio" type="radio" name="demo"> 不参加</label>
        </p>
        <div class="btnBox">
            <span class="sure">确定</span>
            <span class="cancel">返回登录</span>
        </div>
    </div>
        <script>
            function ShowCountDown(year,month,day,divname)
            {
                var now = new Date();
                var endDate = new Date(year, month, day);
                var leftTime=endDate.getTime()-now.getTime();
                var dd = parseInt(leftTime / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
                var hh = parseInt(leftTime / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
                var mm = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟数
                var ss = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
                dd = checkTime(dd);
                hh = checkTime(hh);
                mm = checkTime(mm);
                ss = checkTime(ss);//小于10的话加0
                var cc = document.getElementById(divname);
                cc.innerHTML = "距离" + year + "年" + month + "月" + day + "日还有：<br/><p style='margin-top:20px;text-align:center;'>" + dd + "天" + hh + "小时" + mm + "分" + ss+ "秒</p>";
            }
            function checkTime(i)
            {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
            window.setInterval(function(){ShowCountDown(2019,11,11,'countdown');}, 1000);
        </script>
</body>
</html>