| 1、设计如图1-1所示的界面，要求当网络访问者选择字号中的【大、中、小】时能实现页面字号大小变化，选择“中”时，页面效果如图1所示。
图1 单击前初始状态页面
图2 单击“中”链接后页面 2、div中内容如下： JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。 3、Style对象的属性。 可通过HTML DOM Style 对象网页查看。 二、消息对话框综合应用 设计一个消息对话框综合应用，页面效果如图3-图6所示。
图3 消息对话框初始页面
图4 点击“输入姓名”后的页面 图5 提示框信息
图6 告警消息对话框页面 三、编写JavaScript程序实现简易密码验证，页面布局如图7所示：
图7简易密码验证对话框 要求：定义函数checkKey(),函数的功能是判断密码输入框输入的密码长度是否大于或者等于8，密码支付中是否含一个及以上个字母，若不符合要求则提示告警信息分别为“密码长度必须大于等于8！，请重输”，“密码中必须包含一个或者以上字母！，请重输”，单机告警框中的“确认”按钮，将原密码框内容清空。 1. |
| <script type="text/javascript"> //定义设置字体大小函数 function $(id){return document.getElementById(id);} function setFont(size){ $("content").style.fontSize=size; } </script> 使用document.getElementById(id)函数和ID定义设置字体大小函数。 <div id="div1">选择字号【 <a href="#" onclick="setFont('12px');">小</a> <a href="#" onclick="setFont('18px');">中</a> <a href="#" onclick="setFont('24px');">大</a>】 </div> 利用超链接和设置字体大小函数完成改变新闻网页中的字号的要求。 2. <script> function mj(id) { var n=prompt("输入你的姓名："); if(n!=null&&n!=""){ alert("你的姓名是："+n); document.getElementById(id).value=n; } else alert("请你输入姓名！"); }
</script> <form> <fieldset> <legend>消息对话框综合应用</legend><br> <span> 姓名：<br></span><br> <span><input type="text" id="look" readonly="readonly"></span><br><br><br> <p align="center"><input type="button" name="button" value="输入姓名" onclick="mj('look')"> <input type="reset" name="reset" value="清空" ></p> </fieldset> </form> 使用document.getElementById(id)函数和ID加js 变量完成动态变化表单数值的效果。 3. <script> function $(id){return document.getElementById(id);} function submittext(){ var n=$("input1").value; if(n.length>=8){ var x1=/^[0-9a-zA-Z]+$/; var x2=/^[0-9]+$/; if(!x2.test(n)) { if(!x1.test(n)) { alert("密码至少包括一个字母！请重新输入！"); $("input1").value=""; } else alert("输入成功！"); } else { alert("密码至少包括一个字母！请重新输入！"); $("input1").value=""; } } else{ alert("密码必须大于等于8！"); $("input1").value=""; } } </script> 借用正则表达式的test函数使用3层if判断 实现简易密码验证的要求。 |
|
图1
图2
图3
图4
图5
图6
图7
图8 |
- 1.
<!-- prj_9_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 改变新闻网页中字号 </title>
<style type="text/css">
#div1{text-align:center;font-size:16px;} /*定义图层样式*/
#content{
font-size:12px;line-height:2em;padding:10px;
background:#c0c0c0;color:black;border:2px groove #FCFF57;}
p{text-indent:2em;} /*定义段落样式*/
</style>
<script type="text/javascript">
//定义设置字体大小函数
function $(id){return document.getElementById(id);}
function setFont(size){
$("content").style.fontSize=size;
}
</script>
</head>
<body>
<h2 align="center">用JavaScript改变新闻网页中字号</h2>
<div id="div1">选择字号【 <a href="#" onclick="setFont('12px');">小</a>
<a href="#" onclick="setFont('18px');">中</a>
<a href="#" onclick="setFont('24px');">大</a>】
</div>
<div id="content">
<p>JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。</p>
</div>
</body>
</htmL>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
legend{text-align: center;}
fieldset{border-color: blue;b
