点个赞再走叭~
设计要求 :
编写一个html文件的网页代码,页面包含一个下拉列表框、一个文本框和一个按钮(如图4.1所示),下拉列表框选择要去的网站,当选择完毕后文本框中出现对应的网址(如图4.2所示)。点击确认跳转按钮后访问文本框中出现的网址。
源代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳转网址</title>
<script type="text/javascript">
function TxtToChange() {
var url = document.getElementById("_url").value;
switch (url) {
case "https://www.baidu.com/":
document.getElementById("txt").value = url;
break;
case "http://www.sosoapi.com/":
document.getElementById("txt").value = url;
break;
case "https://www.csdn.net/":
document.getElementById("txt").value = url;
break;
}
}
function GoToUrl(){
location = document.getElementById("txt").value;
}
</script>
</head>
<body>
<form>
<select id="_url" onchange="TxtToChange()">
<option selected="selected">请选择</option>
<option value="https://www.baidu.com/">百度</option>
<option value="http://www.sosoapi.com/">sosoApi</option>
<option value="https://www.csdn.net/">CSDN</option>
</select>
<input type="text" id="txt" />
<input type="button" value="确认跳转" onclick="GoToUrl()">
</form>
</body>
</html>
运行结果 :
实验拓展 :
onclick
and onsubmit
onsubmit
只能表单上使用,提交表单前会触发, onclick
是按钮等控件使用, 用来触发点击事件。
实现代码 :(源自https://www.cnblogs.com/min-yu/p/11187485.html
, 侵删)
onsubmit :
<script language="javascript">
function CheckPost ()
{
if (addForm.user.value == "")
{
alert("请填写用户名!");
addForm.username.focus();
return false;
}
if (addForm.title.value.length < 5)
{
alert("标题不能少于5个字符!");
addForm.title.focus();
return false;
}
return true;
}
</script>
<form action="test.php" method="post" name="addForm" onsubmit="return CheckPost();">
<div>用户:<input type="text" size="10" name="user" maxlength="20"/></div>
<div>标题:<input type="text" name="title" maxlength="50"/></div>
<div>内容:<textarea name="content" rows="8" cols="30"></textarea></div>
<div>
<input type="submit" name="submit" value="发表留言"/>
</div>
</form>
onclick :
<script language="javascript">
function SendForm ()
{
if(CheckPost())
{
document.addForm.submit();
}
}
function CheckPost ()
{
if (addForm.user.value == "")
{
alert("请填写用户名!");
addForm.username.focus();
return false;
}
if (addForm.title.value.length < 5)
{
alert("标题不能少于5个字符!");
addForm.title.focus();
return false;
}
return true;
}
</script>
<form action="test.php" method="post" name="addForm">
<div>用户:<input type="text" size="10" name="user" maxlength="20"/></div>
<div>标题:<input type="text" name="title" maxlength="50"/></div>
<div>内容:<textarea name="content" rows="8" cols="30"></textarea></div>
<div><input type="button" name="submit" value="发表留言" onclick="SendForm();"/></div>
</form>