简单的网页效果

最新推荐文章于 2021-06-04 05:33:56 发布

王乾坤

最新推荐文章于 2021-06-04 05:33:56 发布

阅读量744

点赞数

分类专栏： java-wab

本文链接：https://blog.csdn.net/wangqiankun2010/article/details/24918071

版权

java-wab 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

好友列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style>
table {
	border: 2px solid #333;
	width: 200px;
	background: #CC6;
}
table td {
	text-align: center;
}
table div {
	background: #C6C;
	display: none;
}
table a {
	background: url(close.gif) no-repeat;
}
table a:link,table a:visited {
	color: #000;
	text-decoration: none;
	display: block;
}
.open {
	display: block;
}
.close {
	display: none;
}
.guanbi {
	background: url(close.gif) no-repeat;
}
.dakai {
	background: url(open.gif) no-repeat;
}
</style>
<script type="text/javascript">
	function listFriend(aNode) {
	/* 	获取到点击的节点对象，3个好友，知道点的是谁
		alert(aNode.innerHTML);
		获取与点击链接相对应的div节点对象，通过父标签，获取子标签 */
		var tdNode = aNode.parentNode;
		var divNode = tdNode.getElementsByTagName("div")[0];
		var divNode1 = tdNode.getElementsByTagName("div");
		/* 点击好友列表，展开好友信息，再次点击，关闭好友信息，采用预先定义样式来完成
		进行判断，判断这个div节点的className属性，如果这个属性值是open ,变成close，如果是close,变open
		实现打开一个，其余关闭的,获取到全部的div标签 */
		var allDiv = document.getElementsByTagName("div");
		var alla = document.getElementsByTagName("a");	//获取所有的a标签节点对象
		for ( var x = 0; x < allDiv.length; x++) {						//遍历数组
			//判断，遍历到的div节点，是不是我获取到的被点击的那个div节点
			if (allDiv[x] == divNode) {
				if (divNode.className == "open") {
					aNode.className = "guanbi"
					divNode.className = "close";
				} else {
					divNode.className = "open";
					aNode.className = "dakai";
				}
			} else {
				allDiv[x].className = "close";
				for ( var y = 0; y < alla.length; y++) {
					if (alla[y] != aNode)
						alla[y].className = "guanbi";
				}
			}
		}
	}
</script>
</head>
<body>
	<table cellspacing="0">
		<tr>
			<td><a href="javascript:void(0)" οnclick="listFriend(this)">亲朋好友</a>
				<div>杰克逊<br /> 梦露<br /> 乔丹<br /></div>
			</td>
		</tr>
		<tr>
			<td><a href="javascript:void(0)" οnclick="listFriend(this)">娱乐明星</a>
				<div>甘露露<br /> 刘亦菲<br /> 刘诗诗<br /></div>
			</td>
		</tr>

		<tr>
			<td><a href="javascript:void(0)" οnclick="listFriend(this)">体育好友</a>
				<div>顾拜旦<br /> 泰森<br /> 李永波<br /></div>
			</td>
		</tr>
	</table>
</body>
</html>

复选框的操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框的操作</title>
<style>
table {
	border: 1px solid #666;
	font-size: 18px;
}

table td {
	border: 1px solid #90F;
	text-align: center;
}

a:link {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
	text-decoration: none;
}
</style>

