HTML,CSS,JS实例分析 - 好文

昨天我们大概只说了js的大体知识和语法，结构等基本内容，那么我们今天就来一起写一个具体例子帮助大家理解一下:
首先给大家补充一下昨天没有说的知识点。
js中的数列的定义以及使用方法：

* 创建一个固定长度的数组对象： var 数组名称=new Array(数组长度);（最常用的数组创建方式）
* 创建一个已知元素的数组对象： var 数组名称=new Array(元素，元素，元素...);
* 创建一个已知元素的数组对象： var 数组名称={元素，元素，元素...};
实例

今天我们来编写一个信息注册网页，用上以前的知识哦~（集合html，css，js的简单知识。主要以练习为主，所以就可能比较不美）要实现既有html，也有css，也有js。并且具有点击提交按钮即可在空白页显示出内容的功能。图片如下：

点击提交按钮后会出现如下效果：(前方高能！！）

那么我们来一步一步实现吧！

* 首先，我们需要用html编写一个静态的网页表格，代码如下： <!DOCTYPE html> <html> <head> <meta charset=
"UTF-8"> <title>信息注册表</title> </head> <body> <h1 align="center">请在下表填写您的信息</h1>
<hr/> <br/> <table border="1px" bordercolor="yellow" cellpadding="0px"
cellspacing="0px" align="center"> <tr> <td align="right">姓名</td> <td align
="left"><input type="text" /></td> </tr> <tr> <td align="right">性别</td> <
td> <label><input type="radio" name="gender" value="男"/>男<label> <label><input
type="radio" name="gender" value="女"/>女<label> <label><input type="radio" name=
"gender" value="其他"/>其他<label> </td> </tr> <tr> <td align="right">
注册密码</td> <td> <input type="password" /> </td> </tr> <tr> <td
align="right">爱好</td> <td> <label><input type="checkbox" name="hobby"
value="篮球" />篮球</label> <label><input type="checkbox" name="hobby" value="足球" />
足球</label> <label><input type="checkbox" name="hobby" value="乒乓球" />乒乓球</label>
</td> </tr> <tr> <td align="right">自我介绍 </td> <td> <
textarea rows="6" cols="50"></textarea> </td> </tr> <tr> <td colspan="2" align=
"center"> <input type="submit" value="提交" /> <input type="reset" value="重置"/> </
td> </tr> </table> </body> </html>
执行效果如下：

2.然后需要实现点击提交即可跳转页面显示信息的动态功能，代码如下：（此时要用 js 实现此功能）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>信息注册表</title> </
head> <body> <h1 align="center">请在下表填写您的信息</h1> <hr/> <br/> <table border="1px"
bordercolor="yellow" cellpadding="0px" cellspacing="0px" align="center"> <tr> <
td align="right">姓名</td> <td align="left"><input type="text" name="inps"
/></td> </tr> <tr> <td align="right">性别</td> <td> <label><input type=
"radio" name="gender" value="男"/>男<label> <label><input type="radio" name=
"gender" value="女"/>女<label> <label><input type="radio" name="gender" value="其他"
/>其他<label> </td> </tr> <tr> <td align="right">注册密码</td> <td>
<input type="password" name="inps" /> </td> </tr> <tr> <td align="right">
爱好</td> <td> <label><input type="checkbox" name="hobby" value="篮球" />篮球</
label> <label><input type="checkbox" name="hobby" value="足球" />足球</label> <label
><input type="checkbox" name="hobby" value="乒乓球" />乒乓球</label> </td> </tr> <tr>
<td align="right">自我介绍</td> <td> <textarea rows="6" cols="50"
name="inps"></textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input
type="submit" value="提交" onclick="Sub();"/> <! <input type="reset" value=
"重置"/> </td> </tr> </table> </body> <script type="text/javascript"> function Sub
(){ var inputs=document.getElementsByName("inps"); //获取name名字为inps的组件形成数组
inputs(注意是数组,像getElementById获取id就是单个组件) //由于姓名,密码,自我介绍直接获取到的value值就是所要的输出值
//所以通过给这三个标签添加相同的name属性来统一获取(上面对应标签添加name值相同) var input1=inputs[0].value; var
input2=inputs[1].value; var input3=inputs[2].value; //将数组中各个组件的value值赋予不同变量
//单选由于value值虽然可以获取,但是无法确定用户的选择.所以需要进行判断.下面是实现单选框判定的方法: var
genderInput=document.getElementsByName("gender"); var gender="";
//此处初始化定义空字符类型变量gender for(var i=0;i<genderInput.length;i++)
//通过判断性别是否被选中来确定要获取哪个value值 { if(genderInput[i].checked==1)
//checked可以用来判断genderInput[i]是否被选中并返回布尔类型值 //1和0可以表示布尔类型的true和fales {
gender=genderInput[i].value;//将要输出的结果“男，女，其他”赋予字符类型变量gender break; } }
//多选框和单选框问题一样,只是可以进行多选而已.下面是进行多选的框判断的方法: var
hobbyInput=document.getElementsByName("hobby"); var hobby=""; //此处初始化定义空字符类型变量
for(var i=0;i<hobbyInput.length;i++)//通过判别是否被选中来确定要获取哪个组件value值 { if
(hobbyInput[i].checked==1)//同上 { hobby+=hobbyInput[i].value+"  "
//+=就是hobby=hobby+hobbyInput[i].value+"  " } } document.write("请核对您的信息:"
+"<br/>姓名："+input1+"<br/>性别:"+gender +"<br/>注册密码:"
+input2+"<br/>爱好:"+hobby +"<br/>自我介绍:"+input3);
//文本输出结果. //一定注意输出结果的时候不能在执行代码中间输出,也就是document.write不能在代码中出现
//否则执行到代码中的document.write会直接跳转界面,后面的输出内容就无法在跳转界面显示 } </script> </html>
详细分析已经在代码中注释。要沉下心来看哦~结果执行如下:

点击提交按钮，结果如下：

功能就完成了。但是页面是不是依旧不堪入目呢？那么我们进入第3步用CSS优化页面静态效果。

3.用CSS静态修饰网页效果：（你所掌握的CSS代码越多越深做出来的越好看哦~，我在这里简单的做一些css的实例，咱们主要学习思路哦~）代码如下：

将css代码引入到 html文件，此时代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>信息注册表</title> <link
rel="stylesheet" href="css/jshomeworkcss.css" /> </head> <body id="bgcolor"> <h1
align="center" class="sizec">请在下表填写您的信息</h1> <hr/> <br/> <table border="1px"
bordercolor="yellow" cellpadding="0px" cellspacing="0px" align="center"> <tr> <
td align="right" class="sizec">姓名</td> <td align="left"><input type="text"
name="inps" class="border" /></td> </tr> <tr> <td align="right" class="sizec">
性别</td> <td> <label><input type="radio" name="gender" value="男" /><span
class="sizec">男</span><label> <label><input type="radio" name="gender" value="女"
/><span class="sizec">女</span><label> <label><input type="radio" name="gender"
value="其他"/><span class="sizec">其他</span><label> </td> </tr> <tr> <td align=
"right" class="sizec">注册密码</td> <td> <input type="password"
name="inps" /> </td> </tr> <tr> <td align="right" class="sizec">爱好</td> <
td> <label><input type="checkbox" name="hobby" value="篮球" /> <span class="sizec"
>篮球</span> </label> <label><input type="checkbox" name="hobby" value="足球" /> <
span class="sizec">足球</span> </label> <label><input type="checkbox" name="hobby"
value="乒乓球" /> <span class="sizec">乒乓球</span> </label> <label><input type=
"checkbox" name="hobby" value="其他" /> <span class="sizec">其他</span> </label> </
td> </tr> <tr> <td align="right" class="sizec">自我介绍</td> <td>
<textarea rows="6" cols="50" name="inps"></textarea> </td> </tr> <tr> <td
colspan="2" align="center"> <input type="submit" value="提交" onclick="Sub();"/> <
! <input type="reset" value="重置"/> </td> </tr> </table> </body> <script type=
"text/javascript"> function Sub(){ var inputs=document.getElementsByName("inps"
);//获取name名字为inps的组件形成数组 inputs(注意是数组,像getElementById获取id就是单个组件)
//由于姓名,密码,自我介绍直接获取到的value值就是所要的输出值 //所以通过给这三个标签添加相同的name属性来统一获取(上面对应标签添加name值相同)
var input1=inputs[0].value; var input2=inputs[1].value; var input3=inputs[2
].value;//将数组中各个组件的value值赋予不同变量
//单选由于value值虽然可以获取,但是无法确定用户的选择.所以需要进行判断.下面是实现单选框判定的方法: var
genderInput=document.getElementsByName("gender"); var gender="";
//此处初始化定义空字符类型变量gender for(var i=0;i<genderInput.length;i++)
//通过判断性别是否被选中来确定要获取哪个value值 { if(genderInput[i].checked==1)
//checked可以用来判断genderInput[i]是否被选中并返回布尔类型值 //1和0可以表示布尔类型的true和fales {
gender=genderInput[i].value;//将要输出的结果“男，女，其他”赋予字符类型变量gender break; } }
//多选框和单选框问题一样,只是可以进行多选而已.下面是进行多选的框判断的方法: var
hobbyInput=document.getElementsByName("hobby"); var hobby=""; //此处初始化定义空字符类型变量
for(var i=0;i<hobbyInput.length;i++)//通过判别是否被选中来确定要获取哪个组件value值 { if
(hobbyInput[i].checked==1)//同上 { hobby+=hobbyInput[i].value+"  "
//+=就是hobby=hobby+hobbyInput[i].value+"  " } } document.write("请核对您的信息:"
+"<br/>姓名："+input1+"<br/>性别:"+gender +"<br/>注册密码:"
+input2+"<br/>爱好:"+hobby +"<br/>自我介绍:"+input3);
//文本输出结果. //一定注意输出结果的时候不能在执行代码中间输出,也就是document.write不能在代码中出现
//否则执行到代码中的document.write会直接跳转界面,后面的输出内容就无法在跳转界面显示 } </script> </html>
注意在document.write中是可以写html标签的，但是要在"" 中写代码。
最终结果执行如下：
填写表格：

点击提交按钮后：

好啦，虽然说我做的比较丑。但是我相信只要用心去做，就一定可以做好的。当然，干咱们这一行的不能光用心哦~实际敲代码动手操作才是最重要的哈，那么。。。明天见喽~

热门工具换一换