蘋果手機是目前比較火或者說是一直很火的手機，但是和人一樣，人火是非多，東西也是，所以我們買蘋果手機的時候都喜歡查詢一下是什么時間出的，什么地方出的，但是奈何還要看很多的資料，登錄這里那里去查詢，有的更惡心的，還要你關注什么微信號才給你說，我也是一個果粉，所以我查看了一下蘋果手機序列號的規則，決定做一個小的工具，可以直接查詢手機的生產地和具體時間。今天我們就一起做一個！
效果預覽：
效果預覽
我們簡單的將思路說一下：
首先要知道怎么實現這個，要明白的是，蘋果手機的序列號是按照什么規則排布的，
規則是：第一位字母：以 C 開頭為深圳，以 D 開頭為成都，以 F 開頭為鄭州
序列號的第四位代表生產年份，用 20 個字母表示(26 個字母中除去 A、B、E、I、O 和 U)，注意是以每半年一進位。其中，M 代表 2014 年上半年，N 代表 2014 年下半年，P 代表 2015 年上半年，Q 代表 2015 年下半年，以此類推。
序列號的第五位是用數字(即 1 到 9，除去 0)和字母(26 個字母中除去 A、B、E、I、O、U、S 和 Z)來表示的，共 27 個，代表周數，從 1 開始，數完數字數字母，每半年一循環。比如 N1 和 N9 這兩個序列號分別代表 2014 年下半年第一周和第九周生產。
需要注意的是，1 到 9 分別代表第 1 到第 9 周，接下來就是 C，代表第 10 周，以此類推。
這是他的規則，這里需要明確的一點是，他是以半年為一個區間，那么序號的第五位也是半年為一個區間，所以這里首先要判斷是上半年還是下半年，然后再去判斷具體的日期。
不BB了，看代碼，很簡單：
CSS：
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{
background: #000;
color: #DDD;
font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
}
.border,.rain{
width: 320px;
}
.rain{
padding: 10px 12px 12px 10px;
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
-webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
margin: 100px auto;
}
.border{
padding: 1px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.border,
.rain,
.border.start,
.rain.start{
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
background-position: 0 0, 0 0, 0 0, 0 0;
background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
background-color: #39f;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
}
.border.end,
.rain.end{
-moz-transition-property: background-position;
-moz-transition-duration: 30s;
-moz-transition-timing-function: linear;
-webkit-transition-property: background-position;
-webkit-transition-duration: 30s;
-webkit-transition-timing-function: linear;
-o-transition-property: background-position;
-o-transition-duration: 30s;
-o-transition-timing-function: linear;
transition-property: background-position;
transition-duration: 30s;
transition-timing-function: linear;
background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;
}
@-webkit-keyframes colors {
0% {background-color: #39f;}
15% {background-color: #F246C9;}
30% {background-color: #4453F2;}
45% {background-color: #44F262;}
60% {background-color: #F257D4;}
75% {background-color: #EDF255;}
90% {background-color: #F20006;}
100% {background-color: #39f;}
}
.border,.rain{
-webkit-animation-direction: normal;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: colors;
-webkit-animation-timing-function: ease;
}
.border.unfocus{
background: #333 !important;
-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
box-shadow: 0px 0px 15px rgba(255,255,255,.2);
-webkit-animation-name: none;
}
.rain.unfocus{
background: #000 !important;
-webkit-animation-name: none;
}
form{
background: #212121;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height:220px;
width: 100%;
background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
}
form label{
display: block;
padding: 10px 10px 5px 15px;
font-size: 11px;
color: #777;
}
form input{
display: block;
margin: 5px 10px 10px 15px;
width: 85%;
background: #111;
-moz-box-shadow: 0px 0px 4px #000 inset;
-webkit-box-shadow: 0px 0px 4px #000 inset;
box-shadow: 0px 0px 4px #000 inset;
outline: 1px solid #333;
border: 1px solid #000;
padding: 5px;
color: #444;
font-size: 16px;
}
form input:focus{
outline: 1px solid #555;
color: #FFF;
}
input[type="button"]{
color: #999;
padding: 5px 10px;
border: 1px solid #000;
font-weight: lighter;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
background: #45484d;
background: -moz-linear-gradient(top, #222 0%, #111 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#11111',GradientType=0 );
-moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
-webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
text-shadow: 0 1px 1px #000;
outline: none;
width:80px;
margin-top:20px;
float: left;
}
css可以不看，美觀一點而已
引用：
<link rel="stylesheet" type="text/css" href="css/layui/css/layui.css"/> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="css/layui/lay/dest/layui.all.js" type="text/javascript" charset="utf-8"></script>
JS：
$(function(){
var $form_inputs = $('form input');
var $rainbow_and_border = $('.rain, .border');
$form_inputs.bind('focus', function(){
$rainbow_and_border.addClass('end').removeClass('unfocus start');
});
$form_inputs.bind('blur', function(){
$rainbow_and_border.addClass('unfocus start').removeClass('end');
});
$form_inputs.first().delay(800).queue(function(){
$(this).focus();
});
});
var address;//生產地
var years;//生產年份
var dates;//生產日期
function checkappleId(){
/* 截取到第一位字符，用來判斷的是生產地址 */
var ID = $("#checkapple").val();
var apple_adress = ID.substr(0,1); //截取的是第一位的字符串，然后截取的長度是一位
/* 截取到第四位的字符，用來判斷的是生產年份 */
var Year = ID.substr(3,1);
/* 截取到第五位的字符，用來判斷生產日期 */
var Dateflag = ID.substr(4,1);//截取到第五位
/* 先判斷是不是正確的是序列號 */
if(ID.length != 12){
layer.msg("序列號有誤！請核對對后重新查詢");
}
else{
if(apple_adress == 'C'){
address = '深圳';
}else if(apple_adress == 'D'){
address = '成都'
}else if(apple_adress == 'F'){
address = '鄭州'
}else{
layer.msg("序列號有誤！請核對對后重新查詢");
return false;
}
console.log("生產地是："+address);
console.log("第四位是："+Year);
console.log("第五位是："+Dateflag);
if(Year == 'M'){
years = '2014上半年';
check_before(Dateflag);
}else if(Year == 'N'){
years = '2014下半年';
check_after(Dateflag);
}else if(Year == 'P'){
years = '2015上半年';
check_before(Dateflag);
}else if(Year == 'Q'){
years = '2015下半年';
check_after(Dateflag);
}else if(Year == 'R'){
years = '2016上半年';
check_before(Dateflag);
}else if(Year == 'S'){
years = '2016下半年';
check_after(Dateflag);
}else if(Year == 'T'){
years = '2017上半年';
check_before(Dateflag);
}else if(Year == 'V'){
years = '2017下半年';
check_after(Dateflag);
}else if(Year == 'W'){
years = '2018上半年';
check_before(Dateflag);
}else if(Year == 'X'){
years = '2018下半年';
check_after(Dateflag);
}else if(Year == 'Y'){
years = '2019上半年';
check_before(Dateflag);
}else if(Year == 'Z'){
years = '2019下半年';
check_after(Dateflag);
}else{
layer.msg("序列號有誤！請核對對后重新查詢");
return false;
}
console.log("年份是："+years);
console.log("日期是："+dates);
layer.open({
type: 1,
title:'查詢結果',
skin: 'layui-layer-rim', //加上邊框
area: ['600px', '400px'], //寬高
btn:['關閉'],
content: '您的序列號是：'+ID+'<br/>'+
'該是手機生產地是：'+address+'<br/>'+
'該是手機生產年份是：'+years+'<br/>'+
'該是手機生產日期是：'+dates+'<br/>'+
'提示：如果您查詢的激活日期早于生產日期，說明您的手機是官換機！',
});
}
}
/* 判斷的是每一年的下半年的日期 */
function check_before(Dateflag){
if(Dateflag == '1'){
dates = '1月1日-1月7日';
}else if(Dateflag == '2'){
dates = '1月8日-1月14日';
}else if(Dateflag == '3'){
dates = '1月15日-1月21日';
}else if(Dateflag == '4'){
dates = '1月22日-1月28日';
}else if(Dateflag == '5'){
dates = '1月29日-2月4日';
}else if(Dateflag == '6'){
dates = '2月5日-2月11日';
}else if(Dateflag == '7'){
dates = '2月12日-2月18日';
}else if(Dateflag == '8'){
dates = '2月19日-2月25日';
}else if(Dateflag == '9'){
dates = '2月26日-3月1日';
}else if(Dateflag == 'C'){
dates = '3月2日-3月8日';
}else if(Dateflag == 'D'){
dates = '3月9日-3月15日';
}else if(Dateflag == 'F'){
dates = '3月16日-3月22日';
}else if(Dateflag == 'G'){
dates = '3月23日-3月29日';
}else if(Dateflag == 'H'){
dates = '4月30日-4月6日';
}else if(Dateflag == 'J'){
dates = '4月7日-4月13日';
}else if(Dateflag == 'K'){
dates = '4月14日-4月20日';
}else if(Dateflag == 'L'){
dates = '4月21日-4月27日';
}else if(Dateflag == 'M'){
dates = '4月28日-5月3日';
}else if(Dateflag == 'N'){
dates = '5月4日-5月10日';
}else if(Dateflag == 'P'){
dates = '5月11日-5月17日';
}else if(Dateflag == 'Q'){
dates = '5月18日-5月24日';
}else if(Dateflag == 'R'){
dates = '5月25日-6月1日';
}else if(Dateflag == 'T'){
dates = '6月2日-6月8日';
}else if(Dateflag == 'V'){
dates = '6月9日-6月15日';
}else if(Dateflag == 'W'){
dates = '6月16日-6月22日';
}else if(Dateflag == 'X'){
dates = '6月23日-6月29日';
}else if(Dateflag == 'Y'){
dates = '6月30日';
}else{
layer.msg("序列號有誤！請核對對后重新查詢");
return false;
}
}
/* 判斷的是下半年具體日期 */
function check_after(Dateflag){
if(Dateflag == '1'){
dates = '7月1日-7月7日';
}else if(Dateflag == '2'){
dates = '7月8日-7月14日';
}else if(Dateflag == '3'){
dates = '7月15日-7月21日';
}else if(Dateflag == '4'){
dates = '7月22日-7月28日';
}else if(Dateflag == '5'){
dates = '7月29日-8月4日';
}else if(Dateflag == '6'){
dates = '8月5日-8月11日';
}else if(Dateflag == '7'){
dates = '8月12日-8月18日';
}else if(Dateflag == '8'){
dates = '8月19日-8月25日';
}else if(Dateflag == '9'){
dates = '8月26日-9月1日';
}else if(Dateflag == 'C'){
dates = '9月2日-9月8日';
}else if(Dateflag == 'D'){
dates = '9月9日-9月15日';
}else if(Dateflag == 'F'){
dates = '9月16日-9月22日';
}else if(Dateflag == 'G'){
dates = '9月23日-9月29日';
}else if(Dateflag == 'H'){
dates = '9月30日-10月6日';
}else if(Dateflag == 'J'){
dates = '10月7日-10月13日';
}else if(Dateflag == 'K'){
dates = '10月14日-10月20日';
}else if(Dateflag == 'L'){
dates = '10月21日-10月27日';
}else if(Dateflag == 'M'){
dates = '10月28日-11月3日';
}else if(Dateflag == 'N'){
dates = '11月4日-11月10日';
}else if(Dateflag == 'P'){
dates = '11月11日-11月17日';
}else if(Dateflag == 'Q'){
dates = '11月18日-11月24日';
}else if(Dateflag == 'R'){
dates = '11月25日-12月1日';
}else if(Dateflag == 'T'){
dates = '12月2日-12月8日';
}else if(Dateflag == 'V'){
dates = '12月9日-12月15日';
}else if(Dateflag == 'W'){
dates = '12月16日-12月22日';
}else if(Dateflag == 'X'){
dates = '12月23日-12月29日';
}else if(Dateflag == 'Y'){
dates = '12月30日-12月31日';
}else{
layer.msg("序列號有誤！請核對對后重新查詢");
return false;
}
}
/*蘋果的全系列產品 */
function apple_info(){
layer.open({
type: 1,
title:'蘋果全系類產品',
skin: 'layui-layer-rim', //加上邊框
area: ['600px', '400px'], //寬高
btn:['關閉'],
content:'型號：IPHONE第一代，發布日期：2007年1月9日<hr><br/>'+
'型號：3G，發布日期：2008年06月10日<hr><br/>'+
'型號：3GS，發布日期：2009年6月9日<hr><br/>'+
'型號：4，發布日期：2010年6月8日<hr><br/>'+
'型號：4S，發布日期：2011年10月04日<hr><br/>'+
'型號：5，發布日期：2012年9月13日<hr><br/>'+
'型號：5C，發布日期：2013年9月10日<hr><br/>'+
'型號：5S，發布日期：2013年9月10日<hr><br/>'+
'型號：6，發布日期：2014年9月10日<hr><br/>'+
'型號：6P，發布日期：2014年9月10日<hr><br/>'+
'型號：6S，發布日期：2015年9月10日<hr><br/>'+
'型號：6SP，發布日期：2015年9月10日<hr><br/>'+
'型號：7，發布日期：2016年9月8日<hr><br/>'+
'型號：7P，發布日期：2016年9月8日<hr><br/>'+
'型號：8，發布日期：2017年9月13日<hr><br/>'+
'型號：8P，發布日期：2017年9月13日<hr><br/>'+
'型號：X，發布日期：2017年9月13日<hr><br/>'+
'官方網址：<a target="_blank">點擊進入<a/>',
});
}
function reload(){
location.reload();
}
當然這里您使用switch case寫也是可以的，畢竟if else很麻煩，寫法是這樣的：
/* 判斷地址 */
switch (apple_adress){
case 'C':
address = '深圳';
break;
case 'D':
address = '成都';
break;
case 'F':
address = '鄭州';
break;
default:
layer.msg("序列號有誤！請核對對后重新查詢");
return false;
}
H5：
<div class="rain"> <div class="border start"> <form> <label for="text">蘋果手機序列號查詢</label> <input name="text" type="text" placeholder="序列號" id="checkapple"/> <input type="button" value="查詢" onclick="checkappleId()"/> <input type="button" value="取消" onclick="reload()"/> <input type="button" value="蘋果" onclick="apple_info()"/> </form> </div> </div>
思路是：
拿到用戶輸入的序列號-截取第一位，第四位，第五位的值-根據規則判斷值-給對應的參數賦值
喜歡的可以關注我，一起學習，雖然寫的沒有什么技術含量，但是還是很實用的，畢竟思路清晰是鍛煉出來的，一點點積累吧！
贊 (0)
相關推薦
蘋果手機發熱耗電快怎么解決的小技巧
蘋果手機發熱耗電快是很多蘋果手機用戶都會感受到的。很多手機用戶就特別懊惱，使用一點也不好，但是事實卻不是這樣，因為我們在使用時候的不規范才會導致，下面給大家講解一些簡單的解決辦法。
蘋果手機內存卡怎么辦 清理內存的方法
蘋果手機使用時間長，手機產生的垃圾就會多，占用手機內存，手機內存一但不多了就會導致手機卡頓的情況，iphone很卡怎么辦?現在為大家解決iphone卡頓的小技巧。
蘋果短信刪除了怎么恢復（免費恢復到正常狀態的方法）
蘋果手機短信刪除了怎么恢復？蘋果手機使用的人還是非常多的，而且最近蘋果還推出了買蘋果7送蘋果耳機的活動，我相信應該會有不少小伙伴會入手蘋果7手機吧。在我們使用蘋果手機的時候，偶爾也…
安卓和蘋果自動點擊器怎么使用（免費下載安裝教學）
自動點擊器 是一款可以幫助你自動點擊屏幕的 Android 應用，無需 root，可視化操作，不用寫腳本，即開即用，可實現點擊、長按、拖動等多種操作與組合。 那個大名鼎鼎的按鍵精靈…
蘋果手機safari打不開該網頁顯示網址無效的解決辦法！
Safari，蘋果手機自帶的一個瀏覽器，很多人都認為是個垃圾，甚至把它卸載！ 但其實，Safari是當時喬布斯最看重的一個蘋果武器！如果真要好好利用起來，這個自帶軟件遠遠比你想象的…
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。
發表評論
請登錄后評論...
登錄后才能評論