创建一个数组，用于保存古代几个大诗人的名字，遍历数组逐一输出每个诗人的名字
<html>
<head></head>
<body>
<script language = "javascript">
var poets = new Array("王维", "杜甫", "李白", "白居易");
document.write("古代几个大诗人：<br>");
for (n in poets){
document.write("<li>" + poets[n]);
}
</script>
</body>
</html>
数据类型的隐式类型转换，外部输入的数据都是字符串型，与数字进行比较判断时，系统会自动将其转换为数值型
<html>
<head></head>
<body>
<script language = "javascript">
var age = prompt("请输入你的年龄：" , "0");
if (age <=0){
alert("您输入的数据不合法");
}
else{
alert("您的年龄为" + age + "岁");
}
</script>
</body>
</html>
数据类型的显式转换，此过程需要手动转换到目标类型，笨栗子是从字符串中解析出水果价格的数值数据。
<html>
<head></head>
<body>
<script language = "javascript">
var priceofApple = "3元";
var priceofBanana = "3.5元";
priceofApple = parseInt(priceofApple);
var priceofBanana2 = parseInt(priceofBanana);
if( (priceofApple==3)&&(priceofBanana2==3)&&(parseFloat(priceofBanana)==3.5)){
alert("苹果的价格：" + priceofApple
+ "\n香蕉价格的整数部分：" + priceofBanana2
+ "\n香蕉的价格：" + parseFloat(priceofBanana));
}
else{
alert("并没有得到预期的转换效果！");
}
</script>
</body>
</html>
编写一个程序，记录学生的高等数学成绩。要求集中输出位于6069,7079,8089,90100各个分数段的学生名字。
<html>
<head></head>
<body>
<script language = "javascript">
var score = new Array(
"王勇", 50,
"白露", 60,
"杨杨", 76,
"李明", 83,
"张莉莉", 70,
"杨宗楠", 71,
"徐霞", 66,
"杨玉婷", 93
);
var namesOf_0To59 = "";
var namesOf_60To69 = "";
var namesOf_70To79 = "";
var namesOf_80To89 = "";
var namesOf_90To100 = "";
var scoreSum = 0;
document.write("<b>《高等数学》成绩统计表</b><br>");
for(index in score)
{
if(index%2 == 1)
{
if((score[index]>=0)&&(score[index]<=59))
{
namesOf_0To59 += score[index-1] + " ";
}
if((score[index]>=60)&&(score[index]<=69))
{
namesOf_60To69 += score[index-1] + " ";
}
if((score[index]>=70)&&(score[index]<=79))
{
namesOf_70To79 += score[index-1] + " ";
}
if((score[index]>=80)&&(score[index]<=89))
{
namesOf_80To89 += score[index-1] + " ";
}
if((score[index]>=90)&&(score[index]<=100))
{
namesOf_90To100 += score[index-1] + " ";
}
scoreSum += score[index];
}
}
document.write("<li>00~59分：" + namesOf_0To59 + "<br>");
document.write("<li>60~69分：" + namesOf_60To69 + "<br>");
document.write("<li>70~79分：" + namesOf_70To79 + "<br>");
document.write("<li>80~89分：" + namesOf_80To89 + "<br>");
document.write("<li>90~100分：" + namesOf_90To100 + "<br>");
document.write("<li>平均分：" + scoreSum/(score.length/2) + "<br>");
</script>
</body>
</html>
使用String对象来处理短文，多次调用charAt方法获取文本中的每一个字符，如果所取的字符是“莲”字，就调用bold方法和fontcolor方法对其设置粗体和颜色。
<html>
<head></head>
<body>
<script language = "javascript">
var comment = "采莲南塘秋，莲花过人头;低头弄莲子，莲子清如水。今晚若有采莲人，这儿的莲花也算得'过人头了';只不见一些流水的影子，是不行的。这令我到底惦着江南了。";
var newComment = "";
for (n = 0;n<comment.length;n ++)
{
var curChar = comment.charAt(n);
if (curChar == "莲"){
newComment += (curChar.bold()).fontcolor("red");
}
else{
newComment += curChar;
}
}
document.write("<li><b>原文：</b><br>" + comment + "<br>");
document.write("<li><b>标记“莲”字：</b><br>" + newComment + "<br>");
</script>
</body>
</html>
全局作用域的变量在整个程序范围都有效，局部作用域指作用范围仅仅局限于变量所在的函数体。
变量同名时局部作用域优于全局作用域
当局部变量与全局变量同名时，局部变量要使用var关键字。
<html>
<head></head>
<body>
<script language = "javascript">
var nA = 10;
function func(){
var nA = 20;
document.write("<li>局部作用范围的nA:" + nA);
}
func();
document.write("<li>全局作用范围的nA：" + nA);
</script>
</body>
</html>
该段代码实现了支付界面简单的功能
<html>
<head></head>
<body>
<script language = "javascript">
var actTotal = 139.7;
var payTotal = 123.45;
document.write("<li>您账上余额：" + actTotal + "元<br>");
document.write("<li>您需要支付：" + payTotal + "元<br>");
document.write("<input id = \"BtnPay\" type=\"button\" value=\"确认支付\" onclick=" + "\"return BtnPay_onclick()\" style=\"width:150px\" /><br>");
if(payTotal > actTotal)
{
document.write("信息：<font color=red>您的余额不足，无法完成支付！</font>");
BtnPay.disabled = true;
}
else
{
BtnPay.disabled = false;
}
function BtnPay_onclick(){
document.write("<li><font color=red>已经完成支付</font>");
document.write("您账上余额：" + (actTotal-payTotal) + "元<br>");
}
</script>
</body>
</html>
将数组按照从小到大的顺序排列出来
<html>
<head></head>
<body>
<script language = "javascript">
var oMyArray = new Array(13,55,37,33,45,9,60,21,10);
document.write("排序前：" + oMyArray);
for(index in oMyArray)
{
for(i in oMyArray)
{
if(oMyArray[index]<oMyArray[i])
{
nTemp = oMyArray[index];
oMyArray[index] = oMyArray[i];
oMyArray[i] = nTemp;
}
}
}
document.write("<br>排序后：" + oMyArray);
</script>
</body>
</html>
用switch语句对所有进来的人问好
<html>
<head></head>
<body>
<script language = "javascript">
var who = "Bob";
switch (who)
{
case "Bob":
alert("Hello," + who);
break;
case "Jim":
alert("Hello," + who);
break;
case "Tom":
alert("Hello," + who);
break;
default:
alert("Nobody~!");
}
</script>
</body>
</html>
本实例实现了一个可以切换背景颜色的功能
<html>
<head></head>
<body id = "PageBody" style = "background:red">
<script language = "javascript"> //脚本程序开始
function ChangeBgColor(colorIndex)
{
var dombody = document.getElementById("PageBody");//获取body节点
if(dombody == null)//如果没有body节点，将直接返回
{
return;//直接返回
}
else//body节点引用成功获取
{
switch(colorIndex)//使用多路开关语句根据菜单传入的值更改网页背景
{
case 1:
dombody.style.background = "#666666"; //通过设定style元素的background属性改变背景
break;
case 2:
dombody.style.background = "#003333"; //设定背景色
break;
case 3:
dombody.style.background = "#ccccff"; //设定背景色
break;
case 4:
dombody.style.background = "#6699cc"; //设定背景色
break;
default:
dombody.style.background = "white"; //设定背景色
break;
}
}
}
</script>
<div style = "width: 100px; height: 20px; text-align: center; background-color: #666666;" onclick = "return ChangeBgColor(1)"></div>
<div style = "width: 100px; height: 20px; text-align: center; background-color: #003333;" onclick = "return ChangeBgColor(2)"></div>
<div style = "width: 100px; height: 20px; text-align: center; background-color: #ccccff;" onclick = "return ChangeBgColor(3)"></div>
<div style = "width: 100px; height: 20px; text-align: center; background-color: #6699cc;" onclick = "return ChangeBgColor(4)"></div>
</body>
</html>
从一份名单中输出名字
<html>
<head></head>
<body>
<div style = "width:216px;height:70px;background-color:#cccccc;" id="NameList" align="center">
</div>
<script language = "javascript"> //脚本程序开始
var names = new Array("lily", "Tomson", "Alex", "Jack"); //名单
for(i = 0; i < names.length; i++) //遍历名单
{
var tn = document.createTextNode(names[i]+" "); //创建一个文本节点，内容为名单上当前名字
var namelist = document.getElementById("NameList"); //找出层NameList
namelist.appendChild(tn); //将文本节点添加到层NameList上
}
</script>
</body>
</html>
用JavaScript实现登录表单的数据验证，要求用户名不能为空且不超过20个字符，密码不能为空且不能为数字之外的20个以内的字符。
<html>
<head>
<title>练习</title>
<script language="javascript" type="text/javascript">
var isDataOK = false;
function Submit1_onclick()
{
return isDataOK;
}
function onChange(obj)
{
try
{
if(obj == "username")
{
var userObj = document.getElementById(obj);
var user = new String(userObj.value);
if((user.length > 20)||(userObj.value == " "))
{
alert("用户名不符合规则：超过20个字符或者为空！");
userObj.value = "";
isDataOK = false;
}
}
else if ( obj == "Password1")
{
var pwdObj = document.getElementById(obj);
var pwd = new String(pwdObj.value);
if ((pwd.length > 20) || (pwd == " "))
{
alert("密码不符合规则：超过20字符或者为空！");
pwdObj.value = "";
isDataOK = false;
}
for (i=0;i<pwd.length;i++)
{
for(j=0;j<10;j++)
{
if(pwd.charAt(i) != j)
{
if(j==9)
{
alert("密码不符合规则：包含非数字字符！");
pwdObj.value = "";
isDataOK = false;
}
else
{
continue;
}
}
else
{
break;
}
}
}
isDataOK = true;
}
}
catch(e)
{
alert("对不起，有错误发生：" + e.description);
}
}
</script>
</head>
<body style = "position:relative; background-color: white">
<div style="border-right:sliver 1px solid border-top:sliver 1px solid;
border-left: sliver 1px solid;
width:330px;border-bottom:sliver 1px solid;height:137px;
background-color:ghostwhite;font-size:12px;font-style:normal;">
<form id="frmlogin" action="#" method="post"style="position:absolute;left:17px;top:22px;width:320px;height:104px;">
<span style="left:42px;position:absolute;top:23px;width:177px;">账号：<input id="username" style="height:13px;width:134px;" type="text" onchange="onChange(this.id)">
</span><br>
<span style="left:42px;position:absolute;top:50px;">密码：<input id="Password1" style="height:13px;width:134px;" type="text" onchange="onChange(this.id)">
</span><br>
<span style="position:absolute;left:225px;top:25px;width:38px;">
<input id="Reset1" type="reset" value="重设">
<input id="Submit1" type="submit" value="登录" onclick="return submit1_onclick()">
</span>
</form>
</div>
</body>
</html>
249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
