form | 作用 |
---|---|
button | 按钮 |
checkbox | 多选 |
radio | 单选 |
reset | 将这个页面所有互动过的部品重置 |
submit | 提交 |
text | 文本条?? |
hidden | |
passwd | 密码 |
textarea | |
select | 选项(伴随option使用) |
举个例子
<body> <form name="weightForm"> 男性:<input type="radio" name="sex" checked>//checked是默认选中之意。 女性:<input type="radio" name="sex"><br> 身高:<input type="text" name="height">cm<br> <input type="button" value="计算" name="calc"><br> 标准体重: <input type="text" name="weight" readonly>//readonly是只读之意,意味着这个文本框只能用来显示。 </form> </body>
例如,document.weightForm.height.value 这样就指定了身高这个值。
document.form名.radio名[序号].checked
<script> var weight; if(document.weightForm.sex[0].checked){//[]内的数字是第几个的意思,0是第一个。 weight = (height - 80)*0.7; }else{ weight = (height-70)*0.6; } </script>
结合起来的一个小程序:
<head> <script> function stdWeight(){ var height,weight; height = Number(document.weightForm.height.value); //把“height输入框内的值数字化。” if(document.weightForm.sex[0].checked){//[]内的数字是第几个的意思,0是第一个。 weight = (height - 80)*0.7; }else{ weight = (height-70)*0.6; } document.weightForm.weight.value = weight; } </script> </head>
<body> <form name="weightForm"> 男性:<input type="radio" name="sex" checked>//checked是默认选中之意。 女性:<input type="radio" name="sex"><br> 身高:<input type="text" name="height">cm<br> <input type="button" value="计算" name="calc" onclick="stdWeight()"><br>//点击时启用这个函数。 标准体重: <input type="text" name="weight" readonly> </form> </body>
于是上一个小程序可以写为:
<script> function stdWeight(myForm){//这个函数的自变量是一个form。 var height,weight; height = Number(myForm.height.value); if(myForm.sex[0].checked){ weight = (height - 80)*0.7; }else{ weight = (height-70)*0.6; } myForm.weight.value = weight; } </script>
<input type="button" value="计算" name="calc" onclick="stdWeight(this.form)"><br>
具体体现在:document.weightForm --> this.form/myForm
是window对象的方法
在指定的时间后执行处理(仅一次)
<script> var timer; timer = window.setTimeout("alert('5秒了')",5000)//毫秒为单位 </script>
以上程序的结果是:五秒后弹出一个窗口。
用递归可以完成一些关于时间的操作,例如:实时显示时间。
<script> var timer; var i; window.onload = dClock;//用于开幕雷击 function dClock(){ var now = new Date(); var sec = now.getSeconds(); if(sec < 10){ sec += "0"; } document.clockForm.sec.value = sec;//赋值给部件,让它显示。 timer = setTimeout("dClock()",1000);//再执行一遍自己咯 } </script>
<body> <form name="clockForm"> <input type="text" name="sec" size="2">秒 </form> </body>
这样就能实时显示秒。
<script> var timer; var i = 0; window.onload = dClock; function dClock(){ i++; document.clockForm.sec.value = i; timer = setTimeout("dClock()",1000); } </script>
<body> <form name="clockForm"> 经过 <input type="text" name="sec" size="2">秒 </form> </body>
每过一秒,i++并且再运行自己一次。
function stopClock(){ clearTimeout(timer); }
<input type="button" name="stop" onclick="stopClock();">
<script> var timer; var i = 0; window.onload = dClock; function dClock(){ i = Math.floor(Math.random()*100); //给i赋值一个随机数 document.clockForm.sec.value = i; //让name为sec的text部品的值为i。 timer = setTimeout("dClock()",10); //每10毫秒递归一次。 } function stopClock(){ clearTimeout(timer);//给按钮用的,就是暂停上个函数的setTimeout。 } </script>
<body> <form name="clockForm"> <input type="text" name="sec" size="2"> <input type="button" name="stop" value="暂停" onclick="stopClock();"> </form> </body>
<img src="1.jpg" alt="jaha" name="cat" height="300" onclick="changeImg()"> src:存储图片路径 name:此图片的name属性 height:高度 alt:在图片丢失时以文字替代。 onclick:事件,即点击此图片后可以运行一个程序。
<script> var num = 1; function changeImg(){ document.cat.src = num + ".jpg";//此处是更改name为cat那个图片的scr属性。当num不同时,自然指定了不同的图片。 num++; if(num == 3) num = 1; } </script>
如何在不刷新网页的情况下改变已有的html元素(文字,图片等)?
<p id="msg"> 小梦酱今天的枪信佛吗 </p>
相当于给p中的信息附上了一个id,叫做msg。
var msg = document.getElementById("msg");
捕捉id为msg的html元素,并赋值给msg变量。
msg.innerHTML = "不行,小梦酱,<span style='color:red'>该图图辣!!!</span>";
结合以上三个知识,我们给出最终的程序:
<script> function lick(){ var msg = document.getElementById("msg"); msg.innerHTML = "不行,小梦酱,<span style='color:red'>该图图辣!!!</span>"; } </script>
<body> <p id="msg">小梦酱今天的枪信佛吗 </p> <button onclick="lick()">不行</button> </body>
此程序的效果为:点击一下button,上面的文字将被替换。
以下操作:
var msg = document.getElementById("msg"); msg.style.textAlign = "center";
执行完毕后,id为msg的html元素的style将会改变。
visibility有两个值:visible与hidden,效果是显示与隐藏。