Powered by md-Blog  文 - 篇  访客 -

写一个手机旋转倒计时


更新:2020-02-19 19:58:34  /  创建:2020-02-19 19:58:34  /  分类:写一个Demo  / 
不要删除

1、先看效果

img

2、demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if IE 8]><style>.ie8 .alert-circle,.ie8 .alert-footer{display:none}.ie8 .alert-box{padding-top:75px}.ie8 .alert-sec-text{top:45px}</style><![endif]-->
<title>手机旋转倒计时</title>
<style>
.alert-box {
    position: fixed;
    top:10px;
    right:10px;
    background: #dedede;
    width:140px;
}

.alert-circle {
    position: absolute;
}
.alert-sec-circle {
    stroke-dashoffset: 0;
    stroke-dasharray: 735;
    transition: stroke-dashoffset 1s linear
}
.alert-sec-text {
    position: absolute;
    line-height: 140px;
    text-align: center;
    width:140px;
    top:-14px;
    height: 140px;
    color:#2a2a2a;
    font-size: 50px;
}
.alert-head{
    position: absolute;
    line-height: 140px;
    top:20px;
    color:#000;
    text-align: center;
    width:140px;
    height: 140px;
    font-size:22px;
}
</style>
</head>

<body class="ie8">
<div id="js-alert-box" class="alert-box">
    <svg class="alert-circle" width="140" height="140">
        <circle cx="70" cy="70" r="50" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle>
        <circle id="js-sec-circle" class="alert-sec-circle" cx="70" cy="70" r="50" fill="transparent" stroke="#F4F1F1" stroke-width="18" transform="rotate(-90 70 70)"></circle>
    </svg>
  <div id="js-sec-text" class="alert-sec-text"></div>
  <div class="alert-body">
    <div id="js-alert-head" class="alert-head"></div>
    </div>
</div>
<script>
function alertSet(e) {
    document.getElementById("js-alert-box").style.display = "block",
    document.getElementById("js-alert-head").innerHTML = e;
    var t = 10,
    n = document.getElementById("js-sec-circle");
    document.getElementById("js-sec-text").innerHTML = t,
    setInterval(function() {
        if (0 == t){
            // location.href="";
        }else {
            t -= 1,
            document.getElementById("js-sec-text").innerHTML = t;
            var e = Math.round(t / 10 * 314);
            n.style.strokeDashoffset = e - 314;
        }
    },970);
}
</script>

</body>
</html>
<script>alertSet('跳过');</script>
不要删除

小站不易,感谢支持!