前端入门到熟悉day25

其他对象

Date转换

//实例化一个日期对象

var datetime1 = new Date();

// console.log(datetime1);

getFullYear() 方法可返回一个表示年份的 4 位数字。

var b = datetime1.getFullYear();

// console.log(typeof b); NUmber 2019

// console.log(datetime1.getTime());

//计算一下程序的运行时间

var start = new Date();

// for(var i=0;i<1000;i++){

// console.log(i)

// }

var end = new Date();

// console.log("运行时间"+(end.getTime()-start.getTime())+"毫秒");

setFullYear() 方法用于设置年份。

datetime1.setFullYear(2020, 10 - 1, 05); //月份是从0开始的

// console.log(datetime1.getFullYear());

// console.log(datetime1);

var data2 = new Date();

data2.setFullYear(2019, 1 - 1, 07);

// function DateF(data){

// if(data==0){

// return "星期日"

// }else if(data==1){

// return "星期一"

// }

// else if(data==2){

// return "星期二"

// }

// else if(data==3){

// return "星期三"

// }

// else if(data==4){

// return "星期四"

// }

// else if(data==5){

// return "星期五"

// }

// else if(data==6){

// return "星期六"

// }

var array = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

// array[0] = "星期日";

// array[1] = "星期一";

// array[2] = "星期二";

// array[3] = "星期三";

// array[4] = "星期四";

// array[5] = "星期五";

// array[6] = "星期六";

// console.log(array[data2.getDay()]);

d 月中的某一天。一位数的日期没有前导零。

dd 月中的某一天。一位数的日期有一个前导零。

ddd 周中某天的缩写名称，在 AbbreviatedDayNames 中定义。

dddd 周中某天的完整名称，在 DayNames 中定义。

M 月份数字。一位数的月份没有前导零。

MM 月份数字。一位数的月份有一个前导零。

MMM 月份的缩写名称，在 AbbreviatedMonthNames 中定义。

MMMM 月份的完整名称，在 MonthNames 中定义。

y 不包含纪元的年份。不具有前导零。

yy 不包含纪元的年份。具有前导零。

yyyy 包括纪元的四位数的年份。

gg 时期或纪元。

h 12 小时制的小时。一位数的小时数没有前导零。

hh 12 小时制的小时。一位数的小时数有前导零。

H 24 小时制的小时。一位数的小时数没有前导零。

HH 24 小时制的小时。一位数的小时数有前导零。

m 分钟。一位数的分钟数没有前导零。

mm 分钟。一位数的分钟数有一个前导零。

s 秒。一位数的秒数没有前导零。

ss 秒。一位数的秒数有一个前导零。

f 秒的小数精度为一位。其余数字被截断。

console.log(dateFtt("yyyy-MM-dd hh:mm:ss",data2));

function dateFtt(fmt,date)

{ //author: meizz

var o = {

"M+" : date.getMonth()+1, //月份

"d+" : date.getDate(), //日

"h+" : date.getHours(), //小时

"m+" : date.getMinutes(), //分

"s+" : date.getSeconds(), //秒

"q+" : Math.floor((date.getMonth()+3)/3), //季度

"S" : date.getMilliseconds() //毫秒

};

if(/(y+)/.test(fmt))

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));

for(var k in o)

if(new RegExp("("+ k +")").test(fmt))

fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));

return fmt;

}

时间戳转时间

function date(format, timestamp){

var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date());

var pad = function(n, c){

if((n = n + "").length < c){

return new Array(++c - n.length).join("0") + n;

} else {

return n;

}

};

var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"};

var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var f = {

// Day

d: function(){return pad(f.j(), 2)},

D: function(){return f.l().substr(0,3)},

j: function(){return jsdate.getDate()},

l: function(){return txt_weekdays[f.w()]},

N: function(){return f.w() + 1},

S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'},

w: function(){return jsdate.getDay()},

z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0},

// Week

W: function(){

var a = f.z(), b = 364 + f.L() - a;

var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;

if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){

return 1;

} else{

if(a <= 2 && nd >= 4 && a >= (6 - nd)){

nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");

return date("W", Math.round(nd2.getTime()/1000));

} else{

return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);

}

// Month

F: function(){return txt_months[f.n()]},

m: function(){return pad(f.n(), 2)},

M: function(){return f.F().substr(0,3)},

n: function(){return jsdate.getMonth() + 1},

t: function(){

var n;

if( (n = jsdate.getMonth() + 1) == 2 ){

return 28 + f.L();

} else{

if( n & 1 && n < 8 || !(n & 1) && n > 7 ){

return 31;

} else{

return 30;

}

// Year

L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0},

//o not supported yet

Y: function(){return jsdate.getFullYear()},

y: function(){return (jsdate.getFullYear() + "").slice(2)},

// Time

a: function(){return jsdate.getHours() > 11 ? "pm" : "am"},

A: function(){return f.a().toUpperCase()},

B: function(){

// peter paul koch:

var off = (jsdate.getTimezoneOffset() + 60)*60;

var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off;

var beat = Math.floor(theSeconds/86.4);

if (beat > 1000) beat -= 1000;

if (beat < 0) beat += 1000;

if ((String(beat)).length == 1) beat = "00"+beat;

if ((String(beat)).length == 2) beat = "0"+beat;

return beat;

g: function(){return jsdate.getHours() % 12 || 12},

G: function(){return jsdate.getHours()},

h: function(){return pad(f.g(), 2)},

H: function(){return pad(jsdate.getHours(), 2)},

i: function(){return pad(jsdate.getMinutes(), 2)},

s: function(){return pad(jsdate.getSeconds(), 2)},

//u not supported yet

// Timezone

//e not supported yet

//I not supported yet

O: function(){

var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);

if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;

return t;

P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))},

