20131030关于个人的js脚本作业

最新推荐文章于 2024-06-26 00:04:53 发布

SL转角

最新推荐文章于 2024-06-26 00:04:53 发布

阅读量604

点赞数

CC 4.0 BY-SA版权

文章标签： switch if.else

本文链接：https://blog.youkuaiyun.com/sl0117/article/details/13774679

本文介绍了一个简单的JavaScript示例，展示了数组、条件语句及事件处理等基本概念，并讨论了不同DOM方法的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="if,switch,数组" />
<title>20131031关于个人JS作业</title>
<script type="text/javascript">
//<![CDATA[
var num1 = []
num1[0]="1";
num1[1]="2";
num1[2]="3";
var num2 = new Array("1","2","3");
var randomnum = Math.round(Math.random()*2);
var numa = 1;
var numb = 0;
if(numb != 0){document.write(numa/numb + "</br>");}
else alert("numb=0");
document.write(num1[0] + "  "+ num1[1] + "  "+ num1[2]);
document.write("</br>");
document.write("下面显示的结果为if..else的显示结果，按F5刷新页面可以检查输出的变化效果：" + "</br>");
if(randomnum == 0){document.write("这是" + num1[randomnum]);}
else if(randomnum == 1){document.write("这是" + num1[randomnum]);}
else{document.write("这是" + num1[randomnum]);}
document.write("</br>");
document.write("下面显示的结果为switch的显示结果，按F5刷新页面可以检查输出的变化效果：" + "</br>");
switch(randomnum+1){
case 1:document.write("这是" + num2[randomnum]);break;
case 2:document.write("这是" + num2[randomnum]);break;
case 3:document.write("这是" + num2[randomnum]);break;
default:document.write("出错了！");
}
//]]>
</script>
</head>
<body>
<form method="get" action="">
a:<input type="text" name="a" id="a" />
b:<input type="text" name="b" id="b" />
<input type="submit" value="提交" onclick="checkChange();" />
</form>
<script type="text/javascript">
//<![CDATA[
function checkChange(){
var a = document.getElementById("a");
var b = document.getElementsByName("b");
var c = a.value / b[0].value;
if(a.value == "" || b[0].value == ""){alert("出错了！输入不能为空。")}
else if(b[0].value == 0){alert("出错了！b不能为0。");}
else {alert(a.value + "/" + b[0].value + "=" + c);}
}
//]]>
</script>
</body>
</html>

显示结果如下：

首先会弹出个对话框如下：

点击确定后显示如下：

最后针对两个文本框输入内容并计算的不同结果显示如下：

关于文本框中的内容获取，期间还遇过一些疑惑，getElementsByName()和getElementsByTagName()之间的用法的混淆，getElementsByName()是通过<input>标签中name属性值，查询并锁定，返回带有指定名称的对象集合。getElementsByTagName()是通过<input>这样的标签来获取信息的，返回带有指定标签名的对象集合。还有一个常用的getelementById()，它是通过标签中的ID值来获取信息的，返回对拥有指定 id 的第一个对象的引用。值得注意的是，这些document对象方法获取的是一个集合。要想获取到这个文本框中的内容还需要你从这些对象集合中把这些要的值拿出来，针对本次的作业内容，通过document.getElementById().value和document.getElementsByName()[0].value均可以获取文本框中的内容。