<script type="text/javascript">
	/*
	 复选框，使用checked属性，来实现选和不选的效果
	 DOM中复选框的checked属性是true，选择上了，属性是false，没有选上
	 */
	function allSelect() {
		//1.先获取到标签节点对象,通过复选框的name属性获得标签节点对象
		var checkboxNode = document.getElementsByName("price");
		//获取到的是数组
		//alert(checkboxNode.length);
		//遍历数组，全选效果，设置复选框的checked属性，属性值设置为true
		for ( var x = 0; x < checkboxNode.length; x++) {
			checkboxNode[x].checked = true;
		}
	}

	function noAllSelect() {
		//1.先获取到标签节点对象,通过复选框的name属性获得标签节点对象
		var checkboxNode = document.getElementsByName("price");
		//获取到的是数组
		//alert(checkboxNode.length);
		//遍历数组，全选效果，设置复选框的checked属性，属性值设置为true
		for ( var x = 0; x < checkboxNode.length; x++) {
			checkboxNode[x].checked = false;
		}
	}

	function reverseSelect() {
		//1.先获取到标签节点对象,通过复选框的name属性获得标签节点对象
		var checkboxNode = document.getElementsByName("price");
		//遍历数组，遍历的过程中，判断复选框的checked属性，如果属性是true，改成false
		for ( var x = 0; x < checkboxNode.length; x++) {
			if (checkboxNode[x].checked)
				checkboxNode[x].checked = false;
			else
				checkboxNode[x].checked = true;
		}
	}

	function allNoSelect() {
		//获取总控的复选框的节点对象
		var allselect = document.getElementsByName("quanxuan")[0];
		//获取全部的复选框，不包括总控
		var checkboxNode = document.getElementsByName("price");
		//遍历数组，遍历到的复选框节点的checked属性等于总控的复选框的checked属性
		for ( var x = 0; x < checkboxNode.length; x++) {
			checkboxNode[x].checked = allselect.checked;
		}
	}

	function getSum() {
		var sum = 0;
		//获取到用户勾选了谁	
		var checkboxNode = document.getElementsByName("price");
		//遍历数组，通过复选框的checked属性，来判断用户是否勾选，如果勾选了，获取value属性，求和计算
		for ( var x = 0; x < checkboxNode.length; x++) {
			if (checkboxNode[x].checked) {
				//checked属性为true，勾选的
				//通过标签的节点对象，获取的value属性，都是字符串
				sum = sum + parseInt(checkboxNode[x].value);
			}
		}
		// alert(sum);
		//获取到span节点对象
		var spanNode = document.getElementById("p");
		spanNode.innerHTML = sum;
		spanNode.style.color = "red";

	}
</script>
</head>

<body>
	<!--
  使用表格，div也行，做一个商品列表
  商品列表的前面是一个复选框
  自动选择勾选的商品
  全选/全不选/反选，计算按钮，计算出用户勾选的商品价格总格
 -->
	<table cellspacing="0" align="center">
		<tr>
			<td width="180"><input type="checkbox" name="quanxuan"
				οnclick="allNoSelect()" /> <a href="javascript:void(0)"
				οnclick="allSelect()">全选</a> <a href="javascript:void(0)"
				οnclick="noAllSelect()">全不选</a> <a href="javascript:void(0)"
				οnclick="reverseSelect()">反选</a></td>
			<td width="96">商品名</td>
			<td width="141">商品价格</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="price" value="3500" /></td>
			<td>笔记本</td>
			<td>3500</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="price" value="1300" /></td>
			<td>投影仪</td>
			<td>1300</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="price" value="52000" /></td>
			<td>欧米茄</td>
			<td>52000</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="price" value="3000" /></td>
			<td>劳斯莱斯</td>
			<td>3000</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="price" value="500" /></td>
			<td>布加迪</td>
			<td>500</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="price" value="200" /></td>
			<td>A380</td>
			<td>200</td>
		</tr>
		<tr>
			<td><input type="checkbox" name="price" value="234400" /></td>
			<td>别墅</td>
			<td>234400</td>
		</tr>
		<tr>
			<td colspan="2"><input type="button" value="计算总价" οnclick="getSum()" />
				<td><span id="p"></span></td>
			</td>
		</tr>
	</table>

</body>
</html>