//T not supported yet

//Z not supported yet

// Full Date/Time

c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()},

//r not supported yet

U: function(){return Math.round(jsdate.getTime()/1000)}

};

return format.replace(/[\]?([a-zA-Z])/g, function(t, s){

if( t!=s ){

// escaped

ret = s;

} else if( f[s] ){

// a date function exists

ret = f[s]();

} else{

// nothing special

ret = s;

}

return ret;

});

}

console.log(date('Y-m-d H:i:s','1350052653'))

// 时间戳转时间

Math

var num = 19.49;

//四舍五入

// console.log(Math.round(num));

// 0-1 随机数

// console.log(Math.random());

//获取0-10 随机数整数

// console.log(Math.round(Math.random()*10));

//除去小数点不四舍五入

var a =1.911;

// console.log(Math.floor(a));

//圆周率

console.log(Math.PI);

//获取最大/小值 max/min 区间拿到5-10 的最大值

console.log(Math.min(5,10))

倒计时

window.onload = function () {

Daojishi();

}

var time=0;

function Daojishi() {

time++;

if(time==5){

alert("停止倒计时，开始执行别的方法");

window.open("https://www.baidu.com");

// window.close()

}else{

console.log(time);

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

提示： 1000 毫秒= 1 秒。

提示： 如果你只想重复执行可以使用 setInterval() 方法。

提示： 使用 clearTimeout() 方法来阻止函数的执行。

setTimeout("Daojishi()",1000);

}

</script>

抽奖

function choujiang(){

var p1 = document.getElementById('p1');

var p2 = document.getElementById('p2');

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

//0-10

if(p2.innerHTML > 0){

var a = Math.round(Math.random()*10)

if(a<=0){

p1.innerHTML = "一等奖"

}else if(a>0 && a<=5){

p1.innerHTML = "三等奖"

}else if(a>5 && a<=10){

p1.innerHTML = "二等奖"

}

var b = p2.innerText;

p2.innerHTML = b-1;

}else{

alert("没有符卡抽奖啦")

}

</script>

时间计时器

window.onload=function(){

getTime();

}

//时间计时器方法

function getTime(){

var data = new Date();

//获取时间的时

var h=data.getHours();

//获取分

var m = zero(data.getMinutes());

//获取秒

var s = zero(data.getSeconds());

function zero(val){

if(val<10){

val="0"+val;

}

return val

}

var span1 = document.getElementById("span1");

span1.innerHTML = h+":"+m+":"+s;

setTimeout("getTime()",1000);

}

</script>

Ajax

01ajax

function LoadAjax(){

//得到这个异步请求的对象;

var date1 = new Date();

var xmlhttpre;

//防止老版本的浏览器没有 XMLHttpRequest对象

if(window.XMLHttpRequest){

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttpre = new XMLHttpRequest();

}else{

// IE6, IE5 浏览器执行代码

xmlhttpre=new ActiveXObject("Microsoft.XMLHTTP");

}

//get 字符提交明文安全性低处理时间比较快

//post 字节提交隐藏起来的请求头里面看见安全性高处理时间慢

//创建（打开）一个请求

xmlhttpre.open("get","http://127.0.0.1:8081/login2",true);

//发送请求

xmlhttpre.send();

//请求的事件

xmlhttpre.onreadystatechange=function(){

console.log(xmlhttpre.responseText);

}

</script>

02post请求

function LoadAjax(){

//得到这个异步请求的对象;

var date1 = new Date();

var xmlhttpre;

//防止老版本的浏览器没有 XMLHttpRequest对象

if(window.XMLHttpRequest){

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttpre = new XMLHttpRequest();

}else{

// IE6, IE5 浏览器执行代码

xmlhttpre=new ActiveXObject("Microsoft.XMLHTTP");

}

//get 字符提交明文安全性低处理时间比较快

//post 字节提交隐藏起来的请求头里面看见安全性高处理时间慢

//创建（打开）一个请求

xmlhttpre.open("post","http://127.0.0.1:8081/login",true);

//发送请求

xmlhttpre.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttpre.send("name=pangzi&pwd=123456");

//请求的事件

xmlhttpre.onreadystatechange=function(){

if(xmlhttpre.readyState == 4 && xmlhttpre.status==200){

//请求成功啦

console.log(xmlhttpre.responseText);

var date2 = new Date();

console.log("get请求的事件："+(date2.getTime()-date1.getTime()))

}

</script>

03ajax请求状态

function LoadAjax(){

//得到这个异步请求的对象;

var date1 = new Date();

var xmlhttpre;

//防止老版本的浏览器没有 XMLHttpRequest对象

if(window.XMLHttpRequest){

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttpre = new XMLHttpRequest();

}else{

// IE6, IE5 浏览器执行代码

xmlhttpre=new ActiveXObject("Microsoft.XMLHTTP");

}

//get 字符提交明文安全性低处理时间比较快

//post 字节提交隐藏起来的请求头里面看见安全性高处理时间慢

//创建（打开）一个请求

xmlhttpre.open("get","http://127.0.0.1:8081/login2",true);

//发送请求

xmlhttpre.send();

//请求的事件

xmlhttpre.onreadystatechange=function(){

if(xmlhttpre.readyState == 4 && xmlhttpre.status==200){

//请求成功啦

console.log(xmlhttpre.responseText);

var date2 = new Date();

console.log("get请求的事件："+(date2.getTime()-date1.getTime()))

}else{

alert("404 页面不存在")

}

// if(xmlhttpre.readyState == 2){

// alert("2:"+xmlhttpre.responseText)

// }

// if(xmlhttpre.readyState == 3){

// alert("3:"+xmlhttpre.responseText)

// }

// if(xmlhttpre.readyState == 4){

// alert("4:"+xmlhttpre.responseText)

// }

}

</script>

04ajax与json实战

window.onload = function () {

LoadAjax();

}

function LoadAjax() {

var xmlhttpre;

//防止老版本的浏览器没有 XMLHttpRequest对象

if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttpre = new XMLHttpRequest();

} else {

// IE6, IE5 浏览器执行代码

xmlhttpre = new ActiveXObject("Microsoft.XMLHTTP");

}

//创建请求

xmlhttpre.open("post", "http://127.0.0.1:8081/login3");

xmlhttpre.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttpre.send("name=chair&pwd=123456");

//请求事件

xmlhttpre.onreadystatechange = function () {

if (xmlhttpre.readyState == 4 && xmlhttpre.status == 200) {

//请求成功啦

var val1 = xmlhttpre.responseText; //一段文本；

console.log(val1);

var json2 = JSON.parse(val1);

console.log(json2);

var div1 = document.getElementById("content");

//迭代数据渲染页面

for (key in json2) {

var str = "<ul><li class='li1'>"

str += "<h3>" + json2[key].header + "</h3></li>";

str += "<li class='li2'>" + json2[key].content + "</li>";

str += "<li class='li3'>" + json2[key].date + "</li>";

str += "</ul>"

// var str = "<ul><li class='li1'><h3>"+json2[key].header+"</h3></li>"

}

div1.innerHTML = str;

}

</script>

05优化ajax

var xmlhttpre;

function func1(){

if (xmlhttpre.readyState == 4 && xmlhttpre.status == 200){

alert(xmlhttpre.responseText);

}

window.onload=function(){

var btn1 = document.getElementById("btn1")

var btn2 = document.getElementById("btn2")

}

btn1.onclick=function(){

var url = "http://127.0.0.1:8081/login";

var submitType = "GET";

var data = "name=chair&pwd=123456";

LoadAjax(submitType,url,data,func1);

}

btn2.onclick=function(){

var url = "http://127.0.0.1:8081/login";

var submitType = "post";

var data = "name=chair&pwd=123456";

LoadAjax(submitType,url,data,func1);

}

</script>

06ajax和json实战优化

var xmlhttpre;

function func1() {

if (xmlhttpre.readyState == 4 && xmlhttpre.status == 200) {

//请求成功啦

var val1 = xmlhttpre.responseText; //一段文本；

console.log(val1);

var json2 = JSON.parse(val1);

console.log(json2);

var div1 = document.getElementById("content");

//迭代数据渲染页面

for (key in json2) {

var str = "<ul><li class='li1'>"

str += "<h3>" + json2[key].header + "</h3></li>";

str += "<li class='li2'>" + json2[key].content + "</li>";

str += "<li class='li3'>" + json2[key].date + "</li>";

str += "</ul>"

// var str = "<ul><li class='li1'><h3>"+json2[key].header+"</h3></li>"

div1.innerHTML += str;

}

window.onload = function () {

var url = "http://127.0.0.1:8081/login3";

var submitType = "post";

var data = "name=chair&pwd=123456";

LoadAjax(submitType, url, data, func1);

}

</script>

封装好的

function LoadAjax(submitType,url,data,func1){

if (window.XMLHttpRequest) {

xmlhttpre = new XMLHttpRequest();

} else {

xmlhttpre = new ActiveXObject("Microsoft.XMLHTTP");

}

if(submitType == "get"||"GET"){

//创建（打开）一个请求

xmlhttpre.open(submitType,url+"?"+data,true);

//发送请求

xmlhttpre.send();

}else if(submitType == "post"){

//创建（打开）一个请求

xmlhttpre.open(submitType,url,true);

//发送请求

xmlhttpre.setRequestHeader("Content-type","application/x-www-form-urlencoded")

xmlhttpre.send(data);

}

xmlhttpre.onreadystatechange =func1;

}

前端入门到熟悉day25

猜你喜欢