第六课：通过表单发送和接受信息
1.小例子：两个文本框的值相乘，结果出现在第三个文本框中：
<html>
<head>
<title>A Very Simple Calculator</title>
<script type = "text/javascript">
function multiplyTheFields()
{
var number_one = window.document.the_form.field_one.value;
var number_two = window.document.the_form.field_two.value;
var product = number_one * number_two;
window.document.the_form.the_answer.value = product;
}
</script>
</head>
<body>
<form name = "the_form">
Number 1: <input type = "text" name = "field_one"/> <br/>
Number 2: <input type = "text" name = "field_two"/> <br/>
The Product: <input type = "text" name = "the_answer"/> <br/>
<a href = "#" onClick = "multiplyTheFields(); return false;">Multiply them!</a>
</form>
</body>
</html>
2. 不同表单原色可以处理的事件：
按钮 onClick 鼠标单击
复选框 onClick 鼠标单击
单选按钮 onClick 鼠标单击
文本框 onChange 修改文本框内容，然后单击文本框外部
文本区 onChange 修改文本区的内容，然后单击文本区外部
下拉菜单或选择列表 onChange 改变了下拉菜单或选择列表中的选项
表单 onSubmit 在某个文本框中按回车键或者单击
小例子：带onSubmit按钮浏览器跳转：
<html>
<head>
<title>A Simple Browser</title>
</head>
<body>
Type a URL and then either click the submit button or just press ENTER.
<form name = "the_form" onSubmit = "window.location = window.document.the_form.the_url.value; return false;">
<input type = "text" name = "the_url" value = "http://" />
<input type = "submit" value = "Go there!" />
</form>
</body>
</html>
可以将window.document.the_form换成this。
3. 将下拉菜单作为导航菜单：
<html>
<head>
<title>A Pull-Down Menu for Navigation</title>
<script type = "text/javascript">
function visitSite(the_site)
{
window.location = the_site;
}
</script>
</head>
<body>
<h1>Use the pull-down menu to choose where you want to go</h1>
<form name = "the_form">
<select name = "the_select" onChange = "visitSite(this.options[this.selectedIndex].value);">
<option value = "http://www.nostarch.com/">No Starch Press</option>
<option value = "http://www.nytimes.com/">The New York Times</option>
<option value = "http://www.theonion.com/">The Onion</option>
</select>
</body>
</html>
4.任何HTML元素都可以带有id属性，可以用document.getElementById("xxxx")来找到那个元素。
5.简单各地时钟显示：
<html><head><title>Chapter 7 Assignment</title>
<script type="text/javascript">
<!-- hide me from older browsers
function updateReadout(the_zone)
{
// get the current UTC time
//
var now = new Date();
var the_hours = now.getUTCHours();
var the_minutes = now.getUTCMinutes();
var the_seconds = now.getUTCSeconds();
// adjust for selected time zone
//
if (the_zone == "newyork")
{
the_hours = the_hours - 4;
} else if (the_zone == "sanfran") {
the_hours = the_hours - 7;
} else if (the_zone == "tokyo") {
the_hours = the_hours + 9;
}
// now fix the hours if over 24 or under 0
//
if (the_hours < 0)
{
the_hours = the_hours + 24;
} else if (the_hours > 24) {
the_hours = the_hours - 24;
}
// put zeros in front of minutes and seconds if necessary
the_minutes = formatTime(the_minutes);
the_seconds = formatTime(the_seconds);
// now put the time in the text box
var the_time = the_hours + ":" + the_minutes + ":" + the_seconds;
window.document.clock_form.readout.value = the_time;
}
function formatTime(the_time)
{
if (the_time < 10) {
the_time = "0" + the_time;
}
return the_time;
}
function updateClock()
{
var selected_zone = "";
for (var loop=0; loop < window.document.clock_form.zones.length; loop++)
{
if (window.document.clock_form.zones[loop].checked == true)
{
selected_zone = window.document.clock_form.zones[loop].value;
}
}
updateReadout(selected_zone);
}
// show me -->
</script>
</head>
<body>
<form name="clock_form">
<input type="text" name = "readout"/>
<input type="button" value="update" onClick="updateClock();"/><br/>
San Francisco <input type="radio" name = "zones" value = "sanfran" onClick="updateReadout('sanfran');"/><br/>
New York <input type="radio" name = "zones" value = "newyork" onClick="updateReadout('newyork');"/><br/>
London <input type="radio" name = "zones" value = "london" onClick="updateReadout('london');"/><br/>
Tokyo <input type="radio" name = "zones" value = "tokyo" onClick="updateReadout('tokyo');"/><br/>
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
