HTML5+CSS3+JavaScript从入门到精通-17
原创HTML5+CSS3+JavaScript从入门到精通-17
原创
qiqi_fu
发布于 2021-12-06 15:14:52
发布于 2021-12-06 15:14:52
HTML5+CSS3+JavaScript从入门到精通
17-01 用户登录界面！
<!--web17-01-->
<!--
与第四章的表单呼应
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录界面！</title>
<script type="text/javascript">
function alert_info()
{
//window.alert：windows的提示对话框
//浏览器提供的forms数组，保存表单对象; 也可通过表单名来调用
//document.form_nam.elements[] 也可访问表单元素的值
window.alert("提交信息如下：\n" + "用户名：" + document.forms[0].myname.value + "\n密码：" + document.myf.pwd.value);
}
</script>
</head>
<body >
<h2 align="center">用户登录界面</h2>
<hr /><br /><br />
<form method="post" name="myf" onsubmit="alert_info()"><!--添加表单名name和提交表单事件onsubmit-->
<p align="center">用 户 名：  <input type="text" name="myname" /></p>
<p align="center"> 密    码：  <input type="password" name="pwd" maxlength="12" /></p>
<p align="center">
<input type="submit" name="b1" value="提交" />
    
<input type="reset" name="b2" value="重置" />
</p>
</form>
</body>
</html>
<!--
表单<form>: name, method(post-数据量大速度慢/get-数据量小速度快), action
文本框控件<input>:
type(text-单行文本框，password-密码文本框, submit-提交，reset-重置，button-按钮)
size-框宽度, maxlength-内容最大长度
value-默认值，name-提交表单时上传的参数名
<form> 提交method默认为get，内容可以在地址栏看到，不安全。故一般设置method=post
-->
17-02 个人信息统计
<!DOCTYPE html>
<!--web17-02-->
<html>
<head>
<meta charset="utf-8" />
<title>个人信息统计</title>
<script type="text/javascript">
function myShow() {
var text = "";
if (document.myform.cb1.checked)
{ text = text + document.myform.cb1.value + " "; }
if (document.myform.cb2.checked)
{ text = text + document.myform.cb2.value + " "; }
if (document.myform.cb3.checked)
{ text = text + document.myform.cb3.value + " "; }
if (document.myform.cb4.checked)
{ text = text + document.myform.cb4.value + " "; }
window.alert("提交信息如下：\n用户名：" + document.myform.myname.value + "\n性别：" + document.myform.mysex.value + "\n爱好：" + text);
}
</script>
</head>
<body>
<h2 align="center">个人信息统计</h2>
<hr />
<table align="center" cellspacing="20">
<form method="post" name="myform" onsubmit="myShow()">
<tr>
<td>用 户 名：</td>
<td align="center">
<input type="text" name="myname" size="10" />
</td>
</tr>
<tr>
<td> 性     别：</td>
<td align="center">
<input type="radio" name="mysex" value="男" />男
<input type="radio" name="mysex" value="女" />女
</td>
</tr>
<tr>
<td>爱     好</td>
<td>
<input type="checkbox" name="cb1" value="足球" checked/>足球
<input type="checkbox" name="cb2" value="篮球" />篮球
<br />
<input type="checkbox" name="cb3" value="计算机" />计算机
<input type="checkbox" name="cb4" value="看书" />看书
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="b1" value="submit"/>
    
