[html] <object id=S style=”LEFT: 0px; WIDTH: 3 […]
Javascript画图
|
1 2 3 4 5 6 7 |
<object id=S style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px" height=240 width=392 classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6"> </object> <script> S.DrawingSurface.ArcDegrees(0,0,0,30,50,60); S.DrawingSurface.ArcRadians(30,0,0,30,50,60); S.DrawingSurface.Line(10,10,100,100); </script> |
文件上传过程中判断文件类型
[html] <input type=file onchange=”alert(this.v […]
复选框的全选，多选，全不选，反选
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<form name=hrong> <input type=checkbox name=All onclick="checkAll('mm')"> 全选 <br/> <input type=checkbox name=mm onclick="checkItem('All')"> <br/> <input type=checkbox name=mm onclick="checkItem('All')"> <br/> <input type=checkbox name=mm onclick="checkItem('All')"> <br/> <input type=checkbox name=mm onclick="checkItem('All')"> <br/> <input type=checkbox name=mm onclick="checkItem('All')"> <br/> <br/> <input type=checkbox name=All2 onclick="checkAll('mm2′)"> 全选 <br/> <input type=checkbox name=mm2 onclick="checkItem('All2′)"> <br/> <input type=checkbox name=mm2 onclick="checkItem('All2′)"> <br/> <input type=checkbox name=mm2 onclick="checkItem('All2′)"> <br/> <input type=checkbox name=mm2 onclick="checkItem('All2′)"> <br/> <input type=checkbox name=mm2 onclick="checkItem('All2′)"> <br/> </form> <script LANGUAGE="JavaScript"> function checkAll(str) { var a = document.getElementsByName(str); var n = a.length; for (var i = 0; i < n; i++) a[i].checked = window.event.srcElement.checked; } function checkItem(str) { var e = window.event.srcElement; var all = eval("document.hrong." + str); if (e.checked) { var a = document.getElementsByName(e.name); all.checked = true; for (var i = 0; i < a.length; i++) { if (!a[i].checked) { all.checked = false; break; } } } else all.checked = false; } </script> |
身份证的验证
[html] ?<script> ?function isIdCardNo(num) ? ? ? […]
email地址的判断
<script> function ismail(mail) { return(new RegEx […]
浏览器判断
判断浏览器的类型 window.navigator.appName 判断ie的版本 window.naviga […]
字符验证类—正则表达式
判断字符全部由a-Z或者是A-Z的字字母组成 ? ? ?<input onblur=”if( […]
表单验证类
所有的表单的值都不能为空 ? ? ? ?<input onblur=”if(this.val […]
时间格式验证类
2.1 短时间，形如 (13:04:06) ? ? ? ?function isTime(str) ? ? ? […]
数字验证类—正则表达式
整数 /^(-|+)?d+$/.test(str) 大于0的整数 （用于传来的ID的验证) /^d+$/.te […]
Javascript正则表达式验证
—–数字验证类 整数 /^(-|+)?d+$/.test(str) 大于0的整数 （用 […]
下拉菜单—滑动型
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<style> #newcontainer { /*position:relative;*/ width:750px; text-align:left; margin:0 auto; margin-bottom:10px; margin-top:0px; } #newnav { width:750px !important; width:750px; height:27px; margin:0; padding:0; border-right:1px solid #d8d8d8; border-left:1px solid #d8d8d8; } #newnav * { padding:0; margin:0; list-style:none; overflow:hidden; } #newnav ul { width:100%; line-height:28px; background:url(../images/newnav_bg.jpg) repeat-x top; } #newnav li,#newnav li.nr { float:left; display:inline; text-align:center; width:85px; height:27px; } #newnav li.on { background:url(../images/newnav_libg1.jpg) repeat-x; width:85px; font-weight:bold; } #newnav li.end { background:url(../images/newnav_end1.jpg) repeat-x; width:91px; font-weight:bold; } #newnav a { display:block; width:85px; height:27px; } #newnav li a:link { background:url(../images/newnav_abg.jpg) no-repeat right; text-decoration:none; color:#000; } #newnav li a:visited { background:url(../images/newnav_abg.jpg) no-repeat right; color:#000; text-decoration:none; } #newnav li a:hover { background:url(../images/newnav_libg1.jpg) repeat-x; font-weight:bold; color:#000; text-decoration:none; } #newnav li a:actived { background:url(../images/newnav_abg.jpg) no-repeat right; color:#000; text-decoration:none; } </style> <script> function showSubType(type) { for (var i=1; i<=7; i++) { var td = document.getElementById("td"+i); if (td.className == "nav_select") td.className = "nav_normal"; } document.getElementById("td"+type).className = "nav_select"; var sHTML = " "; for (var i=0; i<g_arrResType[type-1].length-1; i++) { var nnn = g_arrResType[type-1][i].split("|"); sHTML += "<a href='" + nnn[1] + "' class='xtitle'>" + nnn[0] + "</a> | "; } document.getElementById("sub").innerHTML = sHTML; } var g_arrResType = [ [], ["公司论坛|bbs.do","新闻通知|news.do?do=list","考勤统计|timecard.do?do=showStat","通 讯 录|user.do?do=list",], ["工作日志|log.do?do=list","工作管理|work.do?do=list","项目查看|project.do?do=list","计划查看|plan.do?do=list",], ["信息中心|user.do?do=my","薪资查询|wage.do?do=login","历史登录|iprecord.do","修改资料|user.do?do=modifyInfo","修改密码|user.do?do=modifyPwd","个人考勤|timecard.do?do=list","短信息|pm.do?do=inbox",], ["照片中心|photo.do?do=list","我的照片|photo.do?do=mylist","添加照片|photo.do?do=add",], [], [], ]; </script> <table cellspacing='0' cellpadding='0' width='750' align='center' border='0'> <tr> <td> <div id="newcontainer" align="center"> <div id="newnav"> <ul> <li id='td1'><a href='main.do' onmouseover="showSubType(1)" class='xtitle'>首 页</a></li> <li id='td2'><a href='#' onmouseover="showSubType(2)" class='xtitle'>公司信息</a></li> <li id='td3'><a href='#' onmouseover="showSubType(3)" class='xtitle'>HIS项目</a></li> <li id='td4'><a href='#' onmouseover="showSubType(4)" class='xtitle'>个人信息</a></li> <li id='td5'><a href='#' onmouseover="showSubType(5)" class='xtitle'>靓图闪秀</a></li> <li id='td6'><a href='admin.do' onmouseover="showSubType(6)" class='xtitle'>管理维护</a></li> <li id='td7'><a href='logout.do' onmouseover="showSubType(7)" class='xtitle'>退 出</a></li> </ul> </div> <div id='sub'> </div> </div> </td> </tr> </table> |
AjaxAlert信息提示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<head> <script type="text/javascript"> function AjaxAlert(txt) { var eSrc = (document.all) ? window.event.srcElement : arguments[1]; var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "0px"; shield.style.top = "0px"; shield.style.width = "100%"; shield.style.height = ((document.documentElement.clientHeight > document.documentElement.scrollHeight) ? document.documentElement.clientHeight : document.documentElement.scrollHeight) + "px"; shield.style.background = "#333"; shield.style.textAlign = "center"; shield.style.zIndex = "10000"; shield.style.filter = "alpha(opacity=0)"; shield.style.opacity = 0; var alertFram = document.createElement("DIV"); alertFram.id = "alertFram"; alertFram.style.position = "absolute"; alertFram.style.left = "50%"; alertFram.style.top = "50%"; alertFram.style.marginLeft = "-225px"; alertFram.style.marginTop = -75 + document.documentElement.scrollTop + "px"; alertFram.style.width = "450px"; alertFram.style.height = "150px"; alertFram.style.background = "#ccc"; alertFram.style.textAlign = "center"; alertFram.style.lineHeight = "25px"; alertFram.style.zIndex = "10001"; strHtml = "<ul style=\"list-style:none;margin: 0px;padding: 0px;width:100%\">"; strHtml += "<li style=\"background: #73A2D6;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid # 9FBFE3;\">[系统提示]</li>"; strHtml += " <li style=\"background: #fff;text-align:center;font-size: 12px;height: 120px;line-height: 120px;border-left: 1px solid #9FBFE3;border-right:1px solid # 9FBFE3;\">" + txt + "</li> "; strHtml += " <li style=\"background: #E6EEF7;text-align: center;font-weight: bold;height: 25px;line-height: 25px; border: 1px solid #9FBFE3;\"><input type= \"button\" value = \"返 回\" id = \"do_OK\" onclick = \"history.back();\" /> </li> "; strHtml += "</ul> "; alertFram.innerHTML = strHtml; document.body.appendChild(alertFram); document.body.appendChild(shield); this.setOpacity = function(obj, opacity) { i f(opacity >= 1) opacity = opacity / 100; try { obj.style.opacity = opacity; } catch (e) {} try { if (obj.filters.length > 0 && obj.filters("alpha")) { obj.filters("alpha").opacity = opacity * 100; } else { obj.style.filter = "alpha(opacity = \"" + (opacity * 100) + "\")"; } } catch (e) {} } var c = 0; this.doAlpha = function() { i f(++c > 20) { clearInterval(ad); return 0; } setOpacity(shield, c); } var ad = setInterval("doAlpha()", 1); this.doOk = function() { //alertFram.style.display = "none"; //shield.style.display = "none"; document.body.removeChild(alertFram); document.body.removeChild(shield); eSrc.focus(); document.body.onselectstart = function() { return true; } document.body.oncontextmenu = function() { return true; } } document.getElementById("do_OK").focus(); eSrc.blur(); document.body.onselectstart = function() { return false; } document.body.oncontextmenu = function() { return false; } } </script> </head> <body onload="AjaxAlert('不允许上传的文件类型')" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> </body> |
收集的20个具有代表性web2.0网站配色
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 |
<head> <title>web2.0 color</title> <style type="text/css"> body{ margin:20px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:12px; } .style1{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #96C2F1; background-color: #EFF7FF } .style1 h5{ margin: 1px; background-color: #B2D3F5; height: 24px; } .style2{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #9BDF70; background-color: #F0FBEB } .style2 h5{ margin: 1px; background-color: #C2ECA7; height: 24px; } .style3{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #BBE1F1; background-color: #EEFAFF } .style4{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #CCEFF5; background-color: #FAFCFD } .style5{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #FFCC00; background-color: #FFFFF7 } .style6{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #92B0DD; background-color: #FFFFFf } .style6 h5{ margin: 1px; background-color: #E2EAF8; height: 24px; } .style7{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #A9C9E2; background-color: #E8F5FE } .style8{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #E3E197; background-color: #FFFFDD } .style9{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #ADCD3C; background-color: #F2FDDB } .style10{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #F8B3D0; background-color: #FFF5FA } .style11{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #D3D3D3; background-color: #F7F7F7 } .style12{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #BFD1EB; background-color: #F3FAFF } .style13{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #FFDD99; background-color: #FFF9ED } .style14{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #CACAFF; background-color: #F7F7FF } .style15{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #A5B6C8; background-color: #EEF3F7 } .style16{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #CEE3E9; background-color: #F1F7F9 } .style17{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #CAE3FF; background-color: #F4F9FF } .style18{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #C9D9EE; background-color: #ECF8FF } .style19{ width: 800px; height: 100px; margin: 0px auto; margin-bottom:20px; border:1px solid #5C9CC0; background-color: #F2FAFF } h5{color:#CCCCCC;margin-left:680px} a{color:#CCCCCC;text-decoration:none} a:hover{color:#666666;text-decoration:underline} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <div class="style1"><h5></h5></div> <div class="style2"><h5></h5></div> <div class="style6"><h5></h5></div> <div class="style3"></div> <div class="style4"></div> <div class="style5"></div> <div class="style7"></div> <div class="style8"></div> <div class="style9"></div> <div class="style10"></div> <div class="style11"></div> <div class="style12"></div> <div class="style13"></div> <div class="style14"></div> <div class="style15"></div> <div class="style16"></div> <div class="style17"></div> <div class="style18"></div> <div class="style19"></div> </body> |
CSS垂直菜单
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<style type="text/css"> #vertmenu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; width: 160px; padding: 0px; margin: 0px; } #vertmenu h1 { display: block; background-color:#FF9900; font-size: 90%; padding: 3px 0 5px 3px; border: 1px solid #000000; color: #333333; margin: 0px; width:159px; } #vertmenu ul { list-style: none; margin: 0px; padding: 0px; border: none; } #vertmenu ul li { margin: 0px; padding: 0px; } #vertmenu ul li a { font-size: 80%; display: block; border-bottom: 1px dashed #C39C4E; padding: 5px 0px 2px 4px; text-decoration: none; color: #666666; width:160px; } #vertmenu ul li a:hover, #vertmenu ul li a:focus { color: #000000; background-color: #eeeeee; } </style> <div id="vertmenu"> <h1>Navigation</h1> <ul> <li><a href="#" tabindex="1">Home</a></li> <li><a href="#" tabindex="2">About Us</a></li> <li><a href="#" tabindex="3">Computing</a></li> <li><a href="#" tabindex="4">Web Sites</a></li> <li><a href="#" tabindex="5">Games</a></li> <li><a href="#" tabindex="6">Links</a></li> </ul> </div> |
CSS菜单－－下拉菜单
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!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=gb2312" /> <title>CSS菜单－－下拉菜单</title> <style> body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:600px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } </style> </head> <body> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理 <div class="list"> <a href="#">我的CHINAY</a><br /> <a href="#">我的首页</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> <a href="#">我的日志</a><br /> <a href="#">我的相册</a><br /> <a href="#">我的收藏</a><br /> </div> </li> </ul> </div> </body> </html> |
JS显示密码强度
密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有又有可能会给我们造成不必要的损失。作为网站设计者, […]
尤里·加加林进入太空46周年纪念
尤里·阿列克谢耶维奇·加加林 (Yury Alekseyevich Gagarin) 1934年3月9日生 […]
TiSP
描述:Tisp 智能马桶服务（07年愚人节玩笑） 介绍:按照惯例Google每年愚人节都会推出一款不现实的服务 […]
30 个令人印象深刻的单页网站
Who said websites need more than one page ? The one pag […]
Persian New Year
说明:Persian New Year 波斯新年 背景:按照波斯历法，3月21日是春季的第一天，也是新的一年的 […]
CSS超级技巧大放送合集
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用cs […]
CSS锦囊
在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易 […]
JavaScript：世界上最被误解的语言
原文地址：<a href=”http://javascript.crockford.com/ […]