测试《你受异性欢迎吗》小游戏示例代码

HTML基础

下载此实例

开发语言：CSS
实例大小：0.27M
下载次数：17
浏览次数：174
发布时间：2016-06-06
实例类别：HTML基础
发布人：LT279LT
文件格式：.zip
所需积分：2

实例介绍

【实例简介】

【实例截图】

【核心代码】<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icon.png" />
<link rel="shortcut icon" href="icon.png" />
<link rel="icon" href="icon.png" />
<title>你受异性欢迎吗</title>
<meta name="keywords" content="你受异性欢迎吗,你受异性欢迎吗html5游戏" />
<meta name="description" content="你受异性欢迎吗html5游戏,你受异性欢迎吗手机在线游戏" />
<script src="./jquery-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var result = 0;
var result_message;
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var res_arr = [];
$(".options ul li").click(function () {
var node = $(this).parent().parent().parent();
var next_node = $(node).next();
var dataScore = $(this).attr("data-score");
$(node).hide();
if (parseInt(dataScore) > 100) {
$(".result-" dataScore).show();
tit = $(".result-" dataScore).attr("tit");
} else {
$(".question-" dataScore).show();
}
});
$(".prev a").click(function () {
var node = $(this).parent().parent();
var prev_node = $(node).prev();
if (prev_node.hasClass("question")) {
$(node).hide();
$(prev_node).show();
}
});
});
function mask() {
if ($("#mask").css("display") == "none") {
$("#mask").show();
$("#tip").show();
} else {
$("#mask").hide();
$("#tip").hide();
}
}
var tit = "";
var dFW = {
appId: "",
TLImg:"",
url: window.location.href,
title: "你受异性欢迎吗",
desc: "你是个受欢迎的人吗？快来测测吧！"
};
var onBridgeReady = function () {
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
"appid": dFW.appId,
"img_url": dFW.TLImg,
"img_width": "120",
"img_height": "120",
"link": dFW.url,
"title": dFW.title tit,
"desc": dFW.desc
}, home_test);
});
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
"appid": dFW.appId,
"img_url": dFW.TLImg,
"img_width": "120",
"img_height": "120",
"link": dFW.url,
"title": dFW.title tit,
"desc": dFW.desc
},home_test);
});
};
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
</script>
<style type="text/css">
body{
background: #000;
background: url("bg.png") no-repeat;
background-size: cover;
margin: 0 auto;
padding: 0px;
height: 100%;
min-height: 500px;
font-size: 130%;
}
.title{
margin: 0 auto;
width: 80%;
}
.title h2{
background: #90ab8b;
color: #fff;
padding: 10px 0;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 20px;
font-weight: normal;
margin-bottom: 0;
}
.title-sub{
padding: 10px 20px;
color: #fff;
text-align: center;
/*border: 1px solid #b374b1;*/
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin: 0 auto;
background: rgba(231, 231, 231, 0.2) none repeat scroll 0 0 !important;
background: #e7e7e7;
filter:Alpha(opacity=20);
}
.question{
width: 80%;
margin: 0 auto;
margin-top: 50px;
display: none;
}
.question-title{
text-align: center;
color: #fff;
}
.question:first-child, .question.current{
display: block;
}
.result{
display:none;
}
.options ul{
padding: 0;
}
.options li{
margin: 20px 0;
padding: 15px 15px;
list-style-type: none;
}
.options li div{
padding-left: 20px;
}
.options.button li{
border: 1px solid #8760a3;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: 100%;
color: white;
background:rgba(142, 99, 167, 0.6) none repeat scroll 0 0 !important;
background:#8e63a7;
filter:Alpha(opacity=60);
}
.options.button li{
padding: 15px 0;
}
.options li.selected{
background: #cf6271 !important;
}
.prev{
margin-top: 30px;
font-weight: 300;
font-size: 12px;
float: right;
padding-bottom: 50px;
}
.prev a:link{
color: #fff;
}
.tools-button{
padding: 10px 0;
color: #fff;
text-align: center;
margin: 0 auto;
width: 80%;
background:rgba(159, 66, 61, 0.3) none repeat scroll 0 0;
background: #9f423d;
filter:Alpha(opacity=30);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top: 30px;
}
.share{
background:rgba(49, 126, 172, 0.6) none repeat scroll 0 0;
background: #317eac;
filter:Alpha(opacity=60);
}
#tip {
display: none;
position: absolute;
top: 10px;
left: 10px;
}
#mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: #333;
filter: alpha(Opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
.text-center{text-align:center}
.text-muted{color:#999}
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
h3.text-muted,#ad h3.text-muted{text-shadow:none;color:rgba(255,255,255,0.8);}
#more ul{padding-left: 20px;}
#more ul li{font-size: 14px;line-height: 1.8;color:rgba(255,255,255,0.5);}
#more ul li a,#ad ul li a,#ad ul li a,#ad a{color:rgba(255,255,255,0.6);}
#more ul li a:hover,#ad ul li a:hover,#ad a:hover{color:rgba(255,255,255,0.8);}
#more h3 .more_link{font-size: 12px;color:rgba(255,255,255,0.5);}
</style>
</head>
<body>
<div class="title header-title">
<h2>
你受异性欢迎吗？
</h2>
<div class="title-sub">
</div>
</div>
<div class="question question-1 current">
<div class="question-title">
1、你旅行时，最想去哪个地方？
</div>
<div class="options button">
<ul>
<li data-score="2"><div>北京</div></li>
<li data-score="3"><div>东京</div></li>
<li data-score="4"><div>巴黎</div></li>
</ul>
</div>
</div>
<div class="question question-2 ">
<div class="question-title">
2、你是否在观看感人电影时泣不成声？
</div>
<div class="options button">
<ul>
<li data-score="4"><div>是</div></li>
<li data-score="3"><div>不是</div></li>
</ul>
</div>
</div>
<div class="question question-3 ">
<div class="question-title">
3、如果你的Ta约会时迟到一个小时还未出现，你会：
</div>
<div class="options button">
<ul>
<li data-score="4"><div>再等30分钟</div></li>
<li data-score="5"><div>立刻离开</div></li>
<li data-score="6"><div>一直等待Ta的出现</div></li>
</ul>
</div>
</div>
<div class="question question-4 ">
<div class="question-title">
4、你喜欢自己一个人去看电影吗？
</div>
<div class="options button">
<ul>
<li data-score="5"><div>是</div></li>
<li data-score="6"><div>不是</div></li>
</ul>
</div>
</div>
<div class="question question-5 ">
<div class="question-title">
5、当Ta在第一次约会时就要求吻你，你会：
</div>
<div class="options button">
<ul>
<li data-score="6"><div>拒绝</div></li>
<li data-score="7"><div>轻吻Ta的额头</div></li>
<li data-score="8"><div>接受并吻Ta</div></li>
</ul>
</div>
</div>
<div class="question question-6 ">
<div class="question-title">
6、你是个有幽默感的人吗？
</div>
<div class="options button">
<ul>
<li data-score="7"><div>我想是吧</div></li>
<li data-score="8"><div>大概不是</div></li>
</ul>
</div>
</div>
<div class="question question-7 ">
<div class="question-title">
7、你认为你是个称职的领导者吗？
</div>
<div class="options button">
<ul>
<li data-score="9"><div>是</div></li>
<li data-score="10"><div>不是</div></li>
</ul>
</div>
</div>
<div class="question question-8 ">
<div class="question-title">
8、如果可以选择的话，你希望自己的性别是？
</div>
<div class="options button">
<ul>
<li data-score="9"><div>男</div></li>
<li data-score="10"><div>女</div></li>
<li data-score="400"><div>无所谓</div></li>
</ul>
</div>
</div>
<div class="question question-9 ">
<div class="question-title">
9、你曾经同时拥有一个以上的男（女）朋友吗？
</div>
<div class="options button">
<ul>
<li data-score="200"><div>是的</div></li>
<li data-score="110"><div>不是</div></li>

标签： 游戏测试

实例下载地址