JavaScript小例子
1. alert.html
<html>
<head>
<title></title>
<script type="text/javascript">
function alert_test()
{
alert("this is a alert")
}
</script>
</head>
<body>
<input type="button" onclick="alert_test()" value='click it'/>
</body>
</html>2. break.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
for(i=0;i<10;i++)
{
if(i==3) break
document.write("This is number " + i + "</br>")
}
</script>
</body>
</html>3. confirm.html
<html>
<head>
<title></title>
<script type="text/javascript">
function show_confirm()
{
var r = confirm("Please choose OK or Cancel")
if(r == true){
alert("you have click OK")
}else
alert("you have click Cancel")
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="show a confirm box"/>
</body>
</html>4. continue.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
for(i=0;i<10;i++)
{
if(i==3) continue
document.write("This is number " + i + "</br>")
}
</script>
</body>
</html>5. cookie.html
<html>
<head>
<title></title>
<script type="text/javascript">
function setCookie(c_name,c_value,expiredays) //debug has passed....
var c_date = new Date()
c_date.setDate(c_date.getDate() + expiredays)
document.cookie = c_name + "=" + escape(c_value) + ((expiredays == null)? "" : ";expiredays=" + c_date.toUTCString())
}
function getCookie(c_name)
{
if(document.cookie.length>0)
{
c_start = document.cookie.indexOf(c_name + "=")
if(c_start != -1)
{
c_start = c_start + c_name.length + 1
c_end = document.cookie.indexOf(";",c_start)
if (c_end = -1)
{
c_end = document.cookie.length
};
return document.cookie.substring(c_start,c_end)
}
}
return ""
}
function checkCookie()
{
var namecookie = getCookie("username")
if (namecookie !=null && namecookie!="")
{
document.write("hello,"+ namecookie + ",welcome again...")
return
};
var inputname = prompt("Please enter your name...","")
if (inputname != null && inputname!="")
{
setCookie("username",inputname,7)
};
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>6. declarationvar.html
<html>
<head>
<title>this is title</title>
</head>
<body>
<script type="text/javascript">
var firstname
firstname = "George"
document.write(firstname)
document.write("<br></br>")
var lastname
lastname = "John"
document.write(lastname)
</script>
</body>
</html>7. dowhile.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var i = 0
do{
document.write("This is number " + i +"<br/>")
i++
}while(i<6)
</script>
</body>
</html>8. for.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
for(i=0;i<6;i++)
{
document.write("The number is" + " " + i + "<br/>")
}
</script>
</body>
</html>9. forArray.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var nameArray = new Array()
nameArray[0]="Jim"
nameArray[1]="Tom"
nameArray[2]="Lily"
var x
for(x in nameArray)
{
document.write(nameArray[x] + "<br/>")
}
</script>
</body>
</html>10. functionwithPara.html
<html>
<head>
<script type="text/javascript">
function myfunction(para1)
{
document.write(para1)
}
</script>
</head>
<body>
<input type="button" onclick="myfunction('Hello')" value="click it">
</body>
</html>11. functionwithPara2.html
<html>
<head>
<title></title>
<script type="text/javascript">
function myfunction(para1)
{
alert(para1)
}
</script>
</head>
<body>
<input type="button" onclick="myfunction('Morning...')" value="Good Morning Clock">
<input type="button" onclick="myfunction('Evening...')" value="Good Evening Clock">
</body>
</html>12. functionwithReturn.html
<html>
<head>
<title></title>
<script type="text/javascript">
function myfunction()
{
return ("Hi,this is function return...")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myfunction())
</script>
</body>
</html>13. getcookie_test.html
<html>
<head>
<title></title>
<script type="text/javascript">
function getCookie(c_name) //dubug has passed
{
if(document.cookie.length>0)
{
c_start = document.cookie.indexOf(c_name + "=")
document.write(c_start + "<br/>")
document.write(document.cookie+ "<br/>")
if(c_start != -1)
{
c_start = c_start + c_name.length + 1
document.write(c_start+ "<br/>")
c_end = document.cookie.indexOf(";",c_start)
document.write(c_end+ "<br/>")
if (c_end == -1)
{
c_end = document.cookie.length
};
document.write(c_end)
return document.cookie.substring(c_start,c_end)
}
}
return "cookie is not fined"
}
var testget = getCookie("username")
alert(testget)
</script>
</head>
<body>
</body>
</html>14. headlineFor.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
document.write("<h1>This is headline 1</h1>")
for(i=1;i<6;i++)
{
document.write("<h" + i + ">" + "This is headline" + i +"</h" + i + ">")
}
</script>
</body>
</html>15. helloWorld.html
<html>
<script>
document.write("Hello World!!!")
</script>
</html>16. helloWorld2.html
<html>
<script type="text/javascript">
document.write("<h1>Hello World....</h1>")
</script>
</html>17. if.html
<html>
<head>
<title>this is title</title>
</head>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if(time>12)
{
document.write("<b>Good Afternoon</b>")
}
else
document.write("this is else branch...")
</script>
</body>
</html>18. ifElseIf.html
<html>
<head>
<title>this is title</title>
</head>
<body>
<script type="text/javascript">
var score = 50
if(score>=60 && score<80)
{
document.write("Good")
}
else if (score>=80)
{
document.write("Excellent")
}
else
document.write("Sorry,You have not passed")
</script>
</body>
</html>19. imageMap.html
<html>
<head>
<title></title>
<script type="text/javascript">
function writetext(txt)
{
document.getElementById("desc").innerHTML=txt //"" and '' is different Please Notice
}
</script>
</head>
<body>
<img src="eg_planets.jpg" usemap="#planetmap">
<map name="planetmap">
<area shape="circle" coords="180,139,14" href="alert.html" onmouseover="writetext('The Venus...')" />
<area shape="circle" coords="129,161,10" href="alert.html" onmouseover="writetext('The Mercury...')" />
<area shape="rect" coords="0,0,110,260" href="alert.html" onmouseover="writetext('The Sun...')" />
</map>
<p > </p>
</body>
</html>20. mouse.html
<html>
<head>
<title></title>
<script type="text/javascript">
function mouseOver()
{
document.image01.src="eg_mouse.jpg"
}
function mouseOut()
{
document.image01.src="eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="alert.html" target="_blank">
<img name="image01" src="eg_mouse2.jpg" onmouseover="mouseOver()" onmouseout="mouseOut()">
</a>
</body>
</html>21. randomLink.html
<html>
<head>
<title>this is title</title>
</head>
<body>
<script type="text/javascript">
var r = Math.random()
if (r>0.5) {
document.write("<a href = 'http://www.baidu.com'>please access BaiDu.</a>")
}else
document.write("<a href = 'http://10.0.111.154:8080'>please access jira</a>")
</script>
</body>
</html>22. scriptInBody.html
<html>
<head>
<title>this is title</title>
</head>
<body onload="message()">
<script type="text/javascript">
function message()
{
alert("script is in body...")
}
</script>
</body>
</html>23. scriptInHead.html
<html>
<head>
<title>title is null</title>
<script type="text/javascript">
function message()
{
alert("script is in head...")
}
</script>
</head>
<body onload="message()">
</body>
</html>24. scriptIsOut.html
<html>
<head>
<title>this is title...</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="message()">
</body>
</html>25. setcookie_test.html
<html>
<head>
<title></title>
<script type="text/javascript">
function setCookie(c_name,c_value,expiredays) //debug has passed....
{
var c_date = new Date()
c_date.setDate(c_date.getDate() + expiredays)
document.cookie = c_name + "=" + escape(c_value) + ((expiredays == null)? "" : ";expiredays=" + c_date.toUTCString())
}
</script>
</head>
<body>
<input type = "button" value="click" onclick="setCookie('username','1234456',7)" >
</body>
</html>26. throw.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var num = prompt("Please enter a number between 1 and 10","")
try
{
if(num<0)
throw "Error1"
else if(num>10)
throw "Error2"
else if(isNaN(num))
throw "Error3"
}catch(err)
{
if(err=="Error1")
alert("too small...")
if(err=="Error2")
alert("too large...")
if(err=="Error3")
alert("It is not a number...")
}
</script>
</body>
</html>27. timer.html
<html>
<head>
<title></title>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alert('3 second has passed...')",3000)
}
</script>
</head>
<body>
<input type="button" value="click it" onclick="timeMsg()">
</body>
</html>28. timer2.html
<html>
<head>
<title></title>
<script type="text/javascript">
function timeMsg()
{
var t1 = setTimeout("document.getElementById('showText').value='2 second has passed...' ",2000)
var t1 = setTimeout("document.getElementById('showText').value='4 second has passed...' ",4000)
var t1 = setTimeout("document.getElementById('showText').value='6 second has passed...' ",6000)
}
</script>
</head>
<body>
<input type="button" value="click it" onclick="timeMsg()">
<input type="text" >
</body>
</html>28. timer3.html
<html>
<head>
<title></title>
<script type="text/javascript">
var c = 0
var t
function timeMsg()
{
document.getElementById("showTime").value=c
c=c+1
t=setTimeout("timeMsg()",1000)
}
</script>
</head>
<body>
<input type="button" value="click it" onclick="timeMsg()">
<input type="text" >
</body>
</html>29. timer4.html
<html>
<head>
<title></title>
<script type="text/javascript">
var c = 0
var t
function timeMsg()
{
document.getElementById("showTime").value=c
c=c+1
t=setTimeout("timeMsg()",1000)
}
function timerstop()
{
c = 0
clearTimeout(t)
document.getElementById("showTime").value=0
}
</script>
</head>
<body>
<input type="button" value="click it" onclick="timeMsg()">
<input type="text" >
<input type="button" value="click it to stop" onclick="timerstop()">
</body>
</html>30. try.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var txt=""
function myfunction()
{
try
{
allert("this is a alert...")
}catch(err)
{
txt="there is an error... \n\n"
txt+="Error Description:" + err.description + "\n\n"
txt+="Please press Enter to continue... \n\n"
alert(txt)
}
}
</script>
<input type="button" onclick="myfunction()" value="click it">
</body>
</html>31. try2.html
<html>
<head>
<title></title>
<script type="text/javascript">
var txt
function myfunction()
{
try
{
alllert("this is a right alert...")
}catch(err)
{
txt = "There is an error in this page... \n"
txt += "Press Enter to continue,Press Cancle to back... \n"
var r = confirm(txt)
if(!r) //Here bug
{
document.location.href("WriteText.html")
}
}
}
</script>
</head>
<body>
<input type="button" onclick="myfunction()" value="click it">
</body>
</html>32. while.html
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var i=0;
while(i<6)
{
document.write("This is number " + i +"<br/>")
i++
}
</script>
</body>
</html>33. writeText.html
<html>
<head>
<title>this is title</title>
</head>
<body>
<script type="text/javascript">
document.write("<h1>this is headline...</h1>")
document.write("<p>this is a paragraph...</p>")
document.write("<p>this ia another paragraph...</p>")
</script>
</body>
</html>- 上一篇 »javascript基础小技巧
- 下一篇 »html5 canvas 小例子 旋转的时钟