购买成功5秒跳转页面
html
<div class="storageVolumes clearfix control_main_disk_right" ng-controller="buySucceedCtrl">
<!-- 购买成功 -->
<div class="buySucceedBox">
<img src="images/storage/v3-buySucceed-icon.png" alt="" />
<strong>购买成功!</strong>
<p><span class="js-wait"></span>s后自动跳转至控制台</p>
</div>
<!-- 返回 -->
<div class="back-disk-console">
<span >返回</span>
</div>
</div>
css
@charset "utf-8";
/* 购买成功 */
.buySucceedBox{
width: 100%;
text-align: center;
margin-top: 70px;
}
.buySucceedBox strong{
display: inline-block;
font-size: 16px;
color: #333;
margin-top: 18px;
width: 100%;
text-align: center;
}
.buySucceedBox p{
text-align: center;
color: #7d7d7d;
font-size: 14px;
margin-top: 22px;
}
/* 返回 */
.back-disk-console{
text-align: center;
margin-top: 22px;
}
.back-disk-console span{
display: inline-block;
width: 120px;
height: 36px;
line-height: 36px;
text-align: center;
background: #1574ff;
color: #fff;
border-radius: 2px;
cursor: pointer;
}
.back-disk-console span:hover{
background: #064eb7;
}
js
/*购买成功*/
sspaas.controller("buySucceedCtrl",["$scope","$rootScope","$http",function($scope,$rootScope,$http){
//倒计时
var timer;
var timewait = 6;
times ();
function times () {
if(timewait == 1){
window.location.href = 'http://127.0.0.1/sspaas/file/secondary/console/#/storage/consoleStorage';
clearTimeout(timer);
}else{
timewait--;
timer = setTimeout(function () {
times();
},1000)
}
$(".buySucceedBox p .js-wait").html(timewait);
};
}])
说明:需要引入jQuery , angularJs .
效果如下: