<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/stylesheets/style.css">
<link rel="stylesheet" href="css/stylesheets/anicollection.min.css">
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body id="back" style="">
<div id="information" data-anijs="if: mouseover, do: tada animated">
<input id="smileDeg" type="hidden" value="<?php echo $_POST["smile"]; ?>">
<input id="age" type="hidden" value="<?php echo $_POST["age"]; ?>">
<input id="gender" type="hidden" value="<?php echo $_POST["gender"]; ?>">
<div id="hello"></div>
<div id="yourAge"> </div>
<div id="emotion"> </div>
</div>
<div id="hint" data-anijs="if: DOMContentLoaded, on:document,do: shake animated">
Gestures Control Music Player<br>
<div id="hint1" style="padding-left: 50px;">
<div id="up" style="margin-top:8px;"><img src="css/images/up.png" data-anijs="if: mouseover, do: fadeInUp animated" style="height:50px; width:50px; "/><span style="position:absolute; margin-top:20px"> : Play | Pause <br><span></div>
<div id="down" style="margin-top:8px;"><img src="css/images/down.png" data-anijs="if: mouseover, do: fadeInDown animated" style="height:50px; width:50px; "/><span style="position:absolute; margin-top:15px"> : Play | Pause <br><span></div>
<div id="left" style="margin-top:8px;"><img src="css/images/left.png" data-anijs="if: mouseover, do: fadeInRight animated" style="height:50px; width:50px; "/><span style="position:absolute; margin-top:15px"> : Previous <br><span></div>
<div id="right" style="margin-top:8px;"><img src="css/images/right.png" data-anijs="if: mouseover, do: fadeInLeft animated" style="height:50px; width:50px; "/><span style="position:absolute; margin-top:15px"> : Next <br><span></div>
</div>
</div>
<a href ="page1.html"><div id="emoge" data-anijs="if: mouseover ,do: rubberBand animated">Emoge Player</div></a>
<div id="player">
<div class="cover"></div>
<div class="ctrl">
<div class="control">
<div class="left">
<div class="rewind icon"></div>
<div class="playback icon"></div>
<div class="fastforward icon"></div>
</div>
<div class="volume right">
<div class="mute icon left"></div>
<div class="slider left">
<div class="pace"></div>
</div>
</div>
</div>
<div class="progress">
<div class="slider">
<div class="loaded"></div>
<div class="pace"></div>
</div>
<div class="timer left">0:00</div>
<div class="right">
<div class="repeat icon"></div>
</div>
</div>
</div>
</div>
<ul id="playlist"></ul>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/anijs.js"></script>
<script src="js/gest.js"></script>
<script src="js/script1.js"></script>
<script>
var smileDegree = 0;
window.onload = function()
{
smileDegree = document.getElementById("smileDeg").value;
var userAge = parseInt(document.getElementById("age").value);
var userGender = document.getElementById("gender").value;
var printGender;
if(smileDegree.length>50){
document.getElementById("information").style.display = "none" ;
console.log(smileDegree);
}
else
{
smileDegree = parseInt(smileDegree);
console.log(smileDegree);
console.log(userAge);
if(smileDegree <= 10)
{
document.getElementById("emotion").innerHTML=
'<div style=\"font:36px; margin-top:10px; margin-bottom:10px;\">Your Emotion: </div><div data-anijs=\"if: mouseover, do: pulse animated\" class =\"pulse animated\"><img style=\"height:170px; width:auto;\" src=\"css/images/sad.png\";/></div>';
console.log("10");
}
else if(smileDegree <= 30)
{
console.log("<=30");
document.getElementById("emotion").innerHTML=
'<div style=\"font:36px; margin-top:10px; margin-bottom:10px;\">Your Emotion: </div><div data-anijs=\"if: mouseover, do:bounce animated\" class =\"bounce animated\"><img style=\"height:170px; width:auto;\" src=\"css/images/normal.png\" /></div>';
}
else if(smileDegree > 30)
{
console.log(">30");
document.getElementById("emotion").innerHTML=
'<div style=\"font:45px; margin-top:10px; margin-bottom:10px;\">Your Emotion: </div><div data-anijs=\"if:mouseover , do:tada animated\" class =\"tada animated\"><img style=\"height:170px; width:auto;\" src=\"css/images/happy.png\" /></div>';
}
if(userGender == "Male")
{
if(userAge <= 25){
printGender = "CoolBoy";
}
else{
printGender = "Gentleman";
}
}
if(userGender == "Female")
{
if(userAge <= 25){
printGender = "PrettyGirl";
}
else{
printGender = "Lady";
}
}
document.getElementById("hello").innerHTML= '<div style=\"font:45px; margin-top:10px; margin-bottom:10px;\"> Hello, ' + printGender + '</div>';
console.log(printGender);
}
}
</script>
</body>
</html>
网页版手势控制flash音乐播放器
需积分: 10 45 浏览量
2015-05-27
19:18:24
上传
评论 1
收藏 36.43MB RAR 举报
FireFly2Die
- 粉丝: 5
- 资源: 1
最新资源
- 装修通用报价参考,基础施工项目+水电工程项目+瓦木项目,超级详细
- 三菱PLC例程源码Medocsequencegenerator
- 三菱PLC例程源码M1320磨头进出FX1s控制步进电机,有注释
- STRASSEN矩阵乘法算法(改进分治法·C语言)
- 前端.xmind前端.xmind前端.xmind前端.xmind前端.xmind
- 三菱PLC例程源码LOW-E玻璃镀膜线程序(三菱QPLC的)一万步带注释
- 三菱PLC例程源码LCD设备蚀刻机程序
- 三菱PLC例程源码LCD设备蚀刻机
- 全面前端开发指南:从基础到深入
- pvk2pfx 32位 Pvk2Pfx (Pvk2Pfx.exe) 是一种命令行工具,可将 .spc、.cer 和 .pvk 文
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