Home > Developer > JavaScript
<! DOCTYPE html><html><head><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><title>Timer</title><script type="Text/javascript"> var i = setinterval (clock,+); function clock(){var time=New Date(); Attime=time.gethours () +":"+time.getminutes () +":"+time.getseconds (); document.getElementById ("Clock"). Value = Attime; } </script></head><body><form><input type="text" id="Clock" size=" ><input type="button" value="Stop" onclick ="Clearinterval (i)" /></form></body></html>Demo Result:
Click the Stop button to stop the timing.
To create a counter that runs in an infinite loop, we need to write a function to call itself. In the following code, when the button is clicked, the input field is counted starting at 0.
Added a "Stop" button to stop this counter.
<! DOCTYPE html><html><head><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><title>Timer</title></head><script type="Text/javascript"> var num=0; var i; function startcount(){ document.getElementById (' count '). Value=num; num=num+1; I=settimeout ("Startcount ()",+); } function stopcount(){ cleartimeout (i); } </script></head><body> <form> <input type="text" id="Count" /> <input type="button" value="Start" onClick ="Startcount ()" /> <input type="button" value="Stop" onClick=" Stopcount () " /> </form></body></html>Demo Effect:
Click the Start button to start the timer and click the Stop button to stop the timer.
<! DOCTYPE html><html><head><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><title>Untitled Document</title></head> <script type="Text/javascript"> function goback () { window.history.back (); } function GoForward () { window.history.forward (); } function GoBacka () { window.history.go (-1 ); } function GoForwarda
() { window.history.go (1 ); } </script></head><body>Click the anchor link below to add a History list item:<br /> <a href="#target1">First Anchor Point</a> <a name="Target1"></a> <br /> <a href="#target2">A second anchor point</a> <a name="Target2"></a> <br /><br />Using the buttons below, the implementation returns to the previous page:<form> <input type="button"value="Return to previous page" onclick=" GoBack (); " /> <input type="button"value="Return to next page" onclick ="GoForward ()" /> <input type="button"value="Return to previous page" onclick=" Gobacka (); " /> <input type="button"value="Return to next page" onclick ="Goforwarda ();" /> </form></body></html>Demo Result:
Click 第一个锚点 and 第二个锚点 , when the button is clicked, is 返回下一个页面 currently in #target1 and will return to #target2.
Currently in #target2, clicking the button 返回前一个页面 will return to #target2.
Requirements:
If you open this page, if you do not do anything, you will automatically jump to a new address after 5 seconds, such as Mu-class web home page.
If you click the Back button, the previous page is returned.
Effect:
Note: When you run the program in a window, the window must have historical browsing history, otherwise "back" has no effect.
Task decomposition
The first step: Write a good page layout, as follows:
Step two: Get the element that shows the number of seconds, and change the number of seconds by the timer.
The third step: control the jump of the page through the window's location and history object.
Workaround Code:
<! DOCTYPE html><html> <head> <title>Browser Object</title> <meta http-equiv="Content-type" Content="text/html; CHARSET=GKB "/> </head> <body> <!--write a page layout first -- <h2>Operation succeeded</H2> <p><span id="Time">5</span>Seconds back to Home<a href="Javascript:history.back ()">Return</a></P> <script type="Text/javascript"> //Gets the element that displays the number of seconds, changing the number of seconds by the timer. var num = document.getElementById ("Time"). InnerHTML; //through the location and History object of window to control the page jump. var i = setinterval ("if" (num > 1) {document.getElementById (' time '). InnerHTML =--num;} Else{location.assign (' http://www.imooc.com ');} ", +); </script> </body></html>Demo Effect:
Front-end Practice--javascript--Browser objects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