<input type="reset" name="b2" value="reset" />
</td>
</tr>
</form>
</table>
</body>
</html>
<!--利用表格table进行页面布局-->
17-03 下拉列表框控件和datalist控件
<!DOCTYPE html>
<!--web17-03-->
<html>
<head>
<meta charset="utf-8" />
<title>下拉列表框控件和datalist控件</title>
<script type="text/javascript">
function myshow()
{
window.alert("提交信息如下：\n你所在的城市：" + document.myf.select.value + "\n你喜欢的编程语言：" + document.myf.myt.value);
}
</script>
</head>
<body>
<h1 align="center">下拉列表框控件和datalist控件</h1>
<hr />
<form method="post" name="myf" onsubmit="myshow()">
<p align="center">请选择你所在的城市：
<select name="select">
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
<option value="济南">济南</option>
<option value="山东">山东</option>
</select>
</p>
<p align="center">请输入或选择你喜欢的编程语言：
<input type="text" list="myl" name="myt" />
<datalist id="myl">
<option value="C"></option>
<option value="C++"></option>
<option value="Java"></option>
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JavaScript"></option>
</datalist>
</p>
<p align="center">
<input type="submit" name="b1" value="submit" />    <input type="reset" name="b2" value="reset" />
</p>
</form>
</body>
</html>
<!--
下拉列表框 <select> 配合 option
datalist 需要与文本框一起使用<datalist> 在input下，有id，配合 option
-->
17-04 电子邮箱控件和图像提交按钮
<!DOCTYPE html>
<!--web17-04-->
<html>
<head>
<meta charset="utf-8" />
<title>电子邮箱控件和图像提交按钮</title>
<script type="text/javascript">
function myshow()
{
var address = document.myemail.mye.value;
if ((address == "") || (address.indexOf("@") == -1) || (address.indexOf(".") == -1)) {
window.alert("电子邮件地址不正确，请重新输入！");
}
else
{
window.alert("电子邮件：" + document.myemail.mye.value);
}
}
</script>
</head>
<body>
<h2 align="center">电子邮箱控件和图像提交按钮</h2>
<hr />
<form method="post" name="myemail"> <!--如果没有form, 下面图像提交按钮点击没有反应-->
<p align="center">
电子邮件：<input type="email" name="mye" required/><!--required表示不能为空-->
</p>
<p align="center">
<!--该提交按钮是一个普通图像，所以不能在form添加onsubmit事件，要在图像中添加-->
<input type="image" src="b1.png" name="b1" onclick="myshow()"/>
</p>
</form>
</body>
</html>
17-05 利用JavaScript改变网页的背景色
<!DOCTYPE html>
<!--web17-05-->
<html>
<head>
<meta charset="utf-8" />
<title>利用JavaScript改变网页的背景色</title>
<script type="text/javascript">
function bgc(myc)
{
document.bgColor = myc;
}
</script>
</head>
<body>
<h3 align="center">利用JavaScript改变网页的背景色</h3>
<hr />
<form>
利用JavaScript改变网页的背景色<br><br>
<input type="button" value="红色" onclick = "bgc('red')" />
<input type="button" value="黄色" onclick = "bgc('yellow')" />
<input type="button" value="绿色" onclick = "bgc('green')" />
<input type="button" value="重置" onclick = "bgc('white')" />
</form>
</body>
</html>
17-06 利用JavaScript实现文本框的智能输入
<!DOCTYPE html>
<!--web17-06-->
<html>
<head>
<meta charset="utf-8" />
<title>利用JavaScript实现文本框的智能输入</title>
<script type="text/javascript">
function myup()
{
document.myf.myt2.value = document.myf.myt1.value.toUpperCase();
}
</script>
</head>
<body>
<h3 align="center">利用JavaScript实现文本框的智能输入</h3>
<hr />
<form name="myf">
<!--下面myup函数的引用，要记得加括号-->
   请输入小写字母：<input type="text" value="" name="myt1" size="30" onchange="myup()" /><br />
智能显示大写字母：<input type="text" value="" name="myt2" size="30" />
</form>
</body>
</html>
17-07 用户名和密码存储到cookie中
<!DOCTYPE html>
<!--web17-07-->
<!--
cookie的属性：
name - 必选属性, encodeURI,将字符串进行URI进行编码；
expires - 可在浏览器之外维持cookie，可使用getDate()和setDate()来辅助设置；toUTCString()将时间转换为格林尼治时间；
path - 决定cookie对于服务器上哪些页面可以使用。eg:path=d:/www
domain - 决定cookie在一个域名中多个服务器共享；eg:domain=.js.com;
secure - 为true表示只能使用https或其他安全协议的安全Internet连接来传输；
-->
<html>
<head>
<meta charset="utf-8" />
<title>用户名和密码存储到cookie中</title>
<script type="text/javascript">
function mycheck()
{
var time = new Date();
time.setDate(time.getDate() + 30);
if (document.myf.myname.value != "" && document.myf.mypwd.value != "")
{
document.cookie = encodeURI("user=" + document.myf.myname.value) + ";expires=" + time.toUTCString();
document.cookie = encodeURI("pass" + document.myf.mypwd.value) + ";expires=" + time.toUTCString();
window.alert("用户名和密码存储到cookie中！");
}
else
{
window.alert("没有输入用户名和密码！");
}
}
</script>
</head>
<body>
<h3 align="center">用户名和密码存储到cookie中</h3>
<hr />
<form name="myf" method="post" onsubmit="mycheck()">
姓名：<input type="text" value="" name="myname" /><br />
密码：<input type="password" value="" name="mypwd" /><br /><br />
    <input type="submit" name="b1" />
    <input type="reset" name="b2" />
</form>
</body>
</html>
17-08 cookie的读取
<!DOCTYPE html>
<!--web17-08-->
<!--
若存储时进行了encodeURI()，则使用时要用decodeURI()解析；
cookie中各参数之间使用分号(;)和空格进行连接，可使用split()将每个属性值分离，存储到数组中；
-->
<html>
<head>
<meta charset="utf-8" />
<title>cookie的读取</title>
</head>
<body>
<h3 align="center">cookie的读取</h3>
<hr />
<script type="text/javascript">
//该html用google显示不出，用IE可看到结果
document.cookie = encodeURI("username=admin");
document.cookie = encodeURI("userpwd=qd123456");
var d = new Date();
d.setTime(d.getTime() + 15);
var expires = "expires=" + d.toGMTString();
document.cookie = encodeURI(expires);
document.cookie = encodeURI("domain=.js.com");
document.cookie = encodeURI("path=d:www");
var myc = decodeURI(document.cookie);
document.write(myc + "<hr>");//显示cookie的内容
document.write("利用for循环分别显示cookie各属性值：<br>");
var arr = myc.split(";");
for (i = 0; i < arr.length; i++)
{
document.write(arr[i] + "<br>");
}
</script>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读