javascript入门笔记(五)

wanyin940

浏览: 28343 次
性别:
来自: 武汉

最近访客更多访客>>

sunblessed

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript HTML Go 浏览器

第六课：通过表单发送和接受信息

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.

可以将window.document.the_form换成this。

3. 将下拉菜单作为导航菜单：

<html>
<head>
<title>A Pull-Down Menu for Navigation</title>

</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>

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;
}

// 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>

分享到：

javascript入门笔记(六) | javascript入门笔记(四)

2009-04-08 22:49
浏览 830
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论