Skip to content

S
SURPRISED
Commit cb3fab82 authored by Mac's avatar Mac
Browse files
Options

跟团游倒计时活动

parent b28b84d9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 862 additions and 9 deletions
css/GT_activities.css 0 → 100644
View file @ cb3fab82
html,body{
height:100%;
margin: 0;
padding: 0;
}
p{
display:block;
-webkit-margin-before:0;
-webkit-margin-after:0;
}
#box{
width: 100%;
height: 100%;
background-color: skyblue;
background-image: url(../images/bg2@3x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding-top: 0.7rem;
position: relative;
}
.box_title{
width: 80%;
margin-left: 10%;
height: 2.38rem;
background: white;
border-radius: 0.08rem;
position: relative;
}
.box_title .G_img{
width: 0.56rem;
height: 0.57rem;
position: absolute;
left: 1.23rem;
top: -0.235rem;
}
.box_title h5{
font-size: 0.35rem;
color: #C72220;
margin-block-start: 0;
margin-block-end: 0;
text-align: center;
padding-top: 0.35rem;
/*font-weight: bold;*/
}
.box_title .box_limit{
width: 2.2rem;
margin: 0.2rem auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.box_text{
font-size: 0.2rem;
color: #111111;
float: left;
}
.box_d{
width: 0.45rem;
height: 0.7rem;
background: #C72220;
float: left;
margin: 0 0.05rem;
border-radius: 0.05rem;
}
.box_d p{
font-size: 0.54rem;
color: white;
text-align: center;
line-height: 0.7rem;
}
.box_content{
width: 100%;
height: 5.2rem;
background-image: url(../images/bg1@3x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 1.48rem;
}
.box_content .box_content_t{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.t_name{
font-size: 0.16rem;
color: white;
}
.time_view{
width: 0.37rem;
height: 0.31rem;
border-radius: 0.07rem;
background: #FAB001;
}
.time_view p{
font-size: 0.25rem;
color: #E03234;
text-align: center;
line-height: 0.31rem;
}
.img_bg_M{
width: 100%;
height: 1.46rem;
background-image: url(../images/M_200@3x.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.img_bg_p1{
font-size: 0.3rem;
color: #E03234;
margin-left: 1.91rem;
padding-top: 0.27rem;
}
.img_bg_p2{
font-size: 0.14rem;
color: #E03234;
margin-left: 1.91rem;
}
.img_btn{
width: 1.18rem;
height: 0.3rem;
background: #FAB001;
display: flex;
align-items: center;
justify-content: center;
margin-left: 2.07rem;
}
.img_btn p{
font-size: 0.14rem;
color: #E03234;
}
.explain{
width: 90%;
height: 1rem;
background: #E03234;
margin-left: 5%;
padding: 0.15rem 0;
overflow: auto;
}
.explain p{
font-size: 0.14rem;
color: #FFFFFF;
margin-left: 0.15rem;
}
.img_bg_M .received_img{
position: absolute;
right: 0.14rem;
bottom: 0.15rem;
width: 0.81rem;
height: 0.65rem;
}
css/GT_activities2.css 0 → 100755
View file @ cb3fab82
@charset "utf-8";/* CSS Document */body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td {margin: 0; padding: 0; }
fieldset, img {border: 0;}
/*h1, h2, h3, h4, h5, h6 {font-size:12px;}*/
/*ol, ul {list-style: none;}*/
/*table {border-collapse: collapse;}*/
/*body,font{ font-size:12px; color:#666; font-family:"微软雅黑","宋体"; }*/
/*a{color:#666;text-decoration:none; outline:none !important; blr:expression(this.onFocus=this.blur());}*/
/*a:hover{color:#e50015; cursor:pointer}*/
/*img { margin:0; padding:0; border:0; }*/
/*body {background: #152442 ; }*/
/*翻页动画*/
@-webkit-keyframes flipTop {
0% {
-webkit-transform: perspective(400px) rotateX(0deg); }
100% {
-webkit-transform: perspective(400px) rotateX(-90deg); } }
@-webkit-keyframes flipBottom {
0% {
-webkit-transform: perspective(400px) rotateX(90deg); }
100% {
-webkit-transform: perspective(400px) rotateX(0deg); } }
@-moz-keyframes flipTop {
0% {
-moz-transform: perspective(400px) rotateX(0deg); }
100% {
-moz-transform: perspective(400px) rotateX(-90deg); } }
@-moz-keyframes flipBottom {
0% {
-moz-transform: perspective(400px) rotateX(90deg); }
100% {
-moz-transform: perspective(400px) rotateX(0deg); } }
@-ms-keyframes flipTop {
0% {
-ms-transform: perspective(400px) rotateX(0deg); }
100% {
-ms-transform: perspective(400px) rotateX(-90deg); } }
@-ms-keyframes flipBottom {
0% {
-ms-transform: perspective(400px) rotateX(90deg); }
100% {
-ms-transform: perspective(400px) rotateX(0deg); } }
@-keyframes flipTop {
0% {
transform: perspective(400px) rotateX(0deg); }
100% {
transform: perspective(400px) rotateX(-90deg); } }
@-keyframes flipBottom {
0% {
transform: perspective(400px) rotateX(90deg); }
100% {
transform: perspective(400px) rotateX(0deg); } }
.dataStatistics {color: #FFFFFF;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 0.54rem;font-weight: bold;line-height: 0.7rem;height: 0.7rem; margin: 0 auto;width: 1.6rem;float: left;display: flex;flex-direction: row;justify-content: space-between}
.dataStatistics .seperator {vertical-align: top;margin: 0 -20px;display: inline; }
.dataStatistics .seconds,.dataStatistics .minutes,.dataStatistics .hours,.dataStatistics .days {height: 100%;display: inline; }
.dataStatistics .digit_set { float: left;border-radius: 10px;width: 0.46rem;height: 100%;display: inline-block;position: relative;margin: 0 1px; }
.dataStatistics .digit {position: absolute;height: 100%; }
.dataStatistics .digit > div {position: absolute;left: 0;overflow: hidden;height: 50%;width: 0.46rem; }
.dataStatistics .digit > div.digit_top, .dataStatistics .digit > div.shadow_top { width: 0.46rem;background-color: #C72220;border-bottom: 1px solid #FFFFFF;box-sizing: border-box;top: 0;z-index: 0;border-radius: 10px 10px 0 0; }
.dataStatistics .digit > div.digit_top:before, .dataStatistics .digit > div.shadow_top:before {content: "";
height: 100%;width: 100%;position: absolute;left: 0;top: 0; }
.dataStatistics .digit > div.shadow_top {width: 0.46rem;opacity: 0;-webkit-transition: opacity 0.3s ease-in; }
.dataStatistics .digit > div.digit_bottom, .dataStatistics .digit > div.shadow_bottom {background-color: #C72220;bottom: 0;z-index: 0;border-radius: 0 0 10px 10px; }
.dataStatistics .digit > div.digit_bottom .digit_wrap, .dataStatistics .digit > div.shadow_bottom .digit_wrap {display: block;margin-top: -76%; }
.dataStatistics .digit > div.digit_bottom:before, .dataStatistics .digit > div.shadow_bottom:before {content: "";border-radius: 0 0 10px 10px;height: 100%;width: 100%;position: absolute;left: 0;top: 0; }
.digit_wrap{line-height: 0.7rem; display: block; overflow: hidden;text-align: center;}
.dataStatistics .digit > div.shadow_bottom {opacity: 0;-webkit-transition: opacity 0.3s ease-in; }
.dataStatistics .digit.previous .digit_top,.dataStatistics .digit.previous .shadow_top {opacity: 1;z-index: 2;
-webkit-transform-origin: 50% 100%;-webkit-animation: flipTop 0.3s ease-in both;-moz-transform-origin: 50% 100%;-moz-animation: flipTop 0.3s ease-in both;-ms-transform-origin: 50% 100%;-ms-animation: flipTop 0.3s ease-in both; transform-origin: 50% 100%;animation: flipTop 0.3s ease-in both;}
.dataStatistics .digit.previous .digit_bottom,.dataStatistics .digit.previous .shadow_bottom {z-index: 1;opacity: 1; }
.dataStatistics .digit.active .digit_top {z-index: 1; }
.dataStatistics .digit.active .digit_bottom {z-index: 2;-webkit-transform-origin: 50% 0%;-webkit-animation: flipBottom 0.3s 0.3s ease-out both;-moz-transform-origin: 50% 0%;-moz-animation: flipBottom 0.3s 0.3s ease-out both;-ms-transform-origin: 50% 0%;-ms-animation: flipBottom 0.3s 0.3s ease-out both;transform-origin: 50% 0%;animation: flipBottom 0.3s 0.3s ease-out both; }
html/GT_activities.css.html 0 → 100644
View file @ cb3fab82
This diff is collapsed.
js/autosize2.js 0 → 100644
View file @ cb3fab82
/**
* Created by lovo_bdk on 15-12-17.
*/
!(function(win, doc){
function setFontSize() {
// 获取window 宽度
// zepto实现 $(window).width()就是这么干的
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 375) * 100 + 'px' ;
//设置页面元素根元素的px大小，然后所有rem以此为基准。
//640为开发时候的页面宽度，20为基准px大小， 可以设置任意数字，方便开发时候rem计算
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//初始化
setFontSize();
}(window, document));
js/countdown.js 0 → 100644
View file @ cb3fab82
//时间为一位数时显示格式为："0X"
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
//服务器现在的时间（这里只是测试，就用浏览器时间代替）
var startTime = '';
//活动截止时间endTime（以服务器时间为标准，即给定的时间）
var end = '';
var endTime = '';
//活动截止时间（以浏览器时间为标准）
var browserEndTime = '';
//距离活动结束还剩余的时间（以浏览器为标准）
var plus = '';
var implement = false
function countdown(endTime) {
console.log(endTime)
end = endTime
implement = true
}
//倒计时
function setTimer() {
if (!plus) {
//服务器现在的时间（这里只是测试，就用浏览器时间代替）
startTime = new Date();
//活动截止时间endTime（预先给定的值）
// end = end;
endTime = new Date(end);
//活动截止时间与当前时间的时间差
plus = endTime - startTime;
}
else {
//距离活动结束还剩余的时间，第二次以后就不需要再计算，直接自减即可
plus -= 1000;
//更新当前时间(getTime()获取时间转化成毫秒后的数值)
startTime = new Date(startTime.getTime() + 1000);
}
var day = parseInt(plus / 1000 / 60 / 60 / 24);
var hour = parseInt(plus / 1000 / 60 / 60) - day * 24;
var minute = parseInt(plus / 1000 / 60) - parseInt(plus / 1000 / 60 / 60) * 60;
var second = parseInt(plus / 1000) - parseInt(plus / 1000 / 60) * 60;
// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
day = checkTime(day);
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);
document.getElementById("p").innerHTML = day;
document.getElementById("p1").innerHTML = hour ;
document.getElementById("p2").innerHTML = minute;
document.getElementById("p3").innerHTML = second;
if (plus <= 1) {
clearInterval(id);
}
}
//每秒循环一次，刷新活动截止时间与当前时间的时间差
if(implement == true){
var id = setInterval(setTimer(), 1000);
}
js/jquery.dataStatistics.js 0 → 100755
View file @ cb3fab82
$.fn.dataStatistics = function(options){
options = $.extend({
max : 500, //初始数值
min : 0, //最大数字
time : 60000, //时长
len:6, //数字是几位数
add:false
},options || {});
var ths = this;//解决this指向问题
//初始化---------------------------------------start
var el = ths.find('.set_last');
var html = '<div class="digit">' +
' <div class="digit_top">' +
' <span class="digit_wrap"></span>' +
' </div>' +
' <div class="shadow_top"></div>' +
' <div class="digit_bottom">' +
' <span class="digit_wrap"></span>' +
' </div>' +
' <div class="shadow_bottom"></div>' +
'</div>'
//初始化值
var nowNums=zfill(options.max, options.len).toString().split("");
//补0
function zfill(num, size) {
var s = "000" + num;
return s.substr(s.length-size);
}
ths.find('.digit_set').each(function() {
for(i=0; i<=9; i++) {
$(this).append(html);
currentDigit = $(this).find('.digit')[i];
$(currentDigit).find('.digit_wrap').append(9-i);
}
});
//初始化数值填入
$.each(nowNums, function(index,val) {
var set =ths.find('.digit_set').eq(index);
var i =parseInt(val)
set.find('.digit').eq(9-i).addClass('active');
set.find('.digit').eq(9-i+1).addClass('previous');
});
//初始化---------------------------------------end
//执行
var difference = 0; //全局的执行次数
var nownumber = options.min; //全局的现在数字
var Activityendtime = ''; //活动结束时间
function run(diff){
if(diff){
difference = diff
}else {
difference =options.max-options.min;//要执行动画的次数
}
//后一位数
function increase() {
//执行次数为0时,停止执行
if (difference<1) {
clearInterval(timer1);
if(nownumber == 0){ //优惠券没有的时候处理
clearInterval(timer2); //清楚定时器
if( (new Date().getTime()) > new Date('2019-10-25T15:04:00').getTime()){
layer.msg('活动结束')
}else {
layer.msg('优惠券被抢光了！')
}
$('.box_content_t').hide()
}
return false;
console.info('结束')
}
difference--;
//翻页动画
var current = el.find('.active'),
previous = el.find('.previous');
previous.removeClass('previous');
current.removeClass('active').addClass('previous');
if (current.next().length == 0) {
el.find('.digit:first-child').addClass('active');
var prev = el.prev();
prevNumber(prev);
} else {
current.next().addClass('active');
}
}
var timer1 = setInterval(increase,1000);
}
//当数字翻到9的时候，前一位数执行一次动画
function prevNumber(ths){
var current = ths.find('.active'),
previous = ths.find('.previous');
previous.removeClass('previous');
current.removeClass('active').addClass('previous');
if (current.next().length == 0) {
ths.find('.digit:first-child').addClass('active');
var prev = ths.prev();
if (prev.length>0) {
prevNumber(prev);
}
} else {
current.next().addClass('active');
}
}
run();
var timer2 = setInterval(()=>{
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/appActivity/getUserPurchaseTime`,
contentType: "application/json",
data: getJavaA({}, token),
async: false,
success: function (res) {
if (res.resultCode === 1) {
if(nownumber > 0){
let num = nownumber - (res.data.couponCount - res.data.couponReceiveCount) ; // 算出动画执行的次数
nownumber = res.data.couponCount - res.data.couponReceiveCount; // 算出现在的数字
if(num>0){
run(num)
}
if(nownumber == 0 ){
Activityendtime = res.data.expirationDate;
}
if(res.data.count== 0){
$(".received_img").attr("src","");
$('.img_btn p').html('9.9元抢购')
}else {
$(".received_img").attr("src","../images/received@3x.png");
$('.img_btn p').html('去使用')
}
}
}
},
error: function (res) {
}
});
},(difference+5)*1000) //5s请求一次接口
$('.img_btn').click(function () {
if($('.img_btn p').css('color')=='rgb(224, 50, 52)'){ //判断按钮是否可以点击
if( $('.img_btn p').text() == '9.9元抢购' ){ //判断是否9.9元抢购 点击可以抢购
$.ajax({
type: "POST",
url: `${getApiUrl().urlJava}api/appActivity/rushPurchaseByUid`,
contentType: "application/json",
data: getJavaA({}, token),
async: false,
success: function (res) {
if (res.resultCode === 1) {
layer.msg(res.message)
$('.img_btn p').html('去使用')
$(".received_img").attr("src","../images/received@3x.png");
var timer3 = setInterval(()=>{ //1,需要timer2的定时器走完了 才走timer3的定时器
nownumber = nownumber -1;
run(1)
clearInterval(timer3) //2,执行动画之后清除timer3
},difference*1000)
}else {
layer.msg(res.message)
window.location.reload()
}
},
error: function (res) {
layer.msg(res.message)
}
});
}else {
layer.msg('去使用优惠券')
}
}else {
layer.msg('活动还未开始')
}
})
};
js/mian.js
View file @ cb3fab82
let locationName = window.location.hostname;
function getApiUrl() {
let url = {
let url = {
urlPost: locationName.indexOf('oytour') !== -1 ? "http://reborn.oytour.com/api/common/post" : "http://192.168.2.214:8082/api/common/post",
urlJava: locationName.indexOf('oytour') !== -1 ? "https://efficient.oytour.com/" : "http://192.168.2.215:9000/"
}
......@@ -9,7 +9,7 @@ function getApiUrl() {
}
String.prototype.myReplace=function(f,e){ //时间格式化 苹果手机-替换为/
var reg=new RegExp(f,"g"); //创建正则RegExp对象
return this.replace(reg,e);
return this.replace(reg,e);
}
function getLocalStorage() {
var localStorageData = window.localStorage["userInfo"];
......@@ -27,12 +27,12 @@ function getLocalStorage2() {
return null;
}
}
function clearLocalStorage() {
function clearLocalStorage() {
window.localStorage.removeItem('userInfo')
}
function getAjaxData(cmd, msg, tk) {
function getAjaxData(cmd, msg, tk) {
if (msg == null || msg == "") {
msg = {}
msg = {}
}
let timestamp = (new Date()).valueOf();
let token = "";
......@@ -52,9 +52,9 @@ function getAjaxData(cmd, msg, tk) {
}
return JSON.stringify(postData)
}
function getJavaData(msg) {
function getJavaData(msg) {
if (msg == null || msg == "") {
msg = {}
msg = {}
}
let timestamp = (new Date()).valueOf();
let token = "";
......@@ -62,7 +62,7 @@ function getJavaData(msg) {
if (getLocalStorage() != null) {
token = getLocalStorage().token;
key = getLocalStorage().SecretKey;
} else if (getLocalStorage2() != null) {
} else if (getLocalStorage2() != null) {
if (getLocalStorage2() != null) {
token = getLocalStorage2().token;
key = getLocalStorage2().secretKey;
......@@ -81,4 +81,30 @@ function getJavaData(msg) {
"sign": md5Str
}
return JSON.stringify(postData)
}
\ No newline at end of file
}
function getJavaA(msg, tk) {
if (msg == null || msg == "") {
msg = {}
}
let timestamp = (new Date()).valueOf();
let token = "";
let key = "";
if (getLocalStorage() != null) {
token = getLocalStorage().token;
key = getLocalStorage().SecretKey;
}
let userInfo = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : JSON.parse(localStorage.userInfo2) ? JSON.parse(localStorage.userInfo2) : ''
let uid = userInfo.accountId ? userInfo.accountId : 0
let encodeMsg = encodeURIComponent(JSON.stringify(msg)).toLowerCase();
let md5Str = hex_md5(`msg=${encodeMsg}&timestamp=${timestamp}&token=${token}&key=${key}`);
let postData = {
"groupId": 2,
"msg": msg,
"timestamp": timestamp,
"token": tk ? tk : token,
"sign": md5Str,
"uid": uid,
}
return JSON.stringify(postData)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment