Commit cae1962f authored by Mac's avatar Mac

投票的内容

parent c1b2c738
......@@ -14,7 +14,16 @@
<body>
<div class="Box">
<!-- <div class="bbb" style="position: fixed;font-size: 0.15rem">测试</div>-->
<a id="goali" href="alipays://platformapi/startapp" target="_blank" style="position: absolute;z-index: -1;">GO</a>
<audio id="audio" src="img/game_running.mp3" autoplay="autoplay">
您的浏览器不支持audio标签
</audio>
<audio id="audio2" src="img/ready321go.mp3">
您的浏览器不支持audio标签
</audio>
<audio src="img/all.mp3" id="music" ></audio>
<!-- <div class="bbb" style="position: fixed;font-size: 0.15rem">测试</div>-->
<!-- 头部一块-->
<div class="top">
<div class="top_title">
......@@ -100,12 +109,7 @@
</div>
<div class="circleCount">ready</div>
<audio id="audio" src="img/game_running.mp3" autoplay="autoplay">
您的浏览器不支持audio标签
</audio>
<audio id="audio2" src="img/ready321go.mp3">
您的浏览器不支持audio标签
</audio>
<!-- 排行榜-->
<div class="rank_mask" id="rank_mask">
......@@ -131,13 +135,11 @@
<div class="zhezao"></div>
<div class="notice_box">
<img src="../../images/aM/all_d.png" alt="" class="notice_top">
<span>恭喜你中奖啦!</span>
<div class="notice_content">
<span>121212</span>
</div>
<div class="all_Receive">
<span>立即领取</span>
</div>
<span>恭喜你获得支付宝口令红包</span>
<input class="notice_content" id="tokenReadPackage" readonly="readonly" value="看我信你123不" />
<button class="all_Receive" id="getAliPay" data-clipboard-action="copy" data-clipboard-target="#tokenReadPackage">
复制并领取
</button>
<div class="all_Close"></div>
</div>
</div>
......@@ -149,20 +151,25 @@
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
$(function () {
var activity = JSON.parse(localStorage.activity);
var clipboard = new Clipboard('.all_Receive');
var customerId = activity.customerId + '_Mouse';
var status=0; //活动状态
var laoshudata = [];//老鼠数据
var audio=document.getElementById("audio");
var audio2=document.getElementById("audio2");
// audio.play();
document.addEventListener('touchstart', function() {
document.getElementById('audio').play()
})
audio.loop=true;
var conn = $.hubConnection("http://192.168.2.66:7838/signalr", {
qs: `i=${activity.customerId}&n=${activity.EmName}&p=${encodeURIComponent(activity.imgUrl)}`
qs: `i=${customerId}&n=${activity.EmName}&p=${encodeURIComponent(activity.imgUrl)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
......@@ -170,6 +177,7 @@
sendScore();
joinGeme() //参加活动
ownranking();//自己排名
}).fail(data => {});
getMsg()
......@@ -216,15 +224,15 @@
}
function joinGeme() {
proxy.invoke("JoinGame", 'Mouse').done(data => { //加入活动
proxy.invoke("JoinGame", 'Mouse',).done(data => { //加入活动
console.log(data)
});
}
function ownranking() {
proxy.invoke("GetUserRank", 'Mouse').done(data => {
proxy.invoke("GetUserRank", 'Mouse',customerId).done(data => {
console.log(data)
if(data != -1){
$('.o_ranking').html('第'+data+'名')
if(data.r != -1){
$('.o_ranking').html('第'+data.r+'名')
}else {
$('.o_ranking').html('未上榜')
......@@ -240,7 +248,6 @@
console.log(data)
laoshudata = JSON.parse(data.data)
console.log(laoshudata)
if(data.status==0){
$('.status').css({'display':'flex'});
$('.status1').css({'display':'none'});
......@@ -265,13 +272,20 @@
$('.status3').css({'display':'flex'});
}
});
proxy.on('notifyMouseWinning',function (data) {
console.log(data)
})
proxy.on('notifyMouseGamerResult',function (data) {
getRankList(data)
console.log(data)
ownranking() //获取自己排名
getRankList(data)
})
proxy.on('notifyMouseWinning',function (data) { //活动中奖通知
console.log(data)
$('#notice').css('display','flex');
$('#tokenReadPackage').val(data);
$('#rank_mask').css('display','none');
})
}
......@@ -301,6 +315,7 @@
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
//为老鼠的时候加100分
$('.hole-container .hole:eq('+wz+') .mouse .zoon').on('touchstart',function () {
if(laoshudata[key].noclick == 0) {
score = score + 500;
$('.score').html(score + '分')
......@@ -328,8 +343,9 @@
if(laoshudata[key].Type == 2){
$('.hole-container .hole:eq('+wz+') .mouse').append('<img src="../../images/aM/pig.png" alt="" class="zoon">');
$('.hole-container .hole:eq('+wz+') .mouse img').animate({top:"0.02rem"},600);
//为老鼠的时候加100分
//为老鼠的时候加500分
$('.hole-container .hole:eq('+wz+') .mouse .zoon').on('touchstart',function () {
if(laoshudata[key].noclick == 0) {
score = score - 100;
$('.score').html(score + '分')
......@@ -400,7 +416,7 @@
window.clearInterval(clock);
window.clearInterval(timer1); //清除老鼠
sendScore(score)
// ownranking() //获取自己排名
ownranking() //获取自己排名
$('#rank_mask').css('display','block');
}
}, 1000)
......@@ -432,12 +448,17 @@
$('.all_Close').click(function () {
$('#notice').css('display','none')
})
$('#getAliPay').click(function(){
// setTimeout(function(){
// $('#goali')[0].click();
// },500);
});
$('.return').click(function () {
//返回首页
window.history.back()
})
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>年会节目排名</title>
<script type="text/javascript" src="../../js/autosize2.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: 100%;
}
p{
margin: 0;
}
.Box{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.box_top{
width: 100%;
height: 40%;
background-image: url('../../images/aM/allVote_top.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.top_center{
position: absolute;
left: 5%;
bottom: 0;
width: 90%;
height: 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.runnerUp{
width: 33%;
display: flex;
flex-direction: column;
align-items: center;
}
.runnerUp span{
overflow: hidden;
text-overflow: ellipsis;
color: #893630;
font-size: 0.1rem;
height: 0.16rem;
}
.box_bttoom{
width: 100%;
height: 60%;
background-image: url('../../images/aM/allVote_bottom.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.bttoom_title{
width: 90%;
height: 0.6rem;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
position: absolute;
left: 5%;
top: 0;
}
.bttoom_title img{
width: 0.21rem;
height: 0.1rem;
margin-bottom: 0.1rem;
}
.bttoom_title span{
color: #FED5B0;
font-size: 0.22rem;
margin: 0 0.1rem;
}
.bttoom_center{
width: 90%;
}
</style>
</head>
<body>
<div class="Box">
<div class="box_top">
<div class="top_center">
<div class="runnerUp" style="margin-top: 0.1rem">
<span>《凉凉》独唱</span>
<span>成都印象销售部</span>
</div>
<div class="runnerUp" style="margin-top: 0.05rem">
<span>《凉凉》独唱</span>
<span>成都印象销售部</span>
</div>
<div class="runnerUp" style="margin-top: 0.16rem">
<span>《凉凉》独唱</span>
<span>成都印象销售部</span>
</div>
</div>
</div>
<div class="box_bttoom">
<div class="bttoom_title">
<img src="../../images/aM/l_yun.png" alt="">
<span>节目总排名</span>
<img src="../../images/aM/r_yun.png" alt="">
</div>
<div class="bttoom_center"></div>
</div>
</div>
</body>
<script src="../../js/moveJs/jquery.min.js"></script>
<script src="../../js/moveJs/jquery.signalR.min.js"></script>
<script type="text/javascript" src="../../js/layer/layer.js"></script>
<script>
var activity = JSON.parse(localStorage.activity);
var conn = $.hubConnection("http://192.168.2.66:7838/signalr", {
qs: `i=${activity.customerId}&n=${activity.EmName}&p=${encodeURIComponent(activity.imgUrl)}`
});
var proxy = conn.createHubProxy("annualLeaveHub");
conn.start().done(data => {
sendMsg()
}).fail(data => {});
getMsg()
function sendMsg() {
}
function getMsg() {
//节目单
proxy.on('getPrograms', function (data) {
console.log(data)
});
}
</script>
</html>
......@@ -410,6 +410,8 @@ li{
align-items: center;
justify-content: center;
margin-top: 0.14rem;
outline: none;
text-align: center;
}
.notice_content span{
width: 2rem;
......@@ -429,6 +431,8 @@ li{
justify-content: center;
margin-top: 0.18rem;
border-radius: 0.135rem;
border: none;
outline: none;
}
.all_Receive span{
......@@ -447,3 +451,7 @@ li{
background-size: 100% 100%;
background-repeat: no-repeat;
}
audio:focus{
outline:none;
}
......@@ -44,46 +44,9 @@ p{
line-height: 0.25rem;
width: 80%;
}
.progressBar{
width: 2.8rem;
height: 0.35rem;
background-image: url('../../../images/aM/progressBar.png');
background-size: 100% 100%;
background-repeat: no-repeat;
margin-top: 0.3rem;
overflow: hidden;
padding: 0.05rem;
}
.progressBar_box{
width: 100%;
height: 0.35rem;
border-radius: 0.15rem;
overflow: hidden;
}
.progressBar_c{
width: 1%;
height: 0.35rem;
background: repeating-linear-gradient(55deg,#BA4C0B 26%,#E99A35 9%,#FDF48B 26%,#D19719 30%)
}
.votes{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 0.12rem;
}
.votes span{
font-size: 0.1rem;
color: #FDD54B;
}
.votes span:nth-child(2){
font-size: 0.14rem;
margin:0 0.05rem
}
.vote_s{
width: 75%;
height: 0.5rem;
......
......@@ -17,16 +17,6 @@
<span class="programName">《年会庆典》节目投票</span>
<span class="department">成都印象销售部</span>
<span class="personnel">参与人员:李瀚文 张若筠 杨紫 杨幂 邓伦 许凯 张榕容 易烊千玺 李现</span>
<div class="progressBar">
<div class="progressBar_box">
<div class="progressBar_c"></div>
</div>
</div>
<div class="votes">
<span>当前爱心能量值</span>
<span>123</span>
<span></span>
</div>
</div>
<div class="vote_s">
<img src="../../images/aM/giveUp.png" alt="" class="giveUp" onclick="vote(1)">
......@@ -86,10 +76,6 @@
$('.popup_bg span').html('恭喜你!投票成功')
}
}
//投票进度条比例
var Votes = 100;
var Percentage = (Votes/250)*100;
$('.progressBar_c').css('width',Percentage+'%')
$('.close').click(function () {
$('.popup').css('display','none')
......
This diff is collapsed.
This diff is collapsed.
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