柏拉图app星座测试php源码实现

柏拉图app星座测试php源码实现

php老杜发表留言

话说最近有款很火的性格测试小游戏，这条来势汹汹的刷屏信息是出自于“柏拉图APP”的性格测试小游戏。只要输入真实姓名和出生日期，就能测出你的性格从而生成一张图，短时间随着朋友圈不断地转发、分享，吸粉100w.，无论是其公众号的关注度还是APP的下载量，都在短时间内达到了火爆的高潮。根据ASO100的数据，从7月16日零时开始，这款应用在iOS渠道上的社交免费榜排名上，已经从150名开外快速跃升到了前10名。老杜将使用php来实现。

首页我们做一个index.html页面，代码如下

  • <!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
<meta name="format-detection" content="telephone=no">
<title>hello</title>
<link rel="stylesheet" type="text/css" href="assets/my.css">
<script type="text/javascript" src="assets/jquery-1.js"></script>
<script type="text/javascript" src="assets/hs_mobiscroll_date.js"></script>
<script type="text/javascript" src="assets/hs_mobiscroll.js"></script>
</head>
<body onload="init()">
<div class="background">
 <div class="name">
 <span class="title">姓名:</span>
 <span class="write-name">
 <input placeholder="请输入姓名（最多4个汉字）" class="user-name" maxlength="4" onblur="checkName()" type="text">
 </span>
 </div>
 <div class="birthday">
 <span class="title">生日:</span>
 <span class="chose-birthday">
 <input readonly="readonly" placeholder="请选择出生日期（阳历生日）" class="user-birthday" id="user_birthday" type="text">
 </span>
 </div>
</div>
<div style="width: 1152px; height: 167.767px; position: absolute; z-index: 10; top: 77%; left: 10%;" class="button" onclick="makePicture()"></div>

<div class="transparent-float"></div>
<div class="float">
 <div style="width: 1353.6px; height: 1748.4px; position: relative; margin-top: 2%; margin-left: 3%;" class="picture-box">
 <span class="close" onclick="closeFloat()"></span>
 <span style="width: 1299.46px; height: 1537.69px; position: absolute; z-index: 1; bottom: 2%; left: 2%;" class="picture">
 <img class="mypicture" src="">
 </span>
 <span style="width: 1299.46px; height: 1537.69px; position: absolute; z-index: 2; top: 2%; left: 2%;" class="scan"></span>
 </div>
 <div style="width: 1353.6px; height: 205.512px; position: relative; margin-top: 5%; left: 3%;" class="text"></div>
</div>

<script type="text/javascript">
$(function () {
 var currYear = new Date().getFullYear(); 

 var opt={};
 opt.date = {preset : 'date'};
 opt.default = {
 theme: 'android-ics light', 
 display: 'bottom', 
 mode: 'scroller',
 dateFormat: 'yyyy-mm-dd',
 lang: 'zh',
 showNow: false,
 startYear: currYear - 100,
 endYear: currYear
 };

 $("#user_birthday").mobiscroll($.extend(opt['date'], opt['default']));
});
</script>
<script type="text/javascript" src="assets/4js.js"></script>
</body>
</html>

my.css需要样式：

