【练习】jsonP的实际应用，移动端web，京东手机移动端（开头）
1.百度地圖開放平臺jsonP的實際應用
http://lbsyun.baidu.com/index.php?title=webapi/direction-api-v2
找到一個端口，把ak改成自己的密鑰
<body>
<input type="button" id="btn" name="獲取地區信息" value="獲取地區信息">
</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script>? ? ? ? ? ? ? //引入jquery包
<script type="text/javascript" src="template-native.js"></script>? ? ??//引入template包
<script type="text/template id="template">? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
????????<%for(var i=0;i<routes.length;i++) {%>? ? ? ? ? //routes是來自于看console.log(data)輸出的object里面想要的部分
<tr>
<td><%=routes[i].distance%></td>? ? ? ? //routes是一個數組，里面裝的是對象
<td><%=routes[i].duration%></td>
</tr>
<% } %>
</script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
url:"http://api.map.baidu.com/direction/v2/transit?origin=40.056878,116.30815&destination=31.222965,121.505821&ak=自己的密鑰",
dataType:"jsonp",
success:function(data){
console.log(data);
var routesdata = data.result[2];? ? ? ? ? //routes是object中的result中的第三個元素
var str = template('template',routesdata);? ? //模版引擎
console.log(str);
$("body").append(str);
}
})
})
})
</script>
?
object可以成功輸出，但是
Template Error
<filename>
template
<name>
Render Error
<message>
Template not found? ? ?
是模版引擎有問題嗎？? ? ? ?（這個代碼就寫了1個小時，太慢）
2.移動端web（內核都是webkit）
1）視口屬性viewpot（快捷鍵：mate:vp+tab,裝了emmet插件）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width:一般都是設備的寬度，不需要給單位，一般
initial-scale:初始縮放值
minimum-scale/maximum-scale:允許用戶的最小/大縮放值
user-scalable:是否允許用戶進行縮放，默認no/false
2）快速出測試文字：lorem+tab默認100個，lorem 1000+tab?
3)高亮效果：某些瀏覽器自帶
-webkit-tap-highlight-color:transparent(透明的);/*清除點擊高亮效果*/4）盒子模型
?
-webkit-box-sizing: border-box;/*webkit內核兼容性寫法*/ 盒子大小不變，內容會變content-box:內容不變，盒子大小撐開
5）input默認樣式清楚：
在移動設備的瀏覽器中input標簽一般會有默認的樣式,通過border=none,outline=none無法去除,比如立體效果,3d效果等等
?
-webkit-appearance: none;6）最小寬度，最大寬度
?
max-width: 640px; /*在行業當中的移動端的設計圖一般使用的是640px*/ min-width: 300px; /*在移動設備當中現在最小的尺寸320px*/7）結構偽類選擇器（沒太看懂）
nth-child()如果有多個不同兄弟節點獲取的時候,索引需要特殊計算,我們可以限定在某一個類型上,語法如下
- E:first-of-type匹配同類型中的第一個元素E。
- E:last-of-type匹配同類型中的最后一個元素E。
- E:nth-of-type(n) 匹配同類型中的第n個元素E。
3.京東手機移動端（開頭）
base.css? ? 默認樣式
*,::before,::after{
padding:0;
margin: 0;
font-size: 14px;
-webkit-tap-highlight-color:transparent;
-webkit-box-sizing:border-box;
}
input{
border: none;
-webkit-appearance:none;
}
a{
text-decoration: : none;
}
ul,ol{
list-style: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::before,.clearfix::after,{
content: "";
display: block;
line-height: 0;
height: 0;
visibility: hidden;
clear: both;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>京東移動端</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">? ?//移動端就要寫
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">? ?//引入css寫在head里
</head>?
<body>
<div class="jd_contain">
<div class="header">??
<a href="javascript:void(0)" class="header_logo"></a>
<input type="searth" name="" class="header_search" placeholder='請輸入內容'>? //placeholder會讓字體顏色灰色
<span class="header_glass"></span>
<a href="javascript:void(0)" class="header_login">登陸</a>
</div>
<div class="banner">
<ul class="banner_image">? ? ? ? ? ? //輪播圖，第一張前面放最后一張，最后一張后面放第一張
<li><a href="#"><img src="images/l8.jpg"></a></li>
<li><a href="#"><img src="images/l1.jpg"></a></li>
<li><a href="#"><img src="images/l2.jpg"></a></li>
<li><a href="#"><img src="images/l3.jpg"></a></li>
<li><a href="#"><img src="images/l4.jpg"></a></li>
<li><a href="#"><img src="images/l5.jpg"></a></li>
<li><a href="#"><img src="images/l6.jpg"></a></li>
<li><a href="#"><img src="images/l7.jpg"></a></li>
<li><a href="#"><img src="images/l8.jpg"></a></li>
<li><a href="#"><img src="images/l1.jpg"></a></li>
</ul>
<ul class="banner_index">
<li class='current'></li>? ? ?//current代表當前選中的樣式
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
index.html
.jd_contain{
width:? 100%;
}
.header{
width: 100%;
height: 40px;
position: relative;
background: rgb(201,21,35);
padding-left: 70px;? ? ? ? ? ? ? ? ? ? ? //logo和login都是定位在header中，而input會隨著瀏覽器的變寬而變寬，因此最好設? ? ? ? ??padding-right: 60px;? ? ? ? ? ? ? ? ? ? ? ? 置為100%，這就需要把父盒子header左右兩邊撐開放logo和login
}
.header .header_logo{
height: 36px;
width: 60px;
background-image: url("../images/sprites.png");
background-position: 0 -103px;
background-repeat: no-repeat;
background-size: 200px 200px;? ? ? ? //iphone6是視網膜屏幕，即分辨率：像素比=1:2，因此圖片需要縮小
position: absolute;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?iphone6plus是1:3
top: 2px;
left: 5px;
}
.header_search{
width: 100%;
height: 30px;
border-radius: 15px;
padding-left: 10px;
margin-top: 5px;
}
.header_login{
position: absolute;
right: 10px;
top: 0px;
line-height: 40px;
color: white;
font-size: 17px;
}
.header_glass{? ? ? ? ? ? ? ? ? //搜索框中的放大鏡用定位定到input中
background-image: url('../images/sprites.png');
background-repeat: no-repeat;
background-position: -60px -109px;
background-size: 200px 200px;
position: absolute;
left: 75px;
top:10px;
}
.banner{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//輪播圖中的父盒子，寬度和屏幕一樣寬，子盒子ul超出的部分用overflow隱藏
width: 100%;
overflow: hidden;
position: relative;
}
.banner_image{? ? ? ? ? ? ? ? ? ? ? //一共8張圖片，第一張和最后一張前后各一張，一共10張圖片，因此寬度是父盒子的十倍
width:1000%;
}
.banner_image li{? ? ? ? ? ? ? ? ?//li的父盒子是ul，因此它的寬度只有父盒子的十分之一
float: left;
width: 10%;
}
.banner_image li a{? ? ? ? ? ? ? ? //a和img都是行內元素，不能設置寬高，要轉成塊級元素
display: block;
width: 100%;
}
.banner_image li a img{
display: block;
width: 100%;
}
.banner_index{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -44px;? ? ? ? ? ? ? ? ? ? ? ?//定位的left需要居中，先走50%，再往左走盒子的一半
}
.banner_index li{
float: left;
width: 6px;
height: 6px;
border-radius: 50%;
border:solid 1px white;
margin-left: 5px;
}
.banner_index li.current{
background-color: white;
}
今天總的來說狀態還不錯，就是敲代碼太慢，而且第一個例子廢了太多時間，導致最后一個例子都沒有好好寫。
總結
以上是生活随笔為你收集整理的【练习】jsonP的实际应用，移动端web，京东手机移动端（开头）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机毕业设计PHP高校自习室座位网上预
- 下一篇： 出租车收费