Timer setInterval

window.setInterval(code,millisec): executes a function or code fragment according to a specified period (interval).

• Parameter 1:code must be. The name of the function executed or the code string executed.
• Parameter 2:millisec must be. Time interval in milliseconds.
• Return value: a value that can be passed to window Clearinterval() to cancel the value of the periodic execution of code.
  For example:
• Method 1: function name, setInterval(show, 100);
• Method 2: function string, setInterval("show()", 100);
  The window object provides global functions, which can be omitted when calling functions.
• window.setInterval() equivalent setInterval()

<div style="width: 100%;">
<img id="imgId" src="img/1.jpg" width="100%" />
</div>
<script type="text/javascript">
// Load successfully, start the listener, and execute it line times in 5 seconds
window.onload = function () {
setInterval(changeImage, 5000);
}
// Switch between 3 photos
var num = 1;
function changeImage() {
if (num >= 3) {
num = 1;
}
var imageObj = document.getElementById("imgId");
imageObj.src = "img/" + ++num + ".jpg";
}
</script>

JavaScript timer: setTimeout

• setTimeout(code,millisec): calls a function or executes a code segment after the specified number of milliseconds.
  • Parameter 1:code must be. The function to call or the code string to execute.
  • Parameter 2:millisec must be. The number of milliseconds to wait before executing a code.
• setInterval(): execute a function or code segment with a specified period. (the last case has been explained)
• clearInterval(): cancels the timeout set by setInterval().
• clearTimeout(): cancels the timeout set by setTimeout().

setInterval()	Calls a function or evaluates an expression for a specified period (in milliseconds).
setTimeout()	Calls a function or evaluates an expression after the specified number of milliseconds
clearInterval()	Cancels the timeout set by setInterval().
clearTimeout()	Cancels the timeout set by the setTimeout() method.

JavaScript style get or modify

Get or set style:

• obj.style. Attribute: get the value of the specified attribute

• obj.style. Attribute = value, set the content for the specified attribute.

    If the attribute is used by more than one word - Connection, need to - Delete and capitalize the first letter of the next word
  

<div id="divId" style="height:100px;width:100px;margin:10px;padding:20px;">
</div>
<script type="text/javascript">
// 1 get div object
var divObj = document.getElementById("divId");
// 2 obtain high degree
// * divObj.style.height data is "100px"
// *Make use parseInt() to convert the string "100px" to the number "100"
var height = window.parseInt(divObj.style.height);
// 3 double the original high and set it to div
// *Note: the company must be added, otherwise it will be invalid
divObj.style.height = height * 2 + "px";
</script>

BOM(Browser Object Model)

BOM:Window object (Master)

• DOM Window object

• DOM Navigator

• DOM Screen

• DOM History

• DOM Location

• Method: timer

Function name	describe
setInterval()	Calls a function or evaluates an expression for a specified period (in milliseconds).
setTimeout()	Calls a function or evaluates an expression after the specified number of milliseconds
clearInterval()	Cancels the timeout set by setInterval().
clearTimeout()	Cancels the timeout set by the setTimeout() method.

• Method: message box

Function name	describe
alert()	Display a warning box with a message and a confirm button
confirm()	A dialog box with a message, a confirm button and a cancel button is displayed. The confirmation box returns true; Cancel return false
prompt()	Display the dialog box that can prompt the user for input, and click OK to obtain the user input data

• window size

1. IE9 (including, and above), Chrome, FireFox and other browsers have obtained method style
   • window.innerHeight - the internal degree of the browser window
   • window.innerWidth - the internal width of the browser window
2. Internet Explorer 8,7,6,5
   • document.documentElement.clientHeight
   • document.documentElement.clientWidth
     perhaps
   • document.body.clientHeight
   • document.body.clientWidth
3. JS implementation side compatible with all browsers

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

BOM:Location object

• href attribute: sets or returns the full URL.

