美观大气域名更换自动跳转提示页面网址更换倒计时跳转中转页源码个性化域名跳转html单页源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站域名变更通知</title> <style> body {margin: 0;padding: 0;background: #f9f9f9;font-family: Arial, '微软雅黑', '宋体', sans-serif} .alert-box { display: none; position: relative; margin: 50px auto 0; padding: 535px 0 30px; border-radius: 20px; /*box-shadow: 5px 5px 10px rgb(102 102 102 / 35%);*/ width: 620px; height: 250px; color: #FFF; text-align: center;background: url(http://img.662p.com/uploadfile/i/2022/12/20/js_alert_box_bg.png) no-repeat center top #FFF; background-position: -30px 10px; border: 2px dashed #dadada; } .alert-box p {margin: 0} .alert-circle {position: absolute;top: 75px;left: 195px} .alert-sec-circle {stroke-dashoffset: 0;stroke-dasharray: 735;transition: stroke-dashoffset 1s linear} .alert-sec-text { position: absolute; top: 135px; left: 272px; width: 76px; color: #000; font-size: 68px; } .alert-sec-unit {font-size: 34px;} .alert-body {} .alert-title { font-size: 36px; background-color: #1f66e8; width: 440px; height: 100px; line-height: 100px; margin: 0 auto; top: -50px; left: 90px; position: absolute; border-radius: 0 0 20px 20px; } .alert-head { color: #242424; font-size: 26px; line-height: 80px; } .alert-concent { /*float: left;*/ margin:0 auto; color: #7B7B7B; font-size: 14px; border: 1px dashed #dadada;border-radius: 5px; padding: 5px 10px; background-color: #fbfbfb; width: 480px; height: 55px; text-align: left; } .alert-concent p { float: left; display: block; line-height: 27px; } .alert-concent p span { color: #3367ec; } .alert-concent div { float: left; display: block; line-height: 27px; width: 370px; } .alert-btn { /*float: right;*/ display: block; border-radius: 10px; background-color: #1f66e8; height: 50px; line-height: 55px; width: 200px; color: #FFF; font-size: 20px; text-decoration: none; letter-spacing: 2px; margin: 0 auto 30px auto; } .alert-btn:hover {background-color: #3d80fb} .alert-footer {margin: 0 auto;height: 42px;width: 120px} .alert-footer-icon {float: left} .alert-footer-text {float: left;border-left: 2px solid #EEE;padding: 3px 0 0 5px;height: 40px;color: #0B85CC;font-size: 12px;text-align: left}.alert-footer-text p {color: #7A7A7A;font-size: 22px;line-height: 18px} </style> </head> <body class="ie8"> <div id="js-alert-box" class="alert-box"> <svg class="alert-circle" width="234" height="234"> <circle cx="117" cy="117" r="108" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle> <circle id="js-sec-circle" class="alert-sec-circle" cx="117" cy="117" r="108" fill="transparent" stroke="#F4F1F1" stroke-width="18" transform=" rotate(-90 117 117)"></circle> <text class="alert-sec-unit" x="100" y="172" fill="#BDBDBD">秒</text> </svg> <div id="js-sec-text" class="alert-sec-text"></div> <div class="alert-body"> <div id="js-alert-title" class="alert-title">网站域名变更通知</div> <div id="js-alert-head" class="alert-head"></div> <a id="js-alert-btn" class="alert-btn" href="http://www.662p.com/">立即前往</a> <div class="alert-concent"> <p> <span>域名变更说明：</span> <div>请使用 <a href="http://www.662p.com/">www.662p.com</a>链接访问对应网站。感谢您的理解与支持。</div> </p> </div> </div> </div> <script> function alertSet(e) { document.getElementById("js-alert-box").style.display = "block", document.getElementById("js-alert-head").innerHTML = e; var t = t1 = 10,n = document.getElementById("js-sec-circle"); document.getElementById("js-sec-text").innerHTML = t, setInterval(function() { if (0 == t) { location.href = "http://www.662p.com/"; //#时间到后跳转地址 } else { t -= 1, document.getElementById("js-sec-text").innerHTML = t; var e = Math.round(t / t1 * 735); n.style.strokeDashoffset = e - 735 } }, 970); } </script> <script> alertSet('新域名：www.662p.com'); </script> </body> </html>
发表评论 取消回复