表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单数据验证</title>
<style>
  table,td{ border:1px solid #CCC;}
</style>

<script type="text/javascript">
function checkUsername(){
 //选获取用户输入的用户名
 var username = document.regedit.username.value;
 var user_name = document.getElementById("user_name");
 //alert(username);
 //定义正则表达式进行验证
 var reg =/^[a-zA-Z]{4}$/;
 if(reg.test(username))
  {
	  user_name.innerHTML = "用户名合法";
	  user_name.style.color = "green";
	  return true;
  }else{
	  user_name.innerHTML = "用户非法";
	  user_name.style.color = "red";
	  return false;
  }
}

function checkPassword(){
  //获取密码框的信息
  var password = document.regedit.password.value;
  var user_password = document.getElementById("user_password");
  //定义正则，验证密码
  var reg = /^[0-9]{4}$/;
  if(reg.test(password)){
	  user_password.innerHTML = "密码正确";
	  user_password.style.color = "green";
	  return true;
  }else{
	  user_password.innerHTML = "密码不正确";
	  user_password.style.color = "red";
	  return false;
	 // var c = /[a-zA-Z0-9_]+@[a-zA-Z0-9]+(\\.[a-zA-Z]+)+/;
  }
  
}
function checkEmail(){
  //获取邮件框输入的内容
  var email = document.regedit.email.value;
  var reg = /^[a-zA-Z0-9_]+@[a-zA-Z0-9]+((\.)[a-zA-Z]+)+$/;
  var user_email = document.getElementById("user_email");
  if(reg.test(email)){
	 user_email.innerHTML = "邮件格式正确";
	 user_email.style.color = "green";
	 return true;
  }else{
	  user_email.innerHTML = "邮件格式不正确";
	 user_email.style.color = "red";
	 return false;
	  }
}

function checkTel(){
	var tel = document.regedit.tel.value;
	var user_tel = document.getElementById("user_tel");
	var reg = /^1[3458][0-9]{9}$/;
	if(reg.test(tel)){
	   user_tel.innerHTML = "手机号码合法";
	   user_tel.style.color = "green";
	   return true;
	}else{
	   user_tel.innerHTML = "手机号码不合法";
	   user_tel.style.color = "red";
	   return false;
	}
}

function reg(){
	if(checkUsername() && checkPassword() && checkEmail()&& checkTel()){
		document.regedit.action='http://192.168.3.250:10000';
		document.regedit.submit();
	}
}
</script>
</head>

<body>
  <form action="" method="post" name="regedit">
<table width="715" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3" align="center">用户注册</td>
  </tr>
  <tr>
    <td width="216" height="30" align="right">用户名</td>
    <td width="227" align="center"><input type="text"   name="username" οnblur="checkUsername()"/></td>
    <td width="264"><span id="user_name">用户名必须4个字母</span></td>
  </tr>
  <tr>
    <td height="27" align="right">密码</td>
    <td align="center"><input type="password"  name="password" οnblur="checkPassword()"/></td>
    <td><span id="user_password">密码必须4个数字</span></td>
  </tr>
  <tr>
    <td height="27" align="right">电子邮件</td>
    <td align="center"><input type="text" name="email"  οnblur="checkEmail()"/></td>
    <td><span id="user_email"></span></td>
  </tr>
  <tr>
    <td height="29" align="right">密保手机</td>
    <td align="center"><input type="text"  name="tel" οnblur="checkTel()"/></td>
    <td><span id="user_tel"></span></td>
  </tr>
  <tr>
    <td> </td>
    <td align="center"> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td align="center"><input type="button" value="注册"  οnclick="reg()"/></td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td align="center"> </td>
    <td> </td>
  </tr>
</table></form>
</body>
</html>

动态时间的实现效果

<!DOCTYPE html>
<html>
  <head>
    <title>01-window.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  <body>
  	<input type="text" id="one" style="width:300px;" >
  	<input type="button" id="two" value="停止" οnclick="stop();" >
	<input type="text1" id="three" style="width:300px;" >
  </body>
</html>
<script type="text/javascript">
  //================================操作input的值================================================
  	//1 获得input对象
		var text1 =	document.getElementById("three");
	//2 改变input对象的value属性
		text1.value = "123";
//===========================setInterval 定时器==============================================================	
//定时器:  第一个参数 是要执行的方法 第2个参数 每隔多长毫秒执行一次.
       //返回值: 定时器的ID
	/*var ID=  	setInterval(abc,3000);
	
	function abc(){
		alert('aaa');
	} */
//--------------------------------例子 在文本框中 显示时钟.----------------------------------------------------------		
		//1 获取当前时间
		function fun1(num){ //为了保证 数字是两位数. 如果小于10 那么补0
		if(num < 10){
			return "0"+num;
		}else{
			return num;
		}
	}
	function fun2(week){
		var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
				//	 0       1      2      3       4      5      6 
		return arr[week];
	}
	//获取 当前时间
		function getDate(){
		var date = new  Date(); //创建日期对象
		var year = date.getFullYear(); //获取年
		var month = date.getMonth()+1; // 获取月份 0~11 
		var day = date.getDate(); // 获取日
		var hour = date.getHours(); //时
		var min = date.getMinutes();//分
		var sec = date.getSeconds();//秒
		var week = date.getDay();//星期
		//获取input
		var text =	document.getElementById("one");
		//将input中的值改为时间
		text.value = year+"/"+fun1(month)+"/"+day+" "+hour+":"+min+":"+sec+" "+fun2(week);
		}
		getDate();//调用方法体
		//2 使用定时器运行获取时间方法 每隔一秒运行一次
	var ID = setInterval(getDate, 1000);
	function stop(){
		//清除定时器 ,参数是定时器的ID
		clearInterval(ID);
	}
		
	
	</script>

王乾坤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的网页效果

好友列表table { border: 2px solid #333; width: 200px; background: #CC6;}table td { text-align: center;}table div { background: #C6C; display: none;}table a { background: url(close.gif) no-r
复制链接

扫一扫

专栏目录