1.JavaScript timer
-
Define timer:
-
setInterval('call function ', millisecond time): the function is executed every fixed millisecond interval
-
setTimeout('call function ', millisecond time): execute a call function after a fixed time
-
-
Turn off timer:
-
Clearinterval (timer name)
-
Cleartimeout (timer name)
-
<script type="text/javascript">
/*Case: 3,2,1 jump to Baidu page
Analysis: use the timer to change the content of h1 every second
* */
var timerId;
var index=3;
onload=function(){
var h1 = document.getElementsByTagName("h1")[0];
timerId = setInterval(function(){
index--;
if(index>0){ //3,2,1 you can see the changes
h1.innerHTML=index;
}else{
location.href="http://www.baidu.com "; / / jump
clearInterval(timerId); //Clear timer
}
},1000)
}
</script>
<body>
<h1>3</h1>
</body>2.cookies
To put it simply: cookies are saved in the form of key value pairs, that is, the format of key=value. Each cookie is generally separated by ";"
It is a file stored on the user's hard disk. This file usually corresponds to a domain name. When the browser accesses the domain name again, it will make this domain name
Cookies are available. Therefore, cookie s can span multiple web pages under one domain name, but they cannot be used across multiple domain names.
What can cookies do?
1. Save the login status of the user
2. Customize the page, such as skin changing, selecting the region, etc
3. Implementation of shopping cart
4. Record the user's browsing history
Disadvantages of cookies:
1. Cookies may be disabled
2. Cookies are related to the browser. Even if you visit the same page, cookie s saved by different browsers cannot access each other
3. The cookie may be deleted because the cookie is actually a file on the hard disk
4. The security of cookies is not high enough. All cookies are recorded in files in plain text.
Set cookie s
Each cookie is a name / value pair. You can assign the following string to document.cookie:
document.cookie="userId=888";
If you want to store multiple name / value pairs at a time, you can use semicolons and spaces (;) to separate them, for example:
document.cookie="userId=888; userName=1601";
Get cookie
The following describes how to obtain the value of a cookie. The value of a cookie can be obtained directly from document.cookie:
var strCookie=document.cookie;
Set expiration time for cookie s
In actual development, cookie s often need to be saved for a long time, such as saving the user's login status. This can be achieved with the following options:
document.cookie="userId=828; expires=GMT_String";
For example:
date.setTime(date.getTime()+expiresDaysx24x1000x3600);
document.cookie="userId=888; userName=1601; expires="+date.toGMTString();
Skin changing cookies case**
<!--External style import -->
<link rel="stylesheet" type="text/css" id="style"/>
<body>
<!-- Case: there are many labels on the page. There are two buttons. One click turns red and the other click turns green
Upgrade: record the color effect of the last click
Analysis: 1.When you click color change, set cookie
2.After the page is loaded, get cookie，Take out the recorded value
-->
<input type="button" value="Turn red" onclick="red()" />
<input type="button" value="Turn green" onclick="green()" />
<input type="button" value="Clear color" onclick="clearBtn()" /><br />
<p>The child is determined to go out of the countryside</p>
<p>Learn not to be famous, swear not to return</p>
<div>Why should Sangzi land be buried</div>
<h2>Where is life without green mountains</h2>
<script>
var link = document.getElementById("style");
function red(){
link.href="../css/red.css";
//Set cookie s
var date = new Date();
date.setTime(date.getTime()+1000*60*60*24);
document.cookie="color=red;expires="+date.toGMTString();
}
function green(){
link.href="../css/green.css";
var date = new Date();
date.setTime(date.getTime()+1000*60*60*24);
document.cookie="color=green;expires="+date.toGMTString();
}
function clearBtn(){
alert("Cleared successfully!");
link.href=""; //Clear page display color
//Clear cookie s
var date = new Date();
date.setTime(date.getTime());
document.cookie="color=xxx;expires="+date.toGMTString();
}
onload=function(){
//Get cookie
var cookie = document.cookie; //"color=red;key=value";
debugger
if(cookie){ //Only when the cookie is obtained can it be split and the color effect be obtained
var strColor = cookie.split(";")[0];
var key = strColor.split("=")[0];
var value = strColor.split("=")[1];
if(key=="color"){
link.href="../css/"+value+".css";
}
}
}
</script>
</body>
3. Create object supplement
<script type="text/javascript">
/* Object creation method: 1. Use json data: {name:'zs',age:30}
* In addition, there are the following ways:
* 2. new Object()mode
*/
var st = new Object();
/* Object Assignment */
st.name = "fengjie";
st.age = 18;
/* Object value */
document.write(st.name+"--"+st.age+"<br />");
//3. Constructor mode
var student = new Student("zsf",80);
document.write(student.name+"=="+student.age);
function Student(name,age){
this.name = name; //Assign a value to the constructor property
this.age = age;
}
</script>