您的位置：首页 > 编程语言 > Java开发

java实训笔记（十一）之静态网页技术

2011-08-23 15:47 721 查看

一、概述：

在前面的学习掌握了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比较

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 = num1num2;
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="结果" onclick="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" onblur="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="结果" onclick="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 onload="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)” onclick=”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 onload="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 onkeydown="getInfo()" onload="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" onmouseover="setTab('c',1,3)" >1</li>
<li id="c2" onmouseover="setTab('c',2,3)" >2</li>
<li id="c3" onmouseover="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 onload="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)" onclick="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)" onclick="addRow()">add</a>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航