day05
2018-07-03 本文已影响0人
特洛伊芋头
A.今天学到了什么
1.global和ignore
<script>
// global-g 是否全文搜索 默认false
// ignore -i 是否忽略大小写
var str ="hello world"
var reg =/l/g;
console.log(str.replace(reg,""));
</script>
2.日期用法
<script>
var oDate =new Date();
var year=oDate.getFullYear();
var month=oDate.getMonth()+1;
var date=oDate.getDate();
var day=oDate.getDay();
var second=oDate.getSeconds();
console.log(oDate);
console.log(year);
console.log(month);
console.log(date);
console.log(day);
console.log(second);
</script>
3.动态时钟
h5部分
<div>
<img src="images/0.png" alt="">
<img src="images/1.png" alt="">
<img src="images/2.png" alt="">
<img src="images/3.png" alt="">
<img src="images/4.png" alt="">
<img src="images/5.png" alt="">
</div>
js部分
<script>
function showTime(){
var clocks=document.getElementsByTagName("img");
var oDate =new Date();
var hour=oDate.getHours();
var minute=oDate.getMinutes();
var second=oDate.getSeconds();
// 1.将时间变成字符串拼接起来
// 2.将他们分割成数组
// 只要小于10 就要在前面补0
function add(time){
if(time<10){
return "0"+time;
}else{
return time+"";
}
}
var allTime= add(hour)+add(minute)+add(second);
console.log(allTime);
for(i=0;i<allTime.length;i++){
clocks[i].src="images/"+allTime[i]+".png";
}
}
showTime();
setInterval(showTime,1000);
</script>
4.ajax-get
<div id="test">
</div>
<script>
//向服务器读取数据的一种技术 可以做到页面局部刷新
// 1.命名方式
var json={
"name":"hello world",
"arr":[1,2,3],
"age":19,
}
// 如何使用ajax
// 1.创建ajax的核心对象
var xhr=new XMLHttpRequest();
// 2.建立与服务器的链接
// 3.向服务器发起请求
var url="https://www.easy-mock.com/mock/5b3ae08ed294426e05198b4a/ajaxTest/getTest"
xhr.open("get",url,true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var resData=JSON.parse(xhr.responseText);
test.innerHTML=resData.data.content;
}
}
</script>
5.ajax-post
<script>
// 1.创建ajax的核心对象
// 使用原生的post方式的時候要设置一个请求头 在open方法和send方法之间设置
var xhr = new XMLHttpRequest();
// 2.建立与服务器的链接
var url = "https://www.easy-mock.com/mock/5b3b16d2b35f9276a57e736c/postTest/postTest"
// 3.向服务器发起请求
xhr.open("post", url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 4.服务器端响应
xhr.send();
xhr.onreadystatechange = function () {
if ( xhr.status == 200) {
if(xhr.readyState == 4){
// 服务器响应完成切请求撑住
console.log(xhr.responseText);
}
}else{
document.body.innerHTML=xhr.status;
}
}
</script>
6.get 和post 的区别
get和post的区别
1.get请求的参数字段是再url里面的
2.安全性:post方法更安全
3.请求的数据量：post请求的数据量更大
4.get速度更快
7.jquery-ajax
css部分
jquery路径
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
js部分
<script>
$.ajax({
method:"get",
url:"https://www.easy-mock.com/mock/5b3ae08ed294426e05198b4a/ajaxTest/getTest",
dataType:"json",
success:function(res){
console.log(res);
},
error:function(xhr){
document.body.innerHTML=xhr.status;
}
})
</script>
8.jquery-get
css部分
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
js部分
script>
var url="https://www.easy-mock.com/mock/5b3ae08ed294426e05198b4a/ajaxTest/getTes"
$.get(url,function(data){
console.log(data);
}).fail(function(data){
document.body.innerHTML=data.status;
console.log(data.status);
})
</script>
9.jquery-post
css部分引入jquery路径
js部分
<script>
var url="https://www.easy-mock.com/mock/5b3b16d2b35f9276a57e736c/postTest/postTest"
$.post(url,function(data){
console.log(data);
})
</script>
10.跨域
css部分引入jquery路径
js部分
<script>
var url="https://api.douban.com/v2/book/search?q=javascript&count=1";
// $.get(url,function(data){
// console.log(data)
// })
// 跨域实现 用ajax
$.ajax({
type:"get",
url:url,
dataType:"jsonp",
success:function(data){
console.log(data)
}
})
</script>
11.axios-post
css部分引入jquery路径
js部分
<script>
var url="https://www.easy-mock.com/mock/5b3b16d2b35f9276a57e736c/postTest/postTest";
axios.post(url).then(function(succuss){
console.log(succuss)
}).catch(function(err){
console.log(err)
})
</script>
12.axios-get
<script>
var url="https://www.easy-mock.com/mock/5b3ae08ed294426e05198b4a/ajaxTest/getTest";
axios.get(url).then(function(succuss){
console.log(succuss)
}).catch(function(err){
console.log(err)
})
</script>
