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 id="planetmap" 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 id="desc"> </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" id="showText">
</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" id="showTime"> </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" id="showTime">
<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小例子的更多相关文章
- JavaScript小例子：复选框全选
JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...
- javascript小例子：實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
- 五个小例子教你搞懂 JavaScript 作用域问题
众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者 ...
- 【zTree】 zTree使用的 小例子
使用zTree树不是第一次了 但是 还是翻阅着之前做的 对照着 使用起来比较方便 这里就把小例子列出来 总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先 在 ...
- Ajax入门小例子
大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html ---Ajax基础学习 http:/ ...
- JS模拟键盘事件 -- 原理及小例子
提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- C# Newtonsoft.Json解析数组的小例子[转]
https://blog.csdn.net/Sayesan/article/details/79756738 C# Newtonsoft.Json解析数组的小例子 http://www.cnblog ...
- 前端小例子 基础js css html练习
前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...
随机推荐
- css-图文案例
效果如下: 附上代码: <html> <head> <title>World</title> <style type="text/css ...
- javascript代码
LazyMan 实现LazyMan(什么是LazyMan?请自行google) function _LazyMan(_name) { var _this = this; _this.tasks = [ ...
- 【PyQt5 学习记录】009：批量创建组件并查找
这里需要在创建组件时使用 setObjectName() 为其添加 objectName 属性,再通过 findChild() 或者 findChildren() 函数来查找. 举个栗子,批量创建10 ...
- Mac终端使用技巧 切换到其他路径和目录
如果你想将当前 command line 会话切换到其他目录,需要用到三个命令:pwd,ls和cd. pwd的含义是“print working directory”,会显示当前目录的绝对路径. ls ...
- html History API
History api 兼容性支持一下浏览器 为什么要使用History API 在AJAX给我们带来提高用户体验.减少HTTP连接数等好处的同时,也渐渐显露出一些不足之处,比如: 1.页面全是用aj ...
- Spring Boot—18Redis
pom.xml <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-ja ...
- ulimit命令&pthread_create() error: Resource temporarily unavailable
http://www.ibm.com/developerworks/cn/linux/l-cn-ulimit/ https://my.vertica.com/docs/5.0/HTML/Master/ ...
- LeetCode题解之Find the Difference
1.题目描述 2.题目分析 比较两个字符串中加入的一个字符,由于可能在字符串中加入一个已经存在的字符,因此使用hash table 去统计字符个数最好. 3.代码 char findTheDiffer ...
- leetCode题解之First Missing Positive
1.问题描述 2.题解思路 本题的思路是对于数组中每个正的元素,应该将其放到数组中对应的位置,比如元素1 ,应该放在数组的第一个位置.以此类推,最后检查数组中元素值和下标不匹配的情况. 3.代码 in ...
- SQL Server ->> 查询添加XLOCK表提示不阻塞其他线程
BEGIN TRAN BEGIN END DROP TABLE IF EXISTS tempdb..#t CREATE TABLE #t ( spid int, dbid int, ObjId int ...