attribute	describe
hash	Sets or returns the URL (anchor) starting from the pound (\.
host	Sets or returns the host name and the port number of the current URL.
hostname	Sets or returns the hostname of the current URL.
href	Set or return the full URL.
pathname	Sets or returns the path part of the current URL
port	Sets or returns the port number of the current URL
protocol	Sets or returns the protocol for the current URL
search	Set or return from the question mark (?) Start URL (query section)

BOM:History object (understand)

• go() method: jump to the specified page
  • go(-1) load the first one links, equivalent to back()
  • go(1) after loading a links, equivalent to forwar()
    |Method | description|
    |—|---|
    |back() | load the previous URL in the history list|
    |forward() | load the next URL in the history list|
    |go() | load a specific page in the history list|

Tag title content: innerHTML

InnerHTML - internal text version of HTML elements

• Get: document getElementById(“divId”). innerHTML
• Setting: document getElementById(“divId”). innerHTML = “…”

Related events

Event name	describe
onsubmit	Confirm button is clicked
onblur	Element loses focus
onfocus	Element gets focus

Form verification code:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Member registration</title>
		
		<style type="text/css">
			input[type=submit]{
				background-color: crimson;
				color: white;
				border: none;
				padding: 16px 50px;
			}
			input[type=text],[type=password]{
				width: 100%;
				height: 30px;
				border-radius: 4px;
				border: 2px solid #c2c2c2;
			}
		</style>
		
		<!--  -->
		<script>
			//1. page loading function onload
			window.onload = function() {
				//Get user name as input box - DOM global variable
				usernameInput = document.getElementById("username");
				//Add loss of focus event
				usernameInput.onblur = function(){
					checkUseranme();
				}
				passwordInput = document.getElementById("password");
				passwordInput.onblur = function(){
					checkPassword();
				}
				qr_passwordInput = document.getElementById("qr_password");
				qr_passwordInput.onblur = function(){
					checkQr_password();
				}
			}
			
			function checkUseranme(){
				//2. Regular expression
				var reg2 = /^[a-zA-Z]\w{5,17}$/;
				//Get the text content in the input box
				var username = usernameInput.value;
				var username_msg = document.getElementById("username_msg");
				//3. validate regular expressions and strings
				if(!reg2.test(username)){
					//Prompt error message
					//4. set / get the contents of the label body
					username_msg.innerHTML = "<font color='red' size='2'>User name format error</font>";
					return false;
				}else{
					username_msg.innerHTML = "";
					return true;
				}					
			}
			
			function checkPassword(){
				var reg = /^.{6,16}$/;
				var password = passwordInput.value;
				var password_msg = document.getElementById("password_msg");
				if(!reg.test(password)){
					password_msg.innerHTML = "<font color='red' size='2'>Password length is 6-16 character</font>";
					return false;
				}else{
					password_msg.innerHTML = "";
					return true;
				}
			}
			
			function checkQr_password(){
				var reg3 = passwordInput.value;
				var qr_password = qr_passwordInput.value;
				var qr_password_msg = document.getElementById("qr_password_msg");
				if(reg3 != qr_password){
					qr_password_msg.innerHTML = "<font color='red' size='2'>Confirm password error</font>";
					return false;
				}else{
					qr_password_msg.innerHTML = "";
					return true;
				}
			}
			
			function check(){
				return checkUseranme() && checkPassword() && checkQr_password();
			}
		</script>
		
	</head>
	<body>
		<form action="#" method="get" onsubmit="return check();">
		<table align="center" cellspacing="20px">
			<tr>
				<td><font size="4" color="royalblue">Member registration<font></td>
				<td><font size="2">USER REGISTER</font></td>
			</tr>
			<tr>
				<td align="right"><label for="username">user name</label></td>
				<td colspan="2"><input type="text" id="username" name="username" placeholder="enter one user name"/>
				<span id="username_msg"></span>
				</td>
			</tr>
			
			<tr>
				<td  align="right"><label for="password">password</label></td>
				<td colspan="2"><input type="password" id="password" name="password" placeholder="Please input a password"/>
				<span id="password_msg"></span>
				</td>
			</tr>
			
			<tr>
				<td align="right"><label for="qr_password">Confirm password</label></td>
				<td colspan="2"><input type="password" id="qr_password" name="qr_password" placeholder="Please enter the confirmation password"/>
				<span id="qr_password_msg"></span>
				</td>
			</tr>
			
			<tr>
				<td align="right"><label for="email">Email</label></td>
				<td colspan="2"><input type="text" id="email" name="email" placeholder="Please enter email"/></td>
			</tr>
			
			<tr>
				<td align="right"><label for="u_name">full name</label></td>
				<td colspan="2"><input type="text" id="u_name" name="u_name" placeholder="Please enter your name"/></td>
			</tr>
			
			<tr>
				<td align="right"><label>Gender</label></td>
				<td colspan="2">
					<input type="radio" id="male_sex" name="sex" value="male">
					<label for="male_sex">male</label>&nbsp;&nbsp;&nbsp;
					<input type="radio" id="female_sex" name="sex" value="male">
					<label for="female_sex">female</label>
				</td>
			</tr>
			
			<tr>
				<td align="right"><label for="birthday">date of birth</label></td>
				<td colspan="2"><input type="text" id="birthday" name="birthday" placeholder="Please enter the date of birth"/></td>
			</tr>
			
			<tr>
				<td align="right"><label for="yzm">Verification Code</label></td>
				<td><input type="text" id="yzm" name="yzm" placeholder="Please enter the verification code"/></td>
				<td><img width="100px" src="../img/yanzhengma.png"></td>
			</tr>
			
			<tr>
				<td></td>
				<td><input type="submit" value="register" /></td>
				<td></td>
			</tr>
		</table>
		</form>
	</body>
</html>