一、概述：
在前面的学习掌握了java C/S的开发模式，从今天开始就要进入B/S的学习中，在学习动态网站之前首先要学习静态网页技术，那首先就要了解静（动）态网页的概念，动态网站的意思：人的不同，内容会不一致，就是动态网页技术，那静态网站的所有内容都是一致，不会因为人的不同而引起内容的不同。在静态网页技术中，要掌握css以及javascript的技术。
二、CSS的用法
1、概念
CSS（层叠样式表），用来控制和修改网页的外观，是用来美化网页的页面。
1、 CSS语法
1、CSS的使用有三种方法：
1、 直接样式表 ：将样式写在页面元素的style属性中，此样式只能作用在单一的元素上。
| <p style=”color:red”>css真好玩</font> 样式表由很多对属性：值所构成，彼此之间采用分号分割。 样式表的属性用法要多去查阅css2的帮助文档或者在w3shool网站上查找。 |
2、 内部样式表 ：将样式表写在head标记对中。
| <head> <style type=”text/css”> p{color:red} </style> |
此样式能影响所有使用p的段落。
3、 外部样式表：将样式表写成一个扩展名为css的文件中，在页面中加入link比较
| <!-- first.css --> P{color:red;} |
First.html
| <link rel="stylesheet" href="first.css" type="text/css"/> |
在href中，要注意的时路径问题当把样式放在style文件夹里是，前面要加上style/first.css。
2、选择器：
在内部样式表和直接样式表中需要给样式表取名称，有三种取名称的方法：
Ø html选择器：选择html中可以的标记
Ø 类选择器：可以自定义名称，在名称前面有点修饰，在需要的地方使用class属性。
Ø id选择器：可以自定义名称，在名称前面有#修饰，在需要的地方使用id属性。
类选择器和id选择器的区别：类选择器可以重复使用，id选择器只能使用一次。
3、技巧
在使用CSS中，可以一些特殊符号以及组合
1、*号，代码所有对象。
2、当需要对多个元素设置一个样式时，可以把多个选择符写在一起，并用逗号分隔
p,li,td{color:red;}
3、包含选择符：当使用在某一个特定标记中的字标记选用样式时，可以把标记和子标记写出来，用空格分隔。
td span{color:red;}
p#test {color:red}//只能在段落使用id选择符
4、子元素选择符：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。
例如，如果您希望选择只作为h1 元素子元素的strong 元素，可以这样写：
h1 >strong {color:red;}
5、相邻兄弟选择符：选择紧接在另一元素后的元素，且二者有相同父元素。
例如，如果要增加紧接在h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
三、JS的用法
1、基本概念：javascript是有java所派生出来的弱类型的语言，有其他程序语言的特征。用来实现网页中表单的验证以及网页动画实现。通过在head标记对中或者在所需要的地方加入script标记嵌入html中。在javascript中声明变量不用指定变量的数据类型，是根据所赋值来决定是何数据类型，可以通过typeof运算符来查看数据类型。
四、综合示例
示例1：实现网页计算器。
解决问题方法：1、事件处理程序，在javascript中可以使用函数来表示处理函数；
2、 如何获得控件的值：通过document.getElementById()的形式来访问对象；
3、 如何把获得值放在html的标记之间通过innerText和innerHTML，两者之间的区别：innerText是文本，innerHTML可以用来写标记。
代码：
| <html> <head> <style type="text/css"> .pageWidth{margin:auto;width:600px} #lay{height:400px;background:#fba} table{text-align:center} .fot{padding-top:5px;} </style> <script type="text/javascript"> function calc(){ var num1 = parseInt(document.getElementById("num1").value); var op= document.getElementById("op").value; var num2 = parseInt(document.getElementById("num2").value); var result =0; switch(op){ case "+": result = num1+num2; break; case "-":result = num1 -num2; break; case "*":result = num1*num2; break; case "/":result = num1 /num2; break;
} document.getElementById("result").innerText = result; //document.getElementById("result").style.border="1px solid #f00"; } </script> </head> <body> <div id="lay" class="pageWidth"> <table align="center"> <tr> <td colspan="3" class="fot">计算器</td> </tr> <tr height="5px"><td colspan="3"></td></tr> <tr> <td>第一个数</td> <td><input type="text" id="num1"/></td> <td><font color="red">文本框填写内容不正确</font></td> </tr> <tr height="5px"><td colspan="3"></td></tr> <tr> <td>运算符</td> <td><select id="op"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select></td> <td></td> </tr> <tr height="5px"><td colspan="3"></td></tr> <tr> <td>第二个数</td> <td><input type="text" id="num2"/></td> <td></td> </tr> <tr height="5px"><td colspan="3"></td></tr> <tr> <td><input type="button" value="结果" οnclick="calc ()"/></td> <td colspan="2" id="result">0</td>
</tr> </table>
</div> </body>
</html> |
在以上示例中还可以引申修改其中的样式，写法有两种：
1、通过document.getElementById().style后面接具体的样式，在写样式时要注意css的样式有两个以上单词构成时，去掉中间的连字符第一个单词之外，其他单词大写。
2、可以在head标记对中，或者在css文件中，预先定义类选择器，然后在js中只需要写：document.getElementById().className=”类选择器名称”
示例2：基于示例1实现对文本框内容的验证。
要求：文本框的内容只能为数字，让是字母时，出现错误提示。
解决问题方法：
1、 信息的显示和隐藏，在css中有display何visibility来实现，display隐藏时不占位置，visibility隐藏时保留控件所占的位置。由于我们的信息显示在一行的最后一个单元格中，所以在这里我们应该选择visibility来实现，如果我们是在下一行显示错误信息，那就应该选用display。
2、 如果验证是否为字符，这里有两种方法实现：
a) 通过循环遍历来判断;
b) 通过正则表达式来判断;
正则表达式的用法：
在js中要实现正则表达式，首先就要创建正则表达式的对象，创建对象有两种方法：
方法一：
var reg = /[0-9]{3}/;
方法二
var reg = new RegExp(“[0-9]{3}”);
在正则表达式中，字符的含义：
[0-9]，数字0到9
{n}，至少匹配n次
+,匹配1次或者多次
*匹配0次或者多次
^开头
$结尾
代码：
| 方法一： function check(){ var obj = document.getElementById("num1"); var str = obj.value; var flag=false; for (var chr in str) { if(str.charAt(chr)<'0' || str.charAt(chr)>'9'){ flag = true; break; }else{ flag = false; } } if(flag){ document.getElementById("mess").style.visibility ="visible"; }else{ document.getElementById("mess").style.visibility="hidden"; } } 方法二： function chkReg(){ var obj = document.getElementById("num1"); var str = obj.value; var flag=false; var reg = new RegExp(" [0-9]{1,10} "); if(!reg.test(str)){ document.getElementById("mess").style.visibility ="visible";
}else{ document.getElementById("mess").style.visibility="hidden";
}
}调用代码 <div id="lay" class="pageWidth"> <table align="center"> <tr> <td colspan="3" class="fot">计算器</td>
</tr> <tr height="5px"><td colspan="3"></td></tr> <tr> <td>第一个数</td> <td><input type="text" id="num1" οnblur="check()"/></td> <td><font color="red" style="visibility:hidden" id="mess">*文本框填写内容不正确</font></td> </tr> <tr height="5px"><td colspan="3"></td></tr> <tr> <td>运算符</td> <td><select id="op"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select></td> <td></td> </tr> <tr height="5px"><td colspan="3"></td></tr> <tr> <td>第二个数</td> <td><input type="text" id="num2"/></td> <td></td> </tr> <tr height="5px"><td colspan="3"></td></tr> <tr> <td><input type="button" value="结果" οnclick="calc()"/></td> <td colspan="2" id="result">0</td>
</tr> </table> </div> |
示例3：实现日历
解决问题方法：
代码：
| var titles=["日","一","二","三","四","五","六"]; var days=[31,28,31,30,31,30,31,31,30,31,30,31]; var date = new Date(); var current_day=date.getDate(); date.setDate(1); var d =1;
var week =date.getDay(); var date_rows = Math.round((days[date.getMonth()]+week+6)/7);
document.write("<div style='background:#aaa'><table>"); document.write("<tr>"); for(var i=0;i<7;i++){ document.write("<th>"+titles[i]+"</th>"); } document.write("</tr>"); for(var i=0;i<date_rows;i++){ document.write("<tr>"); for(var j=0;j<7;j++){ if(i==0 && j<week){ document.write("<td></td>"); } else{
var sid= "t"+d; //alert(sid); document.write("<td id='"+sid+"'>"+d+"</td>"); if(d==current_day){ var cid = "t"+current_day; document.getElementById(cid).style.background="#f00"; } d++; if(d>days[date.getMonth()]){ d = days[data.getMonth()]; }
} }
document.write("</tr>"); } document.write("</table></div>"); |
示例4：改进版日历：
代码：
| <html> <head> <style type="text/css"> #lay2{height:100px;width:150px} </style> <script type="text/javascript"> function getCalendar() {
var titles = ["日", "一", "二", "三", "四", "五", "六"]; var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var date = new Date(); var current_day = date.getDate();//获得当前日期 date.setDate(1); var d = 1; var str = ""; var week = date.getDay(); var date_rows = Math.round((days[date.getMonth()] + week + 6) / 7); str += "<table><tr>";
for(var i = 0; i < 7; i ++ ) { str += "<th>" + titles[i] + "</th>"; } str += "</tr>"; for(var i = 0; i < date_rows; i ++ ) { str += "<tr>"; for(var j = 0; j < 7; j ++ ) { if(i == 0 && j < week) { str += "<td></td>"; } else {
var sid = "t" + d; // alert(sid); str += "<td id='"+sid+"'>" + d + "</td>";
d ++ ; if(d > days[date.getMonth()]) { d = days[date.getMonth()]; break; }
} }
str += "</tr>"; } str += "</table>"; document.getElementById("lay2").innerHTML = str; var cid = "t" + current_day; document.getElementById(cid).style.background = "#f00"; } < / script > </head>
<body οnlοad="getCalendar()">
<div id="lay2"></div>
</body>
</html> |
示例5：超链接实现javascript。
在href中写入javascript，就必须以javascript开头，后面接冒号，冒号后面写js代码、函数和void(0)。
Javascript:void(0)表示是一个死链接，#则会跳到页首的位置。
| 打开新窗口 <script type=”text/javascript”> function openWin(tag,obj){ obj.target=”_blank”; obj.href=”/test.jsp?uid=”+tag; obj.click(); } </script> <a href=”javascript:void(0)” οnclick=”openWin(3,this)”>test</a> |
慎用JavaScript:void(0)
JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下：
1. javascript:void (expression)
2. javascript:void expression
expression是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接，当用户点击以后不会发生任何事。当用户点击链接时，void(0) 计算为 0，但在JavaScript 上没有任何效果。
<ahref="javascript:void(0)">单击此处什么也不会发生</a>
也就是说，要执行某些处理，但是不整体刷新页面的情况下，可以使用void(0),但是在需要对页面进行refresh的情况下，那就要仔细了。
其实我们可以这样用<ahref="javascript:void(document.form.submit())">，这句话会进行一次submit操作。那什么情况下用void(0)比较多呢，无刷新，当然是Ajax了，看一下Ajax的web页面的话，一般都会看到有很多的void(0)，：） ，所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。
| <html> <head> <title> </title> <style type="text/css"> </style> <script type="text/javascript"> function fun(){ document.forms[0].submit();
} </script> </head> <body > <form action="" method="post" > <input type="text"/> <a href="javascript:fun()" target="_blank" >收件箱</a> </form> </body> </html> |
示例6：动态显示时间
在js中，所有动画的实现都需要用window对象的方法，setTimeout和setInterval，这个两个方法。
| <html>
<head>
<title> </title> <style type="text/css"> #lay{width:100px;height:30px;background:#fba} </style> <script type="text/javascript"> function getCurrentTime(){ var date = new Date(); var strTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); document.getElementById("lay").innerText=strTime; window.setTimeout("getCurrentTime()",1000);
}
</script>
</head> <body οnlοad="getCurrentTime()"> <div id="lay"></div> </body>
</html> |
示例7：通过键盘的方向键控制层的移动。
解决问题的方法：
1、首先通过键盘事件，onkeydown、onkeyup和onkeypress，其中onkeypress无法获得功能键及小数字键的值。
2、如何获得按键的值，在这里可以通过event对象，event是javascript中关于事件的对象信息。
代码：
| <html> <head> <title> </title> <style type="text/css"> #lay{width:100px;height:30px;background:#fba;left:0px;position:relative;top:0px} </style> <script type="text/javascript"> function getInfo(){ //alert(String.fromCharCode(event.keyCode)); var key=event.keyCode; if(key==39){ //39是向右方向键的ascii move(); } }
function move(){ var leftLoc = document.getElementById("lay").style.posLeft; leftLoc +=10; document.getElementById("lay").style.posLeft = leftLoc;
}
function getCurrentTime(){ var date = new Date(); var strTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); document.getElementById("lay").innerText=strTime; window.setTimeout("getCurrentTime()",1000);
} </script> </head> <body οnkeydοwn="getInfo()" οnlοad="getCurrentTime()"> <div id="lay"></div> </body> </html> |
注意，在要实现层的移动时，一定要对层进行定位，层默认的布局是static，如未指定位置，则层不会一定。
在这里的代码仅仅实现方向键向右移动时，层会移动，其余方向以及到边界问题大家自行补充。
示例8：选项卡的制作。
代码：
| <html>
<head> <style> #lay{width:150px;height:30px;} li{list-style:none;width:30px;float:left}
.now{background:#fba;}
</style>
<script type="text/javascript"> function setTab(name,curr,total){ for(var i=1;i<=total;i++){ var tab = document.getElementById(name+i); var cont = document.getElementById(name+"_t_"+i); // tab.className=i==curr?"now":""; // cont.style.display=i==curr?"block":"none"; if(i==curr){ tab.className="now"; cont.style.display="block"; }else{ tab.className=""; cont.style.display="none"; } }
}
</script> <title></title>
</head>
<body> <div> <div id="lay"> <ul > <li id="c1" class="now" οnmοuseοver="setTab('c',1,3)" >1</li> <li id="c2" οnmοuseοver="setTab('c',2,3)" >2</li> <li id="c3" οnmοuseοver="setTab('c',3,3)" >3</li> </ul> </div> <div> <ul id="c_t_1"> <li>first</li></ul> <ul id="c_t_2" style="display:none"> <li>second</li> </ul> <ul id="c_t_3" style="display:none"> <li>third</li> </ul> </div> </div> </body>
</html> |
示例9：给下列表添加年。
Dom：是操作html或者xml的标准方法。可以在不同的浏览器中都能运行。在dom中把所有元素都当作对象来处理。Dom的结构如下图所示：
代码1：
| <html>
<head>
<title></title>
<script type="text/javascript"> //第二种方法是通过innerHTML或者innerText来编写 // function getYears(){ // var date = new Date(); // var str = ""; // for(var i = 1900; i <= date.getFullYear(); i ++ ){ // str += "<option>" + i + "</option>"; // } // document.getElementById("year").innerHTML = str;
// }
//第三种方法：通过dom的方式来编写 function getYears() { var date = new Date(); for(var i = 1900; i < date.getFullYear(); i ++ ) { var obj = document.createElement("option"); obj.setAttribute("value", i); obj.innerText = i;
document.getElementById("year").appendChild(obj); } } function getSelectValue() { var obj = document.getElementById("year"); var index = obj.selectedIndex; alert(obj.options[index].innerText); } </script>
</head>
<body οnlοad="getYears()"> <!—这里是第一种方法 <select >
<script type="text/javascript"> // var date = new Date(); // for(var i = 1900; i < date.getFullYear(); i ++ ){ // document.write("<option>" + i + "</option>"); // }
</script>
</select> -->
<select id="year">
</select>
<a href="javascript:void(0)" οnclick="getSelectValue()">test</a> </body>
</html> |
示例10：如何动态添加表中的行。
代码：
| <html>
<head> <style> .test{width:100px;height:30px;background:#fba}
</style>
<title></title>
<script type="text/javascript"> function addRow(){
var tr = document.createElement("tr"); document.createComment() var td1 = document.createElement("td"); td1.className="test"; td1.innerText="1"; var td2 = document.createElement("td"); td2.className="test"; td2.innerText="2"; var obj = document.getElementById("t"); tr.appendChild(td1); tr.appendChild(td2); obj.appendChild(tr); }
</script>
</head>
<body> <table > <tbody id="t"> </tbody>
</table> <a href="javascript:void(0)" οnclick="addRow()">add</a> </body>
</html> |
扫一扫
1659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
