简单的网页效果
2014-05-03 14:41
218 查看
好友列表
<!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)" onclick="listFriend(this)">亲朋好友</a>
<div>杰克逊<br /> 梦露<br /> 乔丹<br /></div>
</td>
</tr>
<tr>
<td><a href="javascript:void(0)" onclick="listFriend(this)">娱乐明星</a>
<div>甘露露<br /> 刘亦菲<br /> 刘诗诗<br /></div>
</td>
</tr>
<tr>
<td><a href="javascript:void(0)" onclick="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"
onclick="allNoSelect()" /> <a href="javascript:void(0)"
onclick="allSelect()">全选</a> <a href="javascript:void(0)"
onclick="noAllSelect()">全不选</a> <a href="javascript:void(0)"
onclick="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="计算总价" onclick="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" onblur="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" onblur="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" onblur="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" onblur="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="注册" onclick="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="停止" onclick="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
- 最简单实现网页返回效果的js代码
- HTML网页中插入输入框，输入框内容或代码可点击"运行代码"运行，在浏览器看到运行输入框内代码效果。此HTML代码由表单代码textarea和简单JS代码实现。 HTML代码： <textarea n
- jQuery实现简单的网页换肤效果示例
- 网页简单闹钟效果
- jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
- 网页效果-简单的时间轴实现
- jquery简单实现网页层的展开与收缩效果
- 简单网页效果--固定div位置
- 使用Bootstrap编写一个简单的网页轮播图效果
- 树莓派实现web控制GPIO教程（安装方法更简单，网页效果更好）
- 强大的js插件jqeuryUI做网页对话框效果！简单
- C#.Net网页加载等待效果漂亮并且简单
- 一个简单的全屏图片上下打开显示网页效果示例
- 网页用 JavaScript DOM 仿作QQ的窗口抖动效果，超简单~~~
- 一个简单的网页系统Tour（终结） 和效果展示图
- js+css简单实现网页换肤效果
- 强大的jquery插件jqeuryUI做网页对话框效果！简单
- JS实现自定义简单网页软键盘效果代码
- js实现简单的网页换肤效果