jQuery微信小游戏源码下载

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery微信小游戏源码下载的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery微信小游戏源码下载</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

<link rel="stylesheet" href="css/game.css">
</head>
<body class="wap-box">

<div class="wap-contain">
	<div class="warper" id="warper">
		<p class="fff"><span class="ft24">你小时候是谁？</span><br>记得小时候看过的动画片吗？想知道你是哪个动画人物吗？</p>
		<p class="tc mtb20"><img src="images/kitty.jpeg" width="100%" alt="kitty"></p>
		<p class="tc mtb20"><input type="text" id="txtName" name="txtName" class="myname" maxlength="10" value="请输入您的名字" onFocus="if(value==defaultValue){value='';this.style.color='#999'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}"></p>
		<p class="mtb20"><a class="postrlt" id="postrlt">开始测试</a></p>
		<p class="tc mtb20 fff">CopyRight By 十一无聊 2015.</p>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>

JS代码(game.js):

/** * Created by bookkilled on 15/10/2. */
(function(){
	$('#postrlt').on('click',postmsg);
	function postmsg(){
	var myname = $.trim($('#txtName').val());
	var myid = parseInt(Math.random()*4);
	var contant = $('#warper').html();
	if(myname == "" || myname == "请输入您的名字"){
	return false;
}
var json ={
	data:[{
	id:'1',name:'周金胜',tag:'雷神之锤',url:'images/1.jpg'}
,{
	id:'2',name:'周金胜',tag:'单身汪',url:'images/2.jpg'}
,{
	id:'3',name:'周金胜',tag:'程序猿',url:'images/3.jpg'}
,{
	id:'3',name:'周金胜',tag:'野生奥特曼',url:'images/4.jpg'}
,{
	id:'3',name:'周金胜',tag:'葫芦娃',url:'images/5.jpg'}
]}
;
	var reqhtml = '<p class="fff ft16"><span class="ft24">测试结果：</span><br><span class="fc636363">'+myname+'</span>:恭喜您，测试结果显示你就是【'+json.data[myid].tag+'】图里面画的这个东西！哈哈！</p><p class="tc mtb20"><img src="'+json.data[myid].url+'" width="100%" alt=""></p><p class="mtb20"><a class="goback" href="javascript:window.location.reload();
	">再次测试</a></p>';
	$('#warper').html(reqhtml);
	//var optionMine ={
	// type:'POST',// url:'data.js',// //dataType:'json',// data:{
	// id:myid,// name:myname //}
//}
//var reqMine = $.ajax(optionMine);
	//reqMine.done(function(json){
	// var json = eval(json);
	// var reqhtml = '<p class="fff ft16"><span class="ft24">测试结果：</span><br><span class="fc636363">'+myname+'</span>:恭喜您，测试结果显示你就是【'+json[myid].tag+'】图里面画的这个东西！哈哈！</p><p class="tc mtb20"><img src="'+json[myid].url+'" width="100%" alt=""></p><p class="mtb20"><a class="goback" href="javascript:window.location.reload();
	">再次测试</a></p>';
	// $('#warper').html(reqhtml);
	//}
);
}
}
)();
	// 获取url参数function urlPara(v){
	var url = window.location.search;
	if (url.indexOf(v) != -1){
	var start = url.indexOf(v)+v.length;
	var end = url.indexOf('&',start) == -1 ? url.length:url.indexOf('&',start);
	return url.substring(start,end);
}
else{
	return '';
}
}

CSS代码(game.css):

@charset "UTF-8";/* common */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0}
html,body{-webkit-text-size-adjust:none;height:100%;background-color:#fff;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
figure{margin:0}
body,button,input,select,textarea{font:0.75em/1.5 "STHeiti SC",arial,sans-serif,\5b8b\4f53}
h1,h2,h3,h4,h5,h6{font-size:100%}
address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp{font-family:courier new,courier,monospace}
small{font-size:12px}
ul,ol{list-style:none}
a{text-decoration:none;blr:expression(this.onFocus=this.blur());outline:none;color:#b6b5b5;}
/*虚线框 IE:blr:expression(this.onFocus=this.blur());FF:outline:none */
a:hover{text-decoration:none}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
legend{color:#000}
fieldset,img{border:0}
img{display:block}
button,input,select,textarea{font-size:100%}
table{border-collapse:collapse;border-spacing:0;}
/* clearfix */
.clear{clear:both}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{zoom:1}
.fff{color:#ffffff;}
.fc636363{color:#636363;}
.f60{color:#ff6600;}
.tc{text-align:center;}
.mtb20{margin-top:20px;margin-bottom:20px;}
.ft24{font-size:24px;}
.ft20{font-size:20px;}
.ft16{font-size:16px;}
/* index.html */
.wap-box{max-width:640px;margin:0 auto;background-color:#FF7FC6;height:100%;}
.wap-contain{max-width:640px;margin:0 auto;background-color:#FF7FC6;}
.header{height:50px;color:#ff6600;line-height:50px;text-align:center;font-size:16px;background-color:bisque;}
.warper{padding:20px 45px;min-height:435px;background-color:#FF7FC6;}
.myname{border:1px solid #fff;outline:none;width:96%;margin:0 auto;font-size:18px;height:40px;color:#999;padding-left:4%;text-align:left;}
.postrlt{display:block;width:100%;height:45px;border:0;border-radius:4px;box-shadow:2px 2px #FF97D1;text-align:center;margin:0 auto;line-height:45px;font-size:18px;background-color:#FF2EA2;color:#fff;}
.goback{display:block;width:100%;height:45px;border:0;border-radius:4px;box-shadow:2px 2px #FF97D1;text-align:center;margin:0 auto;line-height:45px;font-size:18px;background-color:#FF2EA2;color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)