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

最新推荐文章于 2021-07-13 17:20:33 发布

最新推荐文章于 2021-07-13 17:20:33 发布 · 247 阅读

文章标签：

#java #javascript #ViewUI

本文详细介绍了静态网页技术的基础知识，包括CSS的用法与JavaScript的基本概念，通过综合示例展示了如何实现网页计算器、文本框验证、日历制作等实用功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述：

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

p{color:red}

</style>

此样式能影响所有使用p的段落。

3、外部样式表：将样式表写成一个扩展名为css的文件中，在页面中加入link比较

P{color:red;}

First.html

在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>

.pageWidth{margin:auto;width:600px}

#lay{height:400px;background:#fba}

table{text-align:center}

.fot{padding-top:5px;}

</style>

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>

<tr>

</tr>

<tr>

<td><font color="red">文本框填写内容不正确</font></td>

</tr>

<tr>

</select></td>

</tr>

<tr>

</tr>

<tr>

<td><input type="button" value="结果" οnclick="calc

()"/></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";

}

}调用代码

<tr>

</tr>

<tr>

<td><font color="red" style="visibility:hidden" id="mess">*文本框填写内容不正确</font></td>

</tr>

<tr>

</select></td>

</tr>

<tr>

</tr>

<tr>

</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>

#lay2{height:100px;width:150px}

</style>

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>

</html>

示例5：超链接实现javascript。

在href中写入javascript，就必须以javascript开头，后面接冒号，冒号后面写js代码、函数和void(0)。

Javascript:void(0)表示是一个死链接，#则会跳到页首的位置。

打开新窗口

function openWin(tag,obj){

obj.target=”_blank”;

obj.href=”/test.jsp?uid=”+tag;

obj.click();

}

</script>

慎用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>

function fun(){

document.forms[0].submit();

}

</script>

</head>

<body >

</form>

</body>

</html>

示例6：动态显示时间

在js中，所有动画的实现都需要用window对象的方法，setTimeout和setInterval，这个两个方法。

<html>

<head>

<title>

</title>

#lay{width:100px;height:30px;background:#fba}

</style>

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>

</html>

示例7：通过键盘的方向键控制层的移动。

解决问题的方法：

1、首先通过键盘事件，onkeydown、onkeyup和onkeypress，其中onkeypress无法获得功能键及小数字键的值。

2、如何获得按键的值，在这里可以通过event对象，event是javascript中关于事件的对象信息。

代码：

<html>

<head>

<title>

</title>

#lay{width:100px;height:30px;background:#fba;left:0px;position:relative;top:0px}

</style>

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>

</html>

注意，在要实现层的移动时，一定要对层进行定位，层默认的布局是static，如未指定位置，则层不会一定。

在这里的代码仅仅实现方向键向右移动时，层会移动，其余方向以及到边界问题大家自行补充。

示例8：选项卡的制作。

代码：

<html>

<head>

<style>

#lay{width:150px;height:30px;}

li{list-style:none;width:30px;float:left}

.now{background:#fba;}

</style>

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>

</head>

<body>

<div>

<ul >

</ul>

</div>

<div>

<li>first</li></ul>

<li>second</li>

</ul>

<li>third</li>

</ul>

</div>

</body>

</html>

示例9：给下列表添加年。

Dom：是操作html或者xml的标准方法。可以在不同的浏览器中都能运行。在dom中把所有元素都当作对象来处理。Dom的结构如下图所示：

代码1：

<html>

<head>

//第二种方法是通过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>

<!—这里是第一种方法

// var date = new Date();

// for(var i = 1900; i < date.getFullYear(); i ++ ){

// document.write("<option>" + i + "</option>");

// }

</script>

</select>

-->

</select>

</body>

</html>

示例10：如何动态添加表中的行。

代码：

<html>

<head>

<style>

.test{width:100px;height:30px;background:#fba}

</style>

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>

</tbody>

</table>

</body>

</html>