admin管理员组文章数量:1794759
JavaWeb页面设计
第一章 HTML常用设置 1.1.html：html、标题标签、特殊符号、水平线标签、文字标记、图片标签等解析。
<!DOCTYPE html> <html> <!-- html标签 整个文本的跟标签 有且只有一对 ctrl+shift+/ 快速注释 快捷键 注释标签的内容 浏览器不会解析 --> <head> <meta charset="UTF-8"> <!--文本的 字符编码 --> <title>html的文本标签</title> <!-- 网页标签--> </head> <body> <!--标题标签 1-6 字号 从大到小 加粗 自动换行 --> <h1>一级标题标签</h1> <h2>二级标题标签</h2> <h3>三级标题标签</h3> <h4>四级标题标签</h4> <h6>六级标题标签</h6> <h2>特殊符号</h2> 大于号： > <br /> 小于号： < <br /> 版权符号:© <br /> 商品符号:® <br /> 引号: " <br /> 空 格： <br /> 换行标签: <br / > <h2>水平线标签</h2> <hr /> <hr color="red" /> <hr color="pink" width="40%" /> <hr color="blue" width="50%" size="10px" /> <h2>文字标记</h2> <s>中关村软件园</s> <b>软件开发</b> <i>训练营</i><u>欢迎您！</u> <!--s标签： 删除线 b: 加粗 i: 斜体 u: 下划线--> <h2>图片标签</h2> <img src="../img/123.jpg" alt="跑车" width="200px" height="100px" /> <!--src: 图片的路径 px: 像素值 width: 宽度 height: 高度 alt: 图片无法显示后 显示的内容文字--> </body> </html>展示效果如下：title标签展示的内容，目录和效果如下1.2.文字段落、音乐标签、视频标签、字体标签和网页中滚到效果的应用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>文字段落</h2> <p> <b>剑圣</b>说： <u>你的剑就是我的剑！！！</u> </p> <h2>音乐标签</h2> <audio src="../img/年轻的朋友来相会.mp3" controls></audio> <!-- audio 音乐标签 src 音乐文件路径 controls 音乐的控件 【播放 音量大小...】 --> <h2>视频标签</h2> <video src="../img/珍惜人生.mp4" controls></video> <h2>字体标签</h2> <font color="cadetblue" size="7" face="仿宋"> 2000万柔光双摄，照亮你的美！！！ </font> <h2>网页中滚动效果的应用</h2> <marquee> <img src="../img/123.jpg" width="200px" height="100px" /> <img src="../img/123.jpg" width="200px" height="100px" /> </marquee> <marquee bgcolor="yellow"> <font color="red" size="6"> 马云说，对钱不感兴趣！！ </font> </marquee> <marquee> 欢迎 <font color="red">Admin</font>,登陆成功！ </marquee> </body> </html>展示效果如下：
1.3.表格标签和表格的嵌套：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 表格标签 table 行 tr 列 td 边框线 border 表格宽度 width 高度 height 位置 align: 三个值: left左 center中 right右 单元格与单元格之间的距离 cellspacing="10" 合并单元格: 跨行合并单元格: rowspan="2" 跨列合并单元格: colspan="3" --> <table border="1" width="600px" height="200px" align="center" cellspacing="0px"> <tr align="center"> <td bgcolor="pink" rowspan="2">1,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,2</td> <td>2,3</td> </tr> <tr> <td colspan="3">3,1</td> </tr> </table> <h1 align="center">表格的嵌套</h1> <table border="1" width="600px" height="600px" align="center"> <tr> <td colspan="2" height="300px"> <table border="1" width="100%" height="100%"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>展示效果如下：
1.4.文本框、密码框、单选按钮、多选按钮、下拉选和文本域和按钮。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <!--form 表单--> <form action="demo02.html" method="get"> 文本框 : <input type="text" name="username" value="username" /> <br /><br /> 密码框: <input type="password" name="pwd" /> <br /><br /> 性别[单选按钮]: <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="中" />中 <input type="radio" name="sex" value="女" />女 <!--注意： 单选按钮的 name 必须要一致--> <br /><br /> 爱好[多选按钮]: <input type="checkbox" name="aihao" value="抽烟" />抽烟 <input type="checkbox" name="aihao" value="喝酒" />喝酒 <input type="checkbox" name="aihao" value="烫头" />烫头 <br /><br /> [下拉选] : 省 : <select name="sheng"> <option value="-1">--请选择--</option> <option value="云南省">云南省</option> <option value="河南省">河南省</option> <option value="河北省">河北省</option> <option value="山西省">山西省</option> </select> <br /><br /> [文本域] 备注: <br /> <textarea rows="6" cols="40">请输入备注</textarea> <br /><br /> 按钮:<br /> <input type="button" value="普通按钮" /> <button>普通按钮</button> <input type="submit" value="提交按钮" /> <!--提交按钮的作用: 把form表单中的元素值 提交给 action 传值通过 name 属性 来 传 --> <input type="reset" value="重置按钮" /> </form> </body> </html>展示效果如下：
1.5.Email类型、search类型、数字类型、滑块类型、颜色类型、日期类型、placeholder属性、required属性和autofocus属性。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 form表单</title> </head> <body> <form action="#"> Email类型 : <input type="email" value="" /> <br /><br /> search 类型 : <input type="search" /> <br /><br /> 数字类型: <input type="number" min="18" max="60" /> <br /><br /> 滑块类型: <input type="range" min="18" max="60" value="60" /> <br /><br /> 颜色类型: <input type="color" /> <br /><br /> 日期类型: <input type="date" /> <br /><br /> placeholder属性: <input type="text" placeholder="用户名/淘宝名/电话号" /> <!--默认显示一段文字在该元素上--> <br /><br /> required属性 ： <input type="text" required /> <!--要求当前元素 必须录入值 不能为null--> <br /><br /> autofocus属性: <input type="text" autofocus /> <!--自动获取焦点--> <!--只需鼠标键到你的搜索字符串，而无需先点击大文本框，鼠标箭头变为输入--> <br /><br /><br /> <input type="submit" value="提交" /> <input type="reset" /> </form> </body> </html>效果展示如下：
第二章 Html的设置 2.1.字体样式设计
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #p1{ font-size: 24px; /*font-weight: bold;*/ font-family: "仿宋"; } </style> <link rel="stylesheet" href="../css/sty.css" /> </head> <body> <h1 align="left">字体样式设计</h1> <!--添加样式 行内式--> <p style="color: red;background-color: yellow;"> 第一种 行内式 </p> <!-- style: 样式属性 color: 字体颜色 background-color： 背景颜色 样式中 所有对 字体 的样式 都是 font- 开头 font-size: 字体大小 font-weight: bold; 字体加粗 font-family： 字体 --> <p id="p1">第二种 嵌入式</p> <p id="p2">第三种 引入式</p> </body> </html>展示效果如下：
2.2.选择器的设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #p1{ color: red; background-color: yellow; } .c1{ font-size: 48px; } p{ color: green; } *{ background-color: antiquewhite; } </style> </head> <body> <!-- id 选择器 : #ID 名称 class 选择器 : .类 名称 标签选择器 : 标签 名称 * 表示 整个文档中 所有的标签 --> <p id="p1">AAAAAAAAAAA</p> <!--注意： 整个文件上的id 不可以重复--> <p class="c1">BBBBBBBBBBB</p> <!--注意： class的名称 是可以重复的--> <p class="c1">CCCCCCCCCCC</p> <div>DDDDDDDDDDDD </div> </body> </html>展示效果如下：
2.3.边框线、选择器等的设置。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #d1,p,.c1{ width: 200px; height: 200px; border: 1px solid black; /*边框线: 像素 实线solid 颜色*/ background-color: rgba(255,255,0,1); /*rgba red green blue a透明: 它们的取值范围为 0-255 a的取值范围是： 0-1 */ } #content #top .right{ color: red; } #content #main .right{ color: blueviolet; } </style> </head> <body> <!--兄弟选择器 用, 隔开 例： #id,.类,标签选择器 --> <div id="d1"></div> <p>AAAAAAAAAAA</p> <div class="c1"></div> <!--层次选择器 || 后代选择器 --> <div id="content"> <div id="top"> top <div id="logo">图片</div> <div class="right">欢迎admin 登录</div> </div> <div id="main"> 主体内容 <div class="right">数据列表</div> </div> </div> </body> </html>展示效果如下：
2.4.div + css页面分割展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div+css</title> <style> #content{ width: 600px; } #top{ width: 100%; height: 50px; border: 1px solid red; } #center{ width: 100%; height: 300px; /*border: 1px solid black;*/ margin-top: 6px; /*上外边距 */ } #left{ width: 200px; height: 300px; border: 1px solid blue; float: left; /*浮动 left 左浮动 right 右浮动*/ } #right{ width: 390px; height: 300px; border: 1px solid green; float: right; } #footer{ width: 100%; height: 50px; border: 1px solid darkmagenta; margin-top: 6px; } </style> </head> <body> <div id="content"> <div id="top">顶部</div> <div id="center"> <div id="left">左边菜单栏</div> <div id="right">右边显示内容的区域</div> </div> <div id="footer">底部信</div> </div> </body> </html>展示效果如下：
2.5.盒子模型（选出页面某一块当作盒子）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> #d1{ width: 350px; height: 90px; border: 1px solid black; margin-top: 100px; margin-left: 200px; padding-top: 10px; padding-left: 50px; /*注意: 设置内边距时 div的 大小会被改变,此时,应该把改变的大小也考虑进去*/ } </style> </head> <body> <div id="d1"> 这是div块的内容展示 </div> </body> </html>展示效果如下：
2.6.ul+li列表样式设计
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #daohang{ width: 200px; font-size: 24px; /*border: 1px solid blanchedalmond;*/ text-align: center; /*文本内容 居中显示*/ } ul li{ list-style-type: none; /*列表 样式 none:无 什么样式都不添加*/ line-height: 40px; /*行高*/ background-color: darkgray; /*背景颜色*/ } ul li a{ text-decoration: none; /*文本的修饰*/ } /*鼠标悬停状态*/ ul li a:hover{ color: red; background-color: yellow; display: block; } </style> </head> <body> <div id="daohang"> <ul> <li><a href="#">首页</a></li> <li><a href="#">日志</a></li> <li><a href="#">相册</a></li> <li><a href="#">说说</a></li> <li><a href="#">留言板</a></li> </ul> </div> <!-- ol标签 : 有序标签 li: 列表标签 ul标签: 无序标签 --> </body> </html>展示效果如下：
2.7.盒子阴影设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> #d1{ width: 200px; height: 300px; margin-left: 300px; margin-top: 50px; border: 1px solid black; box-shadow: 0px 0px 10px 5px blue, 0px 0px 15px 10px red, 0px 0px 20px 15px green; /*盒子阴影: X Y 偏移量 模糊的距离 阴影的尺寸 颜色 */ } </style> </head> <body> <div id="d1"></div> </body> </html>展示效果如下：
2.8.文字特效设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文字的特效</title> <style> p{ height: 260px; /*高度*/ background-color: black; /*背景颜色*/ color: white; /*白色字体*/ text-align: center; /*文字居中*/ font-size: 150px; /*字号大小*/ font-family: "微软雅黑"; font-weight: bolder; /*字体加粗*/ /*文字阴影*/ /*X Y 偏移量 阴影大小 颜色*/ text-shadow: 0px 0px 8px white, 0px -5px 14px yellow, -2px -15px 15px red, -4px -25px 15px orange; padding-top: 50px; } </style> </head> <body> <p>王者荣耀</p> </body> </html>展示效果如下：
2.9.动画的事件、方法设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #d1{ width: 200px; height: 200px; background-color: red; /*与 动画进行绑定: 动画的方法 执行的时间 执行的次数*/ animation: xuanzhuan 1s infinite; /*匀速旋转*/ animation-timing-function: linear; /*旋转的圆点 X Y 的值*/ transform-origin: 100px 100px; } /*动画的事件/方法*/ @keyframes xuanzhuan{ to{ /*改变 : 旋转(deg度)*/ transform: rotate(360deg); } } </style> </head> <body> <div id="d1"></div> </body> </html>展示效果如下：长方形在旋转
第三章 js相关知识3.1.js基础知识1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js基础知识</title> </head> <body> <!--js 全称是 javascript 作用： 前台页面数据传递 表单的验证 变量 条件控制语句 数组 onclick: 点击事件 --> <input type="button" value="点击我" onclick="aa()" /> <script> /*js的第一种输出方式*/ //document.write("hello world!!!!"); function aa(){ alert("警告弹窗！！！"); } </script> </body> </html>展示效果如下：点击点击我弹出弹框3.2.js基础知识2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="aa()">点击我</button> <div id="show"></div> <script> function aa(){ document.getElementById("show").innerHTML = "第三种输出方式"; /* document: 文本文档 getElementById: get 获取 Element 节点 byId 通过id的名称 innerHTML： 页面上显示的内容 */ } </script> </body> </html>展示效果服下：点击惦记我出现第三种输出方式。
3.3.js运算1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--js 弱类型语言 变量的使用 var a=1 var b="rose" 数据类型 : 数字类型 number 字符串类型 string 布尔类型 boolean 未定义 undefined 对象类型 object null 运算符 算术运算符 + - * / % ++ -- 连接运算符 + 赋值运算符 = += -= *= /= 三元运算符 逻辑判断(t/f)?v1 :v2 逻辑运算符 || && ! --> <script> var name = "张三"; // alert(typeof name); /*typeof 输出变量的类型*/ var age = 12.34; // alert(typeof age); var b = true; // alert(typeof b); var a; // alert(typeof a); var c = null; // alert(typeof c); document.write("姓名:"+name+"<br/>年龄："+age); </script> </body> </html>展示效果如下：
3.4.js运算2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var a = 6; var rs = a++; document.write("rs="+rs); // ? document.write("<br />"); document.write("a="+a); // ? document.write("<br /><br/>"); rs = ++a; document.write("rs="+rs); // ? document.write("<br />"); document.write("a="+a); // ? document.write("<br /><br/>"); var b = 15; var s = --b; document.write("s="+s); // ? document.write("<br />"); document.write("b="+b); // ? document.write("<br /><br/>"); s = b--; document.write("s="+s); // ? document.write("<br />"); document.write("b="+b); // ? var c = 10; var ss = c++ + ++c; document.write("<br />"); document.write("ss="+ss); // ? </script> </body> </html>展示效果如下：
3.5.js运算3
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>加法+</h2> <input type="text" id="num1" /> + <input type="text" value="" id="num2" /> <button onclick="jia()">=</button> <span id="showSum"></span> <h2>减法-</h2> <input type="text" id="num3" /> - <input type="text" value="" id="num4" /> <button onclick="jian()">=</button> <span id="showCha"></span> <h2>模%(取余)</h2> <input type="text" id="num5" /> % <input type="text" value="" id="num6" /> <button onclick="quyu()">=</button> <span id="showRs"></span> <script> /*简易版*/ function quyu(){ showRs.innerHTML = num5.value % num6.value; } function jian(){ var num3 = document.getElementById("num3").value; var num4 = document.getElementById("num4").value; var cha = num3-num4; document.getElementById("showCha").innerHTML = cha; } /*运算 + 法 - 模 %（取余） */ function jia(){ var num1 = document.getElementById("num1").value-0; // -0 把获取到的 字符串 转换成 number类型 // alert(num1); var num2 = document.getElementById("num2").value-0; var sum = num1+num2; document.getElementById("showSum").innerHTML = sum; } </script> </body> </html>展示效果如下：输入数字，点击等于算出结构：
3.6.js设计抽奖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #d1{ margin-left: 560px; margin-top: 200px; } #showResult{ margin-left: 560px; margin-top: 50px; color: red; width: 320px; height: 200px; background-color: rgba(255,255,0,0.3); font-size: 36px; } </style> </head> <body bgcolor="darkseagreen"> <h1 align="center">学院抽奖系统</h1> <div id="d1"> 请输入卡号:<input type="text" id="card" /> <button onclick="choujiang()">抽奖</button> </div> <div id="showResult"></div> <script> /*事件*/ function choujiang(){ var rd = Math.floor(Math.random()*10); /*0-10 之间的小数 Math.floor 取整（地板） */ alert(rd); /*var card = document.getElementById("card").value;*/ var gewei = card.value%10; /*alert(gewei);*/ var str = (rd == gewei)?"中奖了，奖励法拉利一部！":"重在参与"; showResult.innerHTML = str; } </script> </body> </html>展示效果如下：输入点击抽奖
3.7.实例1： 1.前端框架frameset：作用：切割页面，把页面切割成若干行或者列，例如：rows="100,*,50" : 把页面切割成三行，第一行的高度是 100px,第二行的高度是自由* ,第三行的高度是 50px。cols="200,*"：把页面分割成两列，第一列宽200px，第二列宽度自由。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!-- 把页面分成三行：第一行显示top.html页面，第二行分成两列： 第一列显示left.html页面，第二列显示right.html页面， 第三行显示foot.html页面 --> <frameset rows="110,*,100"> <frame src="top.html" /> <frameset cols="200,*"> <frame src="left.html" /> <frame src="right.html" /> </frameset> <frame src="foot.html" /> </frameset> </html>
1.各个页面的设置：align = "center"表示所在的行文字居中显示，marquee标签中的文字从右往左滚动展示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>头部页面</title> </head> <!-- top页面 --> <body bgcolor="cornflowerblue"> <h1 align="center">学生管理系统</h1> <marquee> 欢迎 rose, 登陆成功！！ </marquee> </body> </html> <!-- foot页面 --> <body> <p align="center"> copyright © || 联系我们||合作伙伴 <br /> Addr: 小名 </p> </body> <!-- left页面 --> <body> 导航栏 </body> <!-- right页面 --> <body> <h1 align="center">详细内容</h1> </body>展示效果如下：
3.login登录页面设计：title表示页面的作用，页面中不展示，<br />表示换行，form表示表单，action表示跳转的页面，method表示返回的方法，一般为get方法或post方法，border表示边框宽度，cellspacing表示单元格间距，<tr></tr>表示一行，<td></td>表示行中的列， 表示一个空格，input表中这一行或列可输入内容，type表示内容的类型，name为后端传来的名字，placeholder没有输入是默认的内容，<a>标签为超链接，href为超链接的地址。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登陆页面</title> </head> <body bgcolor="pink"> <br /><br /><br /><br /><br /><br /> <form action="index.html" method="get"> <table border="0" align="center" cellspacing="0"> <tr> <td>用户名</td> <td><input type="text" name="uname" placeholder="username" /> </td> </tr> <tr> <td>密 码</td> <td><input type="password" name="pwd" /> </td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="登陆" /> <a href="www.baidu">注册</a> <!--超链接 标签 a href: 链接的地址--> </td> </tr> </table> </form> </body> </html>展示效果如下：
3.8.节点相关操作，onclick点击追加、插入、删除、复制和修改节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="addNode()">追加</button> <button onclick="insertNode()">插入</button> <button onclick="deleteNode()">删除节点</button> <button onclick="copyNode()">复制节点</button> <button onclick="updateNode()">修改</button> <div id="d1"> <p>aaa1</p> <p>aaa2</p> <p>aaa3</p> <p>aaa4</p> <p>aaa5</p> </div> <script> function updateNode(){ var divEle = document.getElementById("d1"); // 创建节点 var pNode = document.createElement("p"); pNode.innerHTML = "修改了原有的节点"; // 获取最后一个节点 var lastEle = divEle.lastElementChild; // 实际是 替换 1参的节点 替换 2参的节点 divEle.replaceChild(pNode,lastEle); } function copyNode(){ var divEle = document.getElementById("d1"); // 调用 克隆的方法 true 克隆子节点 var pNode = divEle.firstElementChild.cloneNode(true); divEle.appendChild(pNode); } function deleteNode(){ var divEle = document.getElementById("d1"); // 删除 div 的最后一个孩子节点 divEle.removeChild(divEle.lastElementChild); } function insertNode(){ var divEle = document.getElementById("d1"); // 创建节点 var pNode = document.createElement("p"); // <p></p> pNode.innerHTML = "aaa0"; // 把a0 这个节点 插入 到 父节点的 第一个孩子节点前 divEle.insertBefore(pNode,divEle.firstElementChild); } function addNode(){ var divEle = document.getElementById("d1"); // 创建节点 var pNode = document.createElement("p"); // <p></p> pNode.innerHTML = "aaa6"; // 把 a6 节点 追加到 div 的子节点的最后 divEle.appendChild(pNode); } </script> </body> </html>展示效果如下：
3.9.列表展示、全选、修改等操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /*全部选中/ 全部取消*/ function checkAll(){ /*alert("测试 coming...")*/ var ckAll = document.getElementById("selectCheckAll"); // 获取所有 name 是 checkItem 的节点 返回数组类型 var checkItems = document.getElementsByName("checkItem"); // 判断 全选 按钮是否被选中 if(ckAll.checked==true){ // 循环遍历所有的 name 节点 全部选中 for(var i=0;i<checkItems.length;i++){ checkItems[i].checked = true; } }else{ // 循环遍历所有的 name 节点 全部取消 for(var i=0;i<checkItems.length;i++){ checkItems[i].checked = false; } } } /*点击 反选 按钮 触发事件*/ function resSelect(){ var checkItems = document.getElementsByName("checkItem"); for(var i=0;i<checkItems.length;i++){ checkItems[i].checked = !checkItems[i].checked; } } </script> </head> <body> <h1 align="center">学生管理系统</h1> <table align="center" border="1px" width="600px" cellspacing="0">、 <!--th 标签 是 标题行 ：有自动居中 自动加粗的功能--> <tr> <th>全选<input type="checkbox" id="selectCheckAll" onclick="checkAll()" /></th> <th>序号</th> <th>姓名</th> <th>性别</th> <th>班级</th> <th>操作</th> </tr> <tr align="center"> <td><input type="checkbox" name="checkItem" /></td> <td>1</td> <td>张三丰</td> <td>男</td> <td>计科1班</td> <td> <a href="#">修改</a>|| <a href="#">删除</a> </td> </tr> <tr align="center"> <td><input type="checkbox" name="checkItem" /></td> <td>2</td> <td>李思敏</td> <td>男</td> <td>计科1班</td> <td> <a href="#">修改</a>|| <a href="#">删除</a> </td> </tr> <tr align="center"> <td><input type="checkbox" name="checkItem" /></td> <td>1</td> <td>张三丰</td> <td>男</td> <td>计科1班</td> <td> <a href="#">修改</a>|| <a href="#">删除</a> </td> </tr> <tr align="center"> <td><input type="checkbox" name="checkItem" /></td> <td>1</td> <td>张三丰</td> <td>男</td> <td>计科1班</td> <td> <a href="#">修改</a>|| <a href="#">删除</a> </td> </tr> <tr align="center"> <td><input type="checkbox" name="checkItem" /></td> <td>1</td> <td>张三丰</td> <td>男</td> <td>计科1班</td> <td> <a href="#">修改</a>|| <a href="#">删除</a> </td> </tr> <tr align="center"> <td><input type="checkbox" name="checkItem" /></td> <td>1</td> <td>张三丰</td> <td>男</td> <td>计科1班</td> <td> <a href="#">修改</a>|| <a href="#">删除</a> </td> </tr> <tr align="center"> <td><input type="checkbox" name="checkItem" /></td> <td>1</td> <td>张三丰</td> <td>男</td> <td>计科1班</td> <td> <a href="#">修改</a>|| <a href="#">删除</a> </td> </tr> <tr align="center"> <td>反选 <input type="checkbox" id="resSelect" onclick="resSelect()" /></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>展示效果如下：
3.10.节点样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="d1">div哈哈哈</div> <button onclick="ab()">点击我</button> <script> function ab(){ // 获取内容 alert(d1.innerHTML); // 修改或者 添加 内容 d1.innerHTML="嘿嘿嘿。。。"; /*操作样式*/ d1.style.width = "200px"; d1.style.height = "100px"; d1.style.backgroundColor = "yellow"; /*操作属性*/ d1.setAttribute("class","logo"); } </script> </body> </html>展示点击变化：
3.11.鼠标事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /*处理事件的第二种方式*/ window.onload = function(){ document.getElementById("btn1").onclick = function(){ alert("单击"); } document.getElementById("btn2").ondblclick = function(){ alert("双击666"); } document.getElementById("btn3").onmousedown = function(){ alert("按下"); } document.getElementById("btn4").onmouseup = function(){ alert("弹起来"); } // 鼠标移动到内部 悬停事件 document.getElementById("btn5").onmouseover = function(){ document.getElementById("btn5").style.backgroundColor = "red"; } /*移出 */ document.getElementById("btn5").onmouseout = function(){ document.getElementById("btn5").style.backgroundColor = "orange"; } } </script> </head> <body> <button id="btn1">单击</button> <button id="btn2">双击</button> <button id="btn3">按下</button> <button id="btn4">弹起</button> <div id="btn5" style="width: 100px;height: 100px;background-color: blue;"></div> </body> </html>展示效果如下：鼠标放在矩形上会变色
3.12.键盘事件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> username:<input type="text" id="username" /> <script> window.onload = function(){ document.getElementById("username").onkeydown = function(){ /*this 指的是 选中的 这个对象 id为 username 这个input 标签 */ this.style.backgroundColor = "pink"; } document.getElementById("username").onkeyup = function(){ /*this 指的是 选中的 这个对象 id为 username 这个input 标签 */ this.style.backgroundColor = "blue"; } } </script> </body> </html>展示效果如下：输入时会变色
3.13.cookie
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 什么是cookie 页面用来保存信 作用： eg: 自动登录 记住用户名 --> <script> /*使用cookie*/ /*简单设置cookie*/ /*设置过期时间 expires=(内部状态，不会打印出来)*/ var oDate = new Date(); oDate.setDate(oDate.getDate()+30); // 设置时间是 30天 后 document.cookie = "root=user;expires="+oDate; document.cookie = "password=666"; </script> </body> </html>3.14.cookie封装：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> // 封装 设置 cookie function setCookie(name,value,iDay){ var oDate = new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie = name+"="+value+";expires="+oDate; } // 向cookie 中 写入数据 /*setCookie('username','rose',30); setCookie('password','123456',30);*/ // 删除 cookie function removeCookie(name){ setCookie(name,'1',-1); } removeCookie("password"); </script> </body> </html>第四章 流程控制、函数、变量和一维数组 4.1.四种一如方法，引入外部文件和重定向
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> alert("内嵌式"); </script> <script type="text/javascript" src="../js/aa.js" ></script> </head> <body> <!--1. js 四种引入方式 内嵌式 引入外部文件 行内式 重定向 --> <button onclick="alert('行内式，运行ing...')">点击运行行内式</button> <br /><br /> <a href="javascript:alert('4重定向')">第四种，重定向</a> </body> </html>效果如下：
4.2.运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> <script> /*赋值运算符 += -= *= /= =*/ var a = 12; a+=12; // a=a+12; document.write("a="+a); document.write("<hr />"); /*比较运算符 > < >= <= == != === */ var b = 20; var c = 20; var d = "20"; document.write(b==c); document.write("<br />"); document.write(b==d); document.write("<br />"); document.write(b===c); document.write("<br />"); document.write(b===d); document.write("<br />"); /*== 比较的是值 === 比较的是 数值和类型*/ /* * && 有一个假的 结果为 假 || 有一个真的 结果为 真 ! */ </script> </body> </html>展示效果如下
4.3.控制流程语句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> /*判断结构 if(){}else{} prompt输入框 */ // var a = prompt("请输入一个number"); // if(a>0){ // alert("这是一个正数"); // }else if(a<0){ // alert("这是一个负数"); // }else if(a==0){ // alert("这是 0"); // }else{ // alert("这就不是一个数字"); // } //============================================================================= /*选择结构 输入的数字 为 1-12 */ // var a = prompt("请输入1-12 整数"); alert(typeof a); // 此时 a的类型为 string // // var b = parseInt(a); // 把字符串类型的a 转换成 number 类型的b // alert(typeof b); // // switch (b){ // case 3: // case 4: // case 5: document.write("春天"); // break; // case 6: // case 7: // case 8: document.write("夏天"); // break; // default: document.write("nono"); // break; // } //=============================================================================== /*通过for 循环 写一个 99乘法表 * 矩形 平行四边形 三角形 菱形 */ /* 1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4=8 3*4=12 4*4=16 ........... * */ /*for(var i=1;i<10;i++){ for(var j=1;j<=i;j++){ document.write(j+"*"+i+"="+j*i+" "); } document.write("<br />"); }*/ //=============================================================================== var k = 1; do{ document.write("至少输出一次！！！"); }while(k<0); </script> </body> </html>展示效果如下：
4.4.流程控制关键字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> for (var i = 1; i < 10; i++) { document.write("i=" + i); // 0123456 0 if (i % 7 == 0) { break; // 跳出当前循环 } } document.write("<hr />"); for (var k = 1; k < 10; k++) { if (k % 7 == 0) { continue; // 跳过本次循环，继续下次循环 } document.write("k=" + k + "<br/>"); } // 课堂小练习: 输出 100以内 能被 11 整除的数字 11 22 33 44 。。。。99 document.write("<hr />"); for (var k = 1; k < 100; k++) { if (k % 11 != 0) { continue; // 跳过本次循环，继续下次循环 } document.write("k=" + k + "<br/>"); } </script> </body> </html>展示效果如下
4.5.如何创建函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 函数 / 方法 / 事件 --> <script> function aa1(){ alert("无参数 无返回值方法..."); } // aa1(); function aa2(name){ alert("有参数 无返回值方法... 传进来的参数:"+name); } // aa2("rose"); function aa3(){ return "返回aa3()得字符串..."; } // alert(aa3()); function aa4(bb){ return "别"+bb; } alert(aa4("说话")); </script> </body> </html>展示如下：
4.6.变量的作用域
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> /* 作用域 大括号里面 能调用 外面的变量 而大括号里面定义的变量 外面 不能够调用 */ var j = 10; function aa1(){ var x = 5; alert("j="+j); } aa1(); alert("x="+x); </script> </body> </html>展示效果如下：
4.7.一维数组创建
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> /*第一种 创建方式 */ var arr1 = [12,3.14,true,"abc"]; alert(typeof arr1); // 类型 object /*第二种 创建方式 */ var arr2 = new Array(5); /*第三种 创建方式 */ var arr3 = new Array(); /*第四种 创建方式 */ var arr2 = new Array("30",30,true); </script> </body> </html>展示如下：
4.8.一维数组操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var arr = [12,3.1415,true,"哈哈"]; // alert(arr[0]); // 通过下标 获取 值 // alert(arr.length); // 获取数组的长度 /*循环遍历这个数组*/ // for(var i=0;i<arr.length;i++){ // document.write(arr[i]); // } /** * 练习: 冒泡排序 * 选择排序 */ /*向数组末尾添加新的元素,并且反回新的长度*/ arr.push("ccc"); // alert(arr.length); /*把数组转化成字符串*/ // alert(arr.toString()); //======================================================================= var arr1 = [56,1,88,15,12,13,"abc"]; /*删除数组的最后一个元素*/ arr1.pop(); document.write(arr1.toString()); /*排序*/ arr1.sort(); document.write("<br />"); document.write(arr1); </script> </body> </html>展示如下：
4.9.常用对象String
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var str = new String("abe:cde:afg"); /*替换*/ document.write(str.replace("a", "***")); document.write("<br />"); /*根据 : 来进行 切割 字符串 */ var arr = str.split(":"); // document.write(arr.toString()); for (var i = 0; i < arr.length; i++) { document.write(arr[i] + "<br/>"); } document.write("<hr />"); /*截取字符串 截前不截后 */ /*indexOf 通过元素 获取它的下标*/ document.write(str.substring(str.indexOf("b"), str.indexOf("f"))); document.write("<hr />"); /*全部转换成 大写*/ document.write(str.toUpperCase()); document.write("<hr />"); /*全部转换成 小写*/ document.write(str.toLowerCase()); </script> </body> </html>展示如下：
4.10.常用对象Date
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var date = new Date(); alert(date.toLocaleString()); alert(date.toLocaleDateString()); // 年月日 alert(date.toLocaleTimeString()); // 时分秒 </script> </body> </html>展示如下：
4.11.js定时器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="show"></div> <button onclick="stop()">停止</button> <script> var i = 0; function aa1() { i++; show.innerHTML = i; } // 定时器 每1000毫秒 调用一次 aa1 方法 var inter = setInterval(aa1, 1000); function stop() { // 清除定时器 clearInterval(inter); } </script> </body> </html>展示如下：
4.12.动态时间
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="showTime"></div> <script> function goTime() { var date = new Date(); showTime.innerHTML = date.toLocaleString(); } // setInterval(goTime,1000); function aa() { alert("弹出一次"); } /*过3秒后 只调用一次 aa() 这个方法*/ setTimeout(aa, 3000); </script> </body> </html>展示如下：
4.13.时间案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 页面 <font id="font1"></font> 秒后跳转到百度 <script> var interId = setInterval(cutTime, 1000); var i = 2; function cutTime() { font1.innerHTML = i; i--; if (i < 0) { clearInterval(interId); } } function go() { /*重定向 当前窗口的链接 地址 : */ window.location.href = "www.baidu"; } /*3秒后 调用 go 这个方法*/ setTimeout(go, 3000); </script> </body> </html>展示如下：
4.14.确认取消框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> /*var aa = window.confirm("确认删除吗？"); alert(aa);*/ if (window.confirm("确认关闭窗口吗？")) { alert("真的关闭了哦"); window.close(); } else { alert("又不关了哦"); } </script> <!-- 小结： 定时器、location、confirm alert...都是window 对象的下一级操作 window.confirm window.location 。。。。 有的地方 window 是可以省略不写的，这样的技术称之为 jsBOM 技术 Browser Object Model 还有一种 jsDOM 技术 : document Object Model --> </body> </html>展示如下：
4.15.抓取节点的几种方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="d1">AAAAAdivdiv</div> <p name="ps">pname1pname1pname1</p> <p name="ps">pname2pname2pname2</p> <p class="pa">cl1111class1class1</p> <p class="pa">cl222class1class1</p> <p class="pa">cl3333class1class1</p> <p class="pa">cl444444ss1class1</p> <script> /*页面加载事件 打开页面 加载完主体部分 就会加载该 事件 */ window.onload = function() { var divId = document.getElementById("d1"); // alert(divId.innerHTML); // 查看该节点 页面上显示的内容 // 通过标签名称 拿到节点 比如 p 标签 var pEles = document.getElementsByTagName("p"); for (var i = 0; i < pEles.length; i++) { // alert(pEles[i].innerHTML); } /*通过name 拿到元素的节点*/ var psEles = document.getElementsByName("ps"); for (var i = 0; i < psEles.length; i++) { // alert(psEles[i].innerHTML); } /*通过class 拿到元素的节点*/ var paEles = document.getElementsByClassName("pa"); for (var i = 0; i < paEles.length; i++) { alert(paEles[i].innerHTML); } } </script> </body> </html>展示如下
4.16.通过关系获得节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="d1"> <p>aa1</p> <p>aa2</p> <p>aa3</p> </div> <script> window.onload = function() { var divEle = document.getElementById("d1"); /*获取第一个元素的子节点*/ var p1Ele = divEle.firstElementChild; // alert(p1Ele.innerHTML); /*获取最后一个元素的子节点*/ var lastEle = divEle.lastElementChild; // alert(lastEle.innerHTML); /*先获取第一个节点 再获得这个节点的 弟弟节点*/ var nextEle = divEle.firstElementChild.nextElementSibling; // alert(nextEle.innerHTML); /*它的哥哥节点 |上一个节点*/ var preEle = divEle.lastElementChild.previousElementSibling; alert(preEle.innerHTML); } </script> </body> </html>展示如下：
版权声明：本文标题：JavaWeb页面设计 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686623270a87552.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论