*{margin: 0; padding: 0;}
html, body{width: 100%; height: 100%;}
.background{width: 100%; height: 100%; position:relative; top: 0; left: 0; background: url('http://dingphone.ufile.ucloud.com.cn/images/time2plato_marketing/2/1.png') center center / cover no-repeat;}
.name{width: 84%; height: 40px; position: absolute; top: 46%; left: 8%; border-bottom: 2px solid #4E617E;}
.birthday{width: 84%; height: 40px; position: absolute; top: 55%; left: 8%; border-bottom: 2px solid #4E617E;}
.title{width: auto; height: 20px; float:left; margin-left:2px; margin-top: 15px; color: #FFFFFF; font-size: 18px; line-height: 20px; display: block;}
.write-name, .chose-birthday{width: 200px; height: 20px; float:left; margin-left:20px; margin-top: 15px; display: block;}
.user-name, .user-birthday{width: 100%; height:100%; color: #92939B; font-size: 16px; border: none; outline: none; background: none;}
.button{background: url('http://dingphone.ufile.ucloud.com.cn/images/time2plato_marketing/2/2.png') center center / 100% 100% no-repeat;}
.transparent-float{width: 100%; height: 100%; background-color: #000000; opacity: 0.5; -webkit-opacity: 0.5; position: fixed; z-index: 99; top: 0; left: 0; display: none;}
.float{width: 100%; height: 100%; position: fixed; z-index: 100; top: 0; left: 0; display: none;}
.picture-box{background: url('http://dingphone.ufile.ucloud.com.cn/images/time2plato_marketing/2/5.png') center center / 100% 100% no-repeat;}
.close{width: 40px; height: 40px; position: absolute; top: 0; right:0;}
.text{background: url('http://dingphone.ufile.ucloud.com.cn/images/time2plato_marketing/2/4.png') center center / 100% 100% no-repeat;}
.picture{background-color: #000000;}
.mypicture{width: 100%; height: 100%; background: none; display: none;}
.scan{background-color: #000000; color: #FFFFFF; font-size: 20px; text-align:center;}
.moveline{width: 100%; height: 2px; border: none; background-color: #FFFFFF; position: absolute; animation:mymove 2s infinite linear; -webkit-animation:mymove 2s infinite linear;}
/* Datewheel overlay */
.dw{position: absolute; top: 5%; left: 0; z-index: 1001; color: #000; font-family: arial, verdana, sans-serif; font-size: 12px; text-shadow: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -ms-touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.dwi{position: static; margin: 5px; display: inline-block;}
.dwwr{min-width: 170px; zoom: 1; padding: 0 10px; text-align: center;}
/* Datewheel overlay background */
.dw-persp, .dwo{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1001;}
.dwo{background: #000; opacity: .7; filter: Alpha(Opacity=70);}
/* Bubble positionings */
.dw-bubble .dw{margin: 20px 0;}
.dw-bubble .dw-arrw{position: absolute; left: 0; width: 100%;}
.dw-bubble-top .dw-arrw{bottom: -36px;}
.dw-bubble-bottom .dw-arrw{top: -36px;}
.dw-bubble .dw-arrw-i{margin: 0 30px; position: relative; height: 36px;}
.dw-bubble .dw-arr{display: block;}
.dw-arr{display: none; position: absolute; left: 0; width: 0; height: 0; border-width: 18px 18px; border-style: solid; margin-left: -18px;}
.dw-bubble-bottom .dw-arr{top: 0; border-color: transparent transparent #fff transparent;}
.dw-bubble-top .dw-arr{bottom: 0; border-color: #fff transparent transparent transparent;}
/* Datewheel wheel container wrapper */
.dwc{float: none; margin: 0 2px 5px 2px; padding-top: 30px; display: inline-block;width: 90%;}
.dwcc{clear: both;}
/* Datewheel label */
.dwl{text-align: center; line-height: 30px; height: 30px; white-space: nowrap; position: absolute; top: -30px; width: 100%;}
/* Datewheel value */
.dwv{padding: 10px 0; border-bottom: 1px solid #000;}
/* Datewheel wheel container */
.dwrc{-webkit-border-radius: 3px; border-radius: 3px;}
.dwwc{margin: 0; padding: 0 2px; position: relative; background: #000; zoom: 1;}
/* Datewheel wheels */
.dwwl{margin: 4px 2px; z-index: 5;}
.dww{margin: 0 2px; overflow: hidden; position: relative;}
.dwsc .dwwl{background: #888; background: linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%); background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.35, #333),color-stop(0.50, #888),color-stop(0.65, #333),to(#000)); background: -moz-linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%); background: -o-linear-gradient(#000 0%,#333 35%, #888 50%,#333 65%,#000 100%);}
.dwsc .dww{color: #fff; background: #444; background: linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%); background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.45, #444),color-stop(0.55, #444),to(#000)); background: -moz-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%); background: -o-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%);}
.dw-bf{-webkit-perspective: 1000; -webkit-backface-visibility: hidden;}
.dw-ul{position: relative; z-index: 2;}
.dw-li{padding: 0 5px; display: block; text-align: center; line-height: 40px; font-size: 26px; white-space: nowrap; text-shadow: 0 1px 1px #000; vertical-align: bottom; opacity: .3; filter: Alpha(Opacity=30);}
/* Higlighted */
.dw-li.dw-hl{background: #fff; background: rgba(255,255,255,.3);}
/* Valid entry */
.dw-li.dw-v{opacity: 1; filter: Alpha(Opacity=100);}
/* Hidden entry */
.dw-li.dw-h{visibility: hidden;}
.dw-i{position: relative; height: 100%;font-size: 22px;}
/* Wheel +/- buttons */
.dwwb{position: absolute; z-index: 4; left: 0; cursor: pointer; width: 100%; height: 40px; text-align: center; opacity: 1; transition: opacity .2s linear; -webkit-transition: opacity .2s linear;}
.dwa .dwwb{opacity: 0;}
.dwwbp{top: 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; font-size: 40px;}
.dwwbm{bottom: 0; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; font-size: 32px; font-weight: bold;}
.dwpm .dwwc{background: transparent;}
.dwpm .dww{margin: 0;}
.dwpm .dw-li{text-shadow: none;}
.dwpm .dwwol{display: none;}
/* Datewheel wheel overlay */
.dwwo{position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%); background: -webkit-gradient(linear,left bottom,left top,from(#000),color-stop(0.52, rgba(44,44,44,0)),color-stop(0.48, rgba(44,44,44,0)),to(#000)); background: -moz-linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%); background: -o-linear-gradient(#000 0%,rgba(44,44,44,0) 52%, rgba(44,44,44,0) 48%, #000 100%);}
/* Background line */
.dwwol{position: absolute; z-index: 1; top: 50%; left: 0; width: 100%; height: 0; margin-top: -1px; border-top: 1px solid #333; border-bottom: 1px solid #555;}
/* Datewheel button */
.dwbg .dwb{cursor: pointer; overflow: hidden; display: block; height: 40px; line-height: 40px; padding: 0 15px; margin: 0 2px; font-size: 14px; font-weight: bold; text-decoration: none; text-shadow: 0 -1px 1px #000; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); color: #fff; background: #000; background: linear-gradient(#6e6e6e 50%,#000 50%); background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #000),color-stop(0.5, #6e6e6e)); background: -moz-linear-gradient(#6e6e6e 50%,#000 50%); background: -o-linear-gradient(#6e6e6e 50%,#000 50%); white-space: nowrap; text-overflow: ellipsis; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-border-radius: 5px;}
/* Datewheel button container */
.dwbc{padding: 5px 0; text-align: center; clear: both;border-bottom: 1px solid #CCCCCC;}
.dwbc:after{content: ''; display: block; clear: both;}
/* Datewheel button wrapper */
.dwbw{display: inline-block; float: right; width: 80px; position: relative; z-index: 5;}
.dwbc-p .dwbw{width: 33.33%;}
/* Hidden label */
.dwhl{padding-top: 10px;}
.dwhl .dwl{display: none;}
/* Multiple selection */
.dwms .dwwms .dw-li{padding: 0 40px; position: relative;}
.dwms .dw-msel:after{width: 40px; text-align: center; position: absolute; top: 0; left: 0; content: '?';}
/* Backgrounds */
.dwbg{background: #fff; border-radius: 3px; -webkit-border-radius: 3px;}
.dwbg .dwpm .dwwl{border: 1px solid #aaa;}
.dwbg .dwpm .dww{color: #000; background: #fff; -webkit-border-radius: 3px;}
.dwbg .dwwb{background: #ccc; color: #888; text-shadow: 0 -1px 1px #333; box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333;}
.dwbg .dwwbp{background: linear-gradient(#f7f7f7,#bdbdbd); background: -webkit-gradient(linear,left bottom,left top,from(#bdbdbd),to(#f7f7f7)); background: -moz-linear-gradient(#f7f7f7,#bdbdbd); background: -o-linear-gradient(#f7f7f7,#bdbdbd);}
.dwbg .dwwbm{background: linear-gradient(#bdbdbd,#f7f7f7); background: -webkit-gradient(linear,left bottom,left top,from(#f7f7f7),to(#bdbdbd)); background: -moz-linear-gradient(#bdbdbd,#f7f7f7); background: -o-linear-gradient(#bdbdbd,#f7f7f7);}
.dwbg .dwb-a{background: #3c7500; background: linear-gradient(#94c840 50%,#3c7500 50%); background: -webkit-gradient(linear,left bottom,left top,color-stop(0.5, #3c7500),color-stop(0.5, #94c840)); background: -moz-linear-gradient(#94c840 50%,#3c7500 50%); background: -o-linear-gradient(#94c840 50%,#3c7500 50%);}
.dwbg .dwwl .dwb-a{background: #3c7500; background: linear-gradient(#94c840,#3c7500); background: -webkit-gradient(linear,left bottom,left top,from(#3c7500),to(#94c840)); background: -moz-linear-gradient(#94c840,#3c7500); background: -o-linear-gradient(#94c840,#3c7500);}
/* Android ICS skin */
.android-ics .dw{padding: 0; color: #31b6e7; background: #292829;}
.android-ics .dw .dwwc,
.android-ics .dw .dwwl,
.android-ics .dw .dww,
.android-ics .dw .dwb,
.android-ics .dw .dwpm .dww{background: none;}
.android-ics .dwwr{padding: 0;}
.android-ics .dwc{margin: 0; padding: 30px 10px 1px 10px;}
.android-ics .dwhl{padding: 1px 10px;}
.android-ics .dwv{height: 36px; line-height: 36px; padding: 0; border-bottom: 2px solid #31b6e7; font-size: 18px;}
.android-ics .dwwl{margin: 0 2px;}
.android-ics .dww,
.android-ics .dw .dwpm .dwwl,
.android-ics .dw .dwpm .dww{border: 0;}
.android-ics .dww .dw-li{color: #fff; font-size: 18px; text-shadow: none;}
.android-ics .dww .dw-li.dw-hl{background: #31b6e7; background: rgba(49,182,231,.5);}
.android-ics .dwwo{background: linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%); background: -webkit-gradient(linear,left bottom,left top,from(#282828),color-stop(0.52, rgba(40,40,40,0)),color-stop(0.48, rgba(40,40,40,0)),to(#282828)); background: -moz-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%); background: -o-linear-gradient(#282828 0%,rgba(40,40,40,0) 52%, rgba(40,40,40,0) 48%, #282828 100%);}
.android-ics .dw .dwwb{background: #292829; box-shadow: none; -webkit-box-shadow: none;}
.android-ics .dwwb span{display: none;}
.android-ics .dwwb:after{position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; color: #7e7e7e; width: 0; height: 0; border-width: 8px; border-style: solid; content: '';}
.android-ics .dwwbm{top: 0; bottom: auto;}
.android-ics .dwwbp{bottom: 0; top: auto;}
.android-ics .dwwbm:after{border-color: transparent transparent #7e7e7e transparent;}
.android-ics .dwwbp:after{border-color: #7e7e7e transparent transparent transparent;}
.android-ics .dw .dwwl .dwb-a{background: #292829;}
.android-ics .dwwbm.dwb-a:after{border-color: transparent transparent #319abd transparent;}
.android-ics .dwwbp.dwb-a:after{border-color: #319abd transparent transparent transparent;}
.android-ics .dw .dwwol{width: 100%; height: 36px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; margin-top: -20px; display: block;}
.android-ics .dwbc{border-top: 1px solid #424542; padding: 0;}
.android-ics .dw .dwb{height: 36px; line-height: 36px; padding: 0; margin: 0; font-weight: normal; text-shadow: none; box-shadow: none; border-radius: 0; -webkit-border-radius: 0; -webkit-box-shadow: none;}
.android-ics .dw .dwb-a{background: #29799c;}
/* Docked */
.android-ics.dw-bottom .dw, .android-ics.dw-top .dw{border-radius: 0; -webkit-border-radius: 0;}
/* Multiple select */
.android-ics .dwwms .dwwol{display: none;}
.android-ics .dwwms .dw-li{padding-left: 5px; padding-right: 36px;}
.android-ics .dwwms .dw-li:after{content: ''; position: absolute; top: 50%; left: auto; right: 10px; width: 14px; height: 14px; margin-top: -9px; color: #31b6e7; line-height: 14px; border: 1px solid #424542; text-shadow: 0 0 5px #29799c;}
.android-ics .dwwms .dw-msel:after{content: '?';}
/* Light version */
.android-ics.light .dw{background: #f5f5f5;}
.android-ics.light .dww .dw-li{color: #000;}
.android-ics.light .dwwo{background: linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%); background: -webkit-gradient(linear,left bottom,left top,from(#f5f5f5),color-stop(0.52, rgba(245,245,245,0)),color-stop(0.48, rgba(245,245,245,0)),to(#f5f5f5)); background: -moz-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%); background: -o-linear-gradient(#f5f5f5 0%,rgba(245,245,245,0) 52%, rgba(245,245,245,0) 48%, #f5f5f5 100%);}
.android-ics.light .dw .dwwb{background: #f5f5f5; color: #f5f5f5;}
.android-ics.light .dwbc{border-top: 1px solid #dbdbdb;}
.android-ics.light .dwb{color: #1E90FF;font-size: 14px; font-weight: bold; letter-spacing: 2px;}
.android-ics.light .dwb-a{color: #fff;}
/* Bubble positioning */
.android-ics .dw-bubble-bottom .dw-arr{border-color: transparent transparent #292829 transparent;}
.android-ics .dw-bubble-top .dw-arr{border-color: #292829 transparent transparent transparent;}
/* Bubble positioning */
.android-ics.light .dw-bubble-bottom .dw-arr{border-color: transparent transparent #f5f5f5 transparent;}
.android-ics.light .dw-bubble-top .dw-arr{border-color: #f5f5f5 transparent transparent transparent;}
/* Multiple select */
.android-ics.light .dwwms .dw-li:after{text-shadow: 0 0 5px #31b6e7;}

说明太麻烦发直接给源码吧：源码下载  密码: qjwc

下载链接: http://pan.baidu.com/s/1mitqqXM 密码: qjwc

留下回复