222 lines
7.0 KiB
HTML
222 lines
7.0 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
|
|||
|
|
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
|
|||
|
|
<title>Hello APP</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../css/api.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../css/content.css" />
|
|||
|
|
<style type="text/css">html,body{background: none;}
|
|||
|
|
.box{
|
|||
|
|
/* 最外层的盒子 */
|
|||
|
|
width:50px;
|
|||
|
|
height:50px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: pink;
|
|||
|
|
}
|
|||
|
|
.left_box,.right_box{
|
|||
|
|
/*
|
|||
|
|
左右两边用于 隐藏 旋转的div的盒子
|
|||
|
|
通过overflow来隐藏内部div旋转出去的部分
|
|||
|
|
*/
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
width:25px;
|
|||
|
|
height:50px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
.left_box{
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
.right_box{
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
.left_item,.right_item{
|
|||
|
|
/* 这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条) 为了方便理解，下面用deeppink和cyan分别设置了左右两边div的颜色 */
|
|||
|
|
width:25px;
|
|||
|
|
height:50px;
|
|||
|
|
}
|
|||
|
|
.left_item{
|
|||
|
|
/*
|
|||
|
|
1.设置圆角，圆角大小为高度的一半
|
|||
|
|
2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点
|
|||
|
|
*/
|
|||
|
|
border-top-left-radius: 100px;
|
|||
|
|
border-bottom-left-radius: 100px;
|
|||
|
|
-webkit-transform-origin: right center;
|
|||
|
|
transform-origin: right center;
|
|||
|
|
background-color: deeppink;
|
|||
|
|
}
|
|||
|
|
.right_item{
|
|||
|
|
border-top-right-radius: 100px;
|
|||
|
|
border-bottom-right-radius: 100px;
|
|||
|
|
-webkit-transform-origin: left center;
|
|||
|
|
transform-origin: left center;
|
|||
|
|
background-color: deeppink;
|
|||
|
|
}
|
|||
|
|
.mask{
|
|||
|
|
/* 遮住div多余的部分，呈现出线条的效果 */
|
|||
|
|
position: absolute;
|
|||
|
|
top: 5px;
|
|||
|
|
left: 5px;
|
|||
|
|
right: 5px;
|
|||
|
|
bottom: 5px;
|
|||
|
|
width: 40px;
|
|||
|
|
height:40px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
z-index: 2;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #fff;
|
|||
|
|
color:#000;
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes loading_left{
|
|||
|
|
0%{
|
|||
|
|
-webkit-transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
50%{
|
|||
|
|
-webkit-transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
100%{
|
|||
|
|
-webkit-transform: rotate(180deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@-webkit-keyframes loading_right{
|
|||
|
|
0%{
|
|||
|
|
-webkit-transform: rotate(0deg);
|
|||
|
|
}
|
|||
|
|
50%{
|
|||
|
|
-webkit-transform: rotate(180deg);
|
|||
|
|
}
|
|||
|
|
100%{
|
|||
|
|
-webkit-transform: rotate(180deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="box">
|
|||
|
|
<div class="left_box">
|
|||
|
|
<div class="left_item"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right_box">
|
|||
|
|
<div class="right_item"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mask"></div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script type="text/javascript" src="../script/api.js"></script>
|
|||
|
|
<script type="text/javascript" src="../script/main.js"></script>
|
|||
|
|
<script type="text/javascript" src="../script/moment.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var videoid=null;
|
|||
|
|
var userId=null;
|
|||
|
|
var LoginId=null;
|
|||
|
|
var closeInterval = null;
|
|||
|
|
apiready = function() {
|
|||
|
|
|
|||
|
|
rdata();
|
|||
|
|
};
|
|||
|
|
function rdata(){
|
|||
|
|
var msecond=$api.getStorage("msecond");
|
|||
|
|
var isView=$api.getStorage("isView");
|
|||
|
|
var isPlay=$api.getStorage("isPlay");
|
|||
|
|
|
|||
|
|
if(isPlay!=null && isView!=null&&msecond!=null){
|
|||
|
|
msecond=parseInt(msecond);
|
|||
|
|
if(isPlay=="true" && isView=="false"){
|
|||
|
|
if(closeInterval!=null){
|
|||
|
|
clearInterval(closeInterval);
|
|||
|
|
}
|
|||
|
|
$api.css($api.dom(".box"),"display:block;");
|
|||
|
|
$api.css($api.dom(".left_item"),"-webkit-animation: loading_left "+msecond+"s linear;");
|
|||
|
|
$api.css($api.dom(".right_item"),"-webkit-animation: loading_right "+msecond+"s linear;");
|
|||
|
|
|
|||
|
|
$api.html($api.dom(".mask"),msecond);
|
|||
|
|
|
|||
|
|
closeInterval = setInterval(function () {
|
|||
|
|
msecond-=1;
|
|||
|
|
if (msecond<0) {
|
|||
|
|
msecond=0;
|
|||
|
|
}
|
|||
|
|
$api.setStorage("msecond",msecond);
|
|||
|
|
$api.html($api.dom(".mask"),msecond);
|
|||
|
|
if (msecond==0) {
|
|||
|
|
clearInterval(closeInterval);
|
|||
|
|
videoreward();
|
|||
|
|
//execScript0("video_content", "pausevideo()");
|
|||
|
|
$api.css($api.dom(".box"),"display:none;");
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
}else{
|
|||
|
|
$api.css($api.dom(".box"),"display:none;");
|
|||
|
|
if(closeInterval!=null){
|
|||
|
|
clearInterval(closeInterval);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
$api.css($api.dom(".box"),"display:none;");
|
|||
|
|
if(closeInterval!=null){
|
|||
|
|
clearInterval(closeInterval);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function displaycircle(){
|
|||
|
|
$api.css($api.dom(".box"),"display:none;");
|
|||
|
|
if(closeInterval!=null){
|
|||
|
|
clearInterval(closeInterval);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function videoreward(){
|
|||
|
|
videoid=$api.getStorage("videoid");
|
|||
|
|
userId=$api.getStorage("userId");
|
|||
|
|
LoginId=$api.getStorage("LoginId");
|
|||
|
|
if(userId!=null){
|
|||
|
|
|
|||
|
|
api.ajax({
|
|||
|
|
url : apiurl+"/apiajax.ashx",
|
|||
|
|
method:'post',
|
|||
|
|
dataType : 'json',
|
|||
|
|
data:{values: {
|
|||
|
|
action:"videoreward",
|
|||
|
|
userId:userId,
|
|||
|
|
LoginId:LoginId,
|
|||
|
|
id:videoid
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
function(data2, status) {
|
|||
|
|
if(data2){
|
|||
|
|
|
|||
|
|
if(data2.status==1){
|
|||
|
|
$api.setStorage("userinfo",$api.jsonToStr(data2.userInfo));
|
|||
|
|
execScript1("my","my_content", "rdata(1);");
|
|||
|
|
execScript1("video","video_content", "delVideo();");
|
|||
|
|
toast(data2.msg);
|
|||
|
|
}else{
|
|||
|
|
|
|||
|
|
toast(data2.msg);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}else {
|
|||
|
|
toast("网络错误！");
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function closesecond(){
|
|||
|
|
if(closeInterval!=null){
|
|||
|
|
clearInterval(closeInterval);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</html>
|