简单的网页效果
来源：互联网 发布：淘宝店铺经营范围 编辑：程序博客网 时间：2024/05/16 00:56
好友列表
<!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属性，属性值设置为truefor ( var x = 0; x < checkboxNode.length; x++) {checkboxNode[x].checked = true;}}function noAllSelect() {//1.先获取到标签节点对象,通过复选框的name属性获得标签节点对象var checkboxNode = document.getElementsByName("price");//获取到的是数组//alert(checkboxNode.length);//遍历数组，全选效果，设置复选框的checked属性，属性值设置为truefor ( var x = 0; x < checkboxNode.length; x++) {checkboxNode[x].checked = false;}}function reverseSelect() {//1.先获取到标签节点对象,通过复选框的name属性获得标签节点对象var checkboxNode = document.getElementsByName("price");//遍历数组，遍历的过程中，判断复选框的checked属性，如果属性是true，改成falsefor ( var x = 0; x < checkboxNode.length; x++) {if (checkboxNode[x].checked)checkboxNode[x].checked = false;elsecheckboxNode[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 那么补0if(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();//星期//获取inputvar 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(){//清除定时器 ,参数是定时器的IDclearInterval(ID);}</script> 0 0
- 简单的网页效果
- 一个简单的网页选项卡效果菜单
- 最简单实现网页返回效果的js代码
- 使用Bootstrap编写一个简单的网页轮播图效果
- 网页的多媒体效果
- JS实现网页漂浮广告效果简单
- 网页分步骤效果简单实现
- 感觉金鱼的这个效果要比西西给的那个简单-网页弹出框
- jQuery和css的联合使用，简单的网页效果展示
- 网页变换效果的实现
- 网页翻页效果的实现
- 网页的雪花飘落效果
- 网页中常用的效果
- 手机自适应的网页效果
- 网页用 JavaScript DOM 仿作QQ的窗口抖动效果，超简单~~~
- 网页用 JavaScript DOM 仿作QQ的窗口抖动效果，超简单~~~
- 手机网页示例2——一个简单的顶上bar图片切换效果
- 一个简单的网页系统Tour（终结） 和效果展示图
- linux僵尸进程的处理
- python cookbook（一） 文本
- 电商 Fab 或将进行新一轮大规模裁员
- qt中xml文件的简单读取
- 一个关于选择的小问题
- 简单的网页效果
- Android之Adapter用法总结
- 由二叉树的两个遍历序列求另一个遍历序列
- boost的shared_ptr循环引用
- ZOJ-1082
- eclipse maven plugin 插件 安装 和 配置
- 建立完整游戏AI实践之1
- 黑马程序员_阶段练习&访问修饰符
- IOS学习之斯坦福大学 IOS开发课程笔记(第一课)
