kkllmey
- 浏览: 102084 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
lishali12345：
深有同感啊！共同祝福，共同成长！
JavaEye有感 -
xly_971223：
最简单的方式是设cookie，cookie的path设置成你的 ...
二个Web程序共用一个用户信息 -
javazhujf：
SSO有很多实现方法，简单的方法可以用db保存user信息
二个Web程序共用一个用户信息
==========================================================CSS样式
1.内嵌样工 2.·行内样式 3.外部样式
导入外部样式表: <style>@import mycss.css</style>
链接外部样式表(不用加style标记): <head><link rel="stylesheet" type="text/css" href="myCss.css"></head>
<head>
<style type="text/css">
p{color:red;font-family:"隶书";font-size:24px;}
.h2{color:blue;font-family:"隶书";font-size:30px;}
</style>
</head>
<body>
<h2 class="h2">静夜思</h2>
<p>床前明月光</p>
</body>
=================样式属性====================
文本属性 :
font-size ----文字大小
font-family ----字体
font-style ----字体样式（细，粗）
color ----字体颜色
text-align ----文字对齐方式（center）
text-decoration:none 无下划线
text-decoration:overline 有下划线
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本（无法运行在IE和Opera中）。
背景属性:
background-color ---设置背景颜色
background-image ---设置背景图片
background-repeat ---设置一个指定的背景图像如何被重复显示
可取的值有：repeat(铺满整个区域，默认情况)，no-repeat(不平铺)，repear-x(只在水平方向铺)
repeat-y(只在垂直方向平铺)
表格也可有背景图片样式
td{background-image:url(aa.gif);backgound-repeat:no-repeat;}
方框属性：
margin-top 设置对象的上边框
(边界属性) margin-right 设置对象的右边框
margin-bottom
margin-left
例子
四个边距均为10px：
h1 {margin: 10px}顶边距和底边距为10px，左边距和右边距是父元素宽度的2%：
h1 {margin: 10px 2%}顶边距为10px，左边距和右边距是父元素宽度的2%，底边距是-10px：
h1 {margin: 10px 2% -10px}顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：
h1 {margin: 10px 2% -10px auto}
<UL> :ul{border:1px solid red;}
<LI> :li{list-style:url(img\dot_yellow.gif);display:inline;border:1px solid blue;margin:0px 10px;}
//display:inline 水平显示每项
//border:1px solid blue; 每项的背景边框为1px，细线，蓝色
//margin:0px;10px; 上下边距为0，左右为10
<UL>
(边框属性) border-style:deshed(虚线) 边框的样式
border-width:1px; 边框的宽度
border-color:red 边框的颜色
(填充属性) padding-top 设置内容与上边框之间距离
padding-right 设置内容与右边框之间距离
padding-bottom
padding-left
方框属性案例：--------
<style type="text/css">
table{ margin-top:100px;margin-left:100px;} --整个table表中应用对齐方式
tr{background:yellow} --每行应用背景颜色
td{border-style:solid;border-width:11px;padding-top:11px;border-color:red;} ----每个单元格设置边框属性(必须设置border-style，才能显示边框)dashed:虚线
</style>
<style type="text/css">
tr{background:yellow;}
td{border-right-style:dashed;border-right-width:3px;border-right-color:red;}
</style>
文本框设置边框:
<style>
.border{border-width:1px;border-color:red;border-style:solid;width:100px;background:red;text-align:center;color:blue;}
</style>
为Button按钮设置背景图片
<style>
.button{background:url(img\login-sm2.gif);padding:0px;border:0px;width:100px;height:33px;};//padding:填充为0;border：边框为0
</style>
---------------------<DIV>透明度----------------------------------------
style="position:absolute;z-index:20; cursor:hand; left:expression(window.screen.width-40); top:115px; width:15px;filter:alpha(opacity=80);"
仅支持 FF
<script>document.getElementById("Layer1").style.opacity = "0.5";</script>
IE Only
<script>document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";</script>
-------------------------------windwos浏览器对象----------------------------------------
window.location.assign('ss.htm');相当于超链接
-----------------特殊样式-----------------------------
A:link {color:red} 未被访问的链接样式，红色
A:visited{color:green} 已被访问过链接样式，绿色
A:hover {color:yellow} 鼠标悬浮在链接上时的样式，黄色
A:active {color:blue} 鼠标正在接下时的颜色
<style type="text/css">
<!--
a:hover{
cursor: help; -----------设置当前鼠标的指针
}
-->
</style>
</head>
====================================================实现超链接效果
nClick="location.href='ss.jsp'"
------------------------------------
其中的"help"可以换成以下内容
hand 手形
crosshair 十字形
text 文本形
wait 沙漏形
move 十字箭头形
help 问号形
e-resize 右箭头形
n-resize 上箭头形
nw-resize 左上箭头形
w-resize 左箭头形
s-resize 下箭头形
se-resize 右下箭头形
sw-resize 左下箭头形
=======================================DOM编程－document对象 (JavaSript)======================
doucment对象的常用属性和方法介绍：
document.bgColor=red;
document.getElementById();
document.getElementsByName();//此方法获得相同名称的控件 ;
document.all["check"] //得到所有为check的复选框
document.getElementById("myDiv").style.pixelTop+=10; //pixelTop此时div的top值,不加px;
//让层隐藏，显示:
myDiv.style.display="block" 或="none"
//窗口滚动事件
window.onscroll=move; // move:自已写的方法
//判断是否为IE浏览器
var NS = (document.layers) ? 1 : 0; //如果layers不为"undefined"( null ) 条件真
var IE = (document.all) ? 1: 0; //如果document.all null不为null 条件真
//效果(隐藏行)
var table=document.getElementById("mytable");
table.rows[0].style.display="none";
//在javaScript中 if (1) 这个条件也为true
//IE中，每隔1毫秒调用一个方法
window.setInterval("move()",1);
//Math类
Math.ceil(12.1) :13 返加>=这个数的最小整数
Math.floor(12.1) : 12 返加<=这个数的最大整数
Math.floor(-9.5) : -10
Math.ceil(-9.5) :-9
000000000000000000会浮动的广告000000000000000000000000000000000000000000000000
<html>
<head>
<title>
js效果
</title>
<script language="javascript">
var x=true;
var y=true;
function move()
{
var s_w=document.body.offsetWidth;
var s_h=document.body.offsetHeight;
var obj=document.getElementById("fly");
var d_w=obj.style.pixelWidth;
var d_h=obj.style.pixelHeight;
var d_l =obj.style.pixelLeft;
var d_t=obj.style.pixelTop;
x=(d_l<=0||d_l>=s_w-d_w?!x:x);
y=d_t<=document.body.scrollTop||d_t>=document.body.scrollTop+s_h-d_h?!y:y;
obj.style.pixelLeft=x?(d_l+1):(d_l-1);
obj.style.pixelTop=y?(d_t+1):(d_t-1);
setTimeout("move()",10);
}
var tmp=0;
window.onscroll=function scro()
{
document.getElementById("fly").style.pixelTop+=document.body.scrollTop-tmp;
tmp=document.body.scrollTop;
}
</script>
</head>
<body onLoad="move()">
<div id="fly" style="z-index:1;background:red;width=200px;height:50px;position: absolute; left:2px; top: 2px;"></div>
<script language="javascript" type="text/javascript">
for(var i=0;i<=100;i++){document.writeln(i+"<br>");}
</script>
</body>
</html>
00000000000000000000000000000000动态增删表格0000000000000000000000000000000000000000
<script language="javascript">
function deleteRow(index){
var tableObj=document.getElementById("mytable");
tableObj.deleteRow(index);
}
function addRow(){
var tableObj=document.getElementById("mytable");
var newRowObj=tableObj.insertRow(tableObj.rows.length);
var newColName=newRowObj.insertCell(newRowObj.cells.length);
var newColAge=newRowObj.insertCell(newRowObj.cells.length);
var newColButton=newRowObj.insertCell(newRowObj.cells.length);
newColName.innerHTML=document.getElementById("newName").value;
newColAge.innerHTML=document.getElementById("newAge").value;
newColButton.innerHTML='<input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length-1)+')">';
}
</script>
0000000000000000000000000000000000000实现全选项果00000000000000000000000000000000000
<script language="javascript">
function checkAll(boolValue)
{
var checks=document.getElementsByName("MyChecks");
{
for(var i=0;i<checks.length;i++)
{
if(checks[i].type=="checkbox") //如果为复选框
{
checks[i].checked=boolValue;
}
}
}
}
</script>
===========================================表单验证=============================
String 对象
创建String 对象 (String 对象只有一个属性length)
var str="这也是String对象" ;
var str=new String("aaaa");
str.length;
str.indexOf("子字符串",起始位置); 如果找到了，返回它的下标，否则没找到 返回-1;
str.charAt(0); 返回指索引的字符
str.substring(index1,index2); 返回位index1 和 index2之间的字符串
str.substr("index",count) ; 返回从index开始，截取count个字符
str.toLowerCase() ;小写
str.toUpperCase(); 大写
创建 数组
var provin=new Array("河北","山东","黑龙江");
动态为下拉列表加选项
var obj=document.myForm.selectDiFan;
var newE=document.createElement("option"); 创建的对象为 option 类型
newE.setAttribute("value",provin[0]); //对象的value属性：河北
newE.innerText=provin[0]; //对象标签里的值:<option>河北</option>
obj.appendChild(newE); //把对象加入obj（下接列表对象）中
//清空下拉列表里的所有选 项 document.frm.selectDiFan.innerHTML="";
--------------------------------------- 动态为下拉加选项 示例:-------------------
<select size="1" name="provins" onchange="changeCity(this);"></select>
function changeCity(obj)
{
document.frm.city.innerHTML="";
var citys; //数组
switch(obj.value)
{
case "河北":
citys=hebei; //hebei是数组
break;
case "山东":
citys=shandong;
break;
case "黑龙江":
citys=heilongjiang;
break;
}
for(var i=0;i<citys.length;i++)
{
var e=document.createElement("option");
e.setAttribute("value",citys[i]);
e.innerText=citys[i];
document.frm.city.appendChild(e);
}
动态为下拉加选项示例:-------------------
文本框对象<input type="text" onBlur="move()" onFocues="move()" onChange="move()">:
事件: onBlur 失去焦点
onFocus 得到焦点
onChange 文本框的值改变时
方法: focus() 让文本框得到焦点
select() 选中文本框中的内容，突出显示输入区域
属性: value 设置或获得一个文本框中的值
表单
document.forms[0].txtName.value
document.forms[0].elements[0] //第0个表单，第0个元素
---------------制作 按下 回车键 调用Tab键的效果
键盘事件：onKeyDown
function checkName()
{
//如果为13，就是按下回车 （因为回车键的ASCII码是13）
if(event.keyCode==13&&event.srcElement.type !="submit") //event.srcElement.type得到按下键时有焦点的按键类型
{
event.keyCode=9; (Tab键的ASCII码是 :9)
}
}
1.<input type="text" name="txtName" onKeyDown="checkName()">
2.<script>document.onKeyDown= checkName </script> //不用在<input >里写了，这会应用到整个页面
//修改标签里的值:
myDiv.innerHTML="<font color="red">用户名不能为空 </font>";
myDiv.innerText ="用户名不能为空 "
//// 验证 用户名是否有数字
1. for(i=0;i<strName.length;i++)
{
ch=strName.charAt(i);
if(ch>=0){ alert("不能包含数字");}
return false;
}
return true;
2. if(ch>='0'&&ch<='9') 这时进行决断时必须二个条件都写上，因为如果加引号，则进行ASCII比较，
有的字符的ASCII的大于'0'的ASCII码;
////页面加载时让 文本框 得到焦点
<body onLoad="document.myForm.txtName.focus()">
---------------------------------------------------------------------------------------------------------------------------------
－－－－－－－－－－－<marquee> ... </marquee>
移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等
方向
<direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移！</marquee>
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>来回走</marquee>
循环
<loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>
速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>
延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee>
面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>
－－－－－－－－－－<iFrame>标签
<iframe src="http://www.sina.com" width="300" height="200"></iframe>用于包含一个网页，相当于框架
------------------------------在javaScript中使用正则表达式----------------------------------------
1.function checkName(obj)
{
//用户名必须以字母开头，最小6位
if(obj.value.length==0){alert('用户名不能为空');return ;}
if(obj.value.length<6){alert('用户名不能少于6位');return ;}
var regu = "^([a-zA-Z]+[_0-9a-zA-Z@.-]*)$"
var re = new RegExp(regu);
if( obj.value.search( re ) != -1 ){
return true;
}else{
window.alert( "请使用规范的会员名！" );
return false;
}
}
2.function checkName(obj)
{
//以字母开头
var reg=/^[A-Za-z]+$/;
if(！reg.test(userName.value.charAt(0))){
alert("会员名必须以字母开头");
}
}
-------------------js是获取日期如下:
<script language="javascript">
var dt = new Date();
m=dt.getMonth()+1;//获得月份
wk=dt.getDay(); //获取星期
d=dt.getDate()+1;//获取日
y=dt.getFullYear(); //获取年(四位)
document.write(m + "月" + d + "日 星期" + wk + " " + y + "年" );
</script>
-----------------------------------------------------------------------this.setCapture() 和 this.releaseCapture()
web开发和windows开发最大的区别就是windows开发是有状态的,而web开发是无状态的,在windows中,一切操作都可以由程序来控制 ,除非强制执行ctrl+alt+del;但web操作就不一样了,即使执行很重要的操作,用户一点击浏览器关闭按钮,就将前面操作成果化为乌有.尽管可以在onunload事件中加些代码,让用户可以选择是否退出,但不能从根本上解决问题!
前几天,从网上看到setCapture方法,了解了一下,大体是这样的意思,当在IE文档某个区域中使用了这个方法,并且写了onclick或者onmouse***等有关的鼠标事件方法,那么它就会监视相应的鼠标操作,即使你的鼠标移出了IE,它也一样能捕获到.如果你在某div中的onclick事件中写了一个alert命令,这时,你点击的关闭按钮,它也一样会弹出alert窗口.releaseCapture与setCapture方法相反,释放鼠标监控.
利用这个特性,我们可以延缓IE的关闭窗口等破坏性操作,将一些重要的操作能够在破坏性操作执行之前得到处理.
有一点遗憾:setCapture和releaseCapture 不支持键盘事件.只对onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout这样的鼠标事件起作用.
----------------------------------------------------------------系统时间-------------------------------
currdate=new Date();
currdate.getYear(); //得到年
currdate.getMonth(); //得到月份（＋1后是中国的月份）
currdate.getDate(); //得到日
currdate.getDay(); //得到今天星期几（如果星期二,输出：2）new Array('星期日','星期一','星期二');
1.内嵌样工 2.·行内样式 3.外部样式
导入外部样式表: <style>@import mycss.css</style>
链接外部样式表(不用加style标记): <head><link rel="stylesheet" type="text/css" href="myCss.css"></head>
<head>
<style type="text/css">
p{color:red;font-family:"隶书";font-size:24px;}
.h2{color:blue;font-family:"隶书";font-size:30px;}
</style>
</head>
<body>
<h2 class="h2">静夜思</h2>
<p>床前明月光</p>
</body>
=================样式属性====================
文本属性 :
font-size ----文字大小
font-family ----字体
font-style ----字体样式（细，粗）
color ----字体颜色
text-align ----文字对齐方式（center）
text-decoration:none 无下划线
text-decoration:overline 有下划线
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本（无法运行在IE和Opera中）。
背景属性:
background-color ---设置背景颜色
background-image ---设置背景图片
background-repeat ---设置一个指定的背景图像如何被重复显示
可取的值有：repeat(铺满整个区域，默认情况)，no-repeat(不平铺)，repear-x(只在水平方向铺)
repeat-y(只在垂直方向平铺)
表格也可有背景图片样式
td{background-image:url(aa.gif);backgound-repeat:no-repeat;}
方框属性：
margin-top 设置对象的上边框
(边界属性) margin-right 设置对象的右边框
margin-bottom
margin-left
例子
四个边距均为10px：
h1 {margin: 10px}顶边距和底边距为10px，左边距和右边距是父元素宽度的2%：
h1 {margin: 10px 2%}顶边距为10px，左边距和右边距是父元素宽度的2%，底边距是-10px：
h1 {margin: 10px 2% -10px}顶边距为10px，右边距是父元素宽度的2%，底边距是-10px，而左边距由浏览器设置：
h1 {margin: 10px 2% -10px auto}
<UL> :ul{border:1px solid red;}
<LI> :li{list-style:url(img\dot_yellow.gif);display:inline;border:1px solid blue;margin:0px 10px;}
//display:inline 水平显示每项
//border:1px solid blue; 每项的背景边框为1px，细线，蓝色
//margin:0px;10px; 上下边距为0，左右为10
<UL>
(边框属性) border-style:deshed(虚线) 边框的样式
border-width:1px; 边框的宽度
border-color:red 边框的颜色
(填充属性) padding-top 设置内容与上边框之间距离
padding-right 设置内容与右边框之间距离
padding-bottom
padding-left
方框属性案例：--------
<style type="text/css">
table{ margin-top:100px;margin-left:100px;} --整个table表中应用对齐方式
tr{background:yellow} --每行应用背景颜色
td{border-style:solid;border-width:11px;padding-top:11px;border-color:red;} ----每个单元格设置边框属性(必须设置border-style，才能显示边框)dashed:虚线
</style>
<style type="text/css">
tr{background:yellow;}
td{border-right-style:dashed;border-right-width:3px;border-right-color:red;}
</style>
文本框设置边框:
<style>
.border{border-width:1px;border-color:red;border-style:solid;width:100px;background:red;text-align:center;color:blue;}
</style>
为Button按钮设置背景图片
<style>
.button{background:url(img\login-sm2.gif);padding:0px;border:0px;width:100px;height:33px;};//padding:填充为0;border：边框为0
</style>
---------------------<DIV>透明度----------------------------------------
style="position:absolute;z-index:20; cursor:hand; left:expression(window.screen.width-40); top:115px; width:15px;filter:alpha(opacity=80);"
仅支持 FF
<script>document.getElementById("Layer1").style.opacity = "0.5";</script>
IE Only
<script>document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";</script>
-------------------------------windwos浏览器对象----------------------------------------
window.location.assign('ss.htm');相当于超链接
-----------------特殊样式-----------------------------
A:link {color:red} 未被访问的链接样式，红色
A:visited{color:green} 已被访问过链接样式，绿色
A:hover {color:yellow} 鼠标悬浮在链接上时的样式，黄色
A:active {color:blue} 鼠标正在接下时的颜色
<style type="text/css">
<!--
a:hover{
cursor: help; -----------设置当前鼠标的指针
}
-->
</style>
</head>
====================================================实现超链接效果
nClick="location.href='ss.jsp'"
------------------------------------
其中的"help"可以换成以下内容
hand 手形
crosshair 十字形
text 文本形
wait 沙漏形
move 十字箭头形
help 问号形
e-resize 右箭头形
n-resize 上箭头形
nw-resize 左上箭头形
w-resize 左箭头形
s-resize 下箭头形
se-resize 右下箭头形
sw-resize 左下箭头形
=======================================DOM编程－document对象 (JavaSript)======================
doucment对象的常用属性和方法介绍：
document.bgColor=red;
document.getElementById();
document.getElementsByName();//此方法获得相同名称的控件 ;
document.all["check"] //得到所有为check的复选框
document.getElementById("myDiv").style.pixelTop+=10; //pixelTop此时div的top值,不加px;
//让层隐藏，显示:
myDiv.style.display="block" 或="none"
//窗口滚动事件
window.onscroll=move; // move:自已写的方法
//判断是否为IE浏览器
var NS = (document.layers) ? 1 : 0; //如果layers不为"undefined"( null ) 条件真
var IE = (document.all) ? 1: 0; //如果document.all null不为null 条件真
//效果(隐藏行)
var table=document.getElementById("mytable");
table.rows[0].style.display="none";
//在javaScript中 if (1) 这个条件也为true
//IE中，每隔1毫秒调用一个方法
window.setInterval("move()",1);
//Math类
Math.ceil(12.1) :13 返加>=这个数的最小整数
Math.floor(12.1) : 12 返加<=这个数的最大整数
Math.floor(-9.5) : -10
Math.ceil(-9.5) :-9
000000000000000000会浮动的广告000000000000000000000000000000000000000000000000
<html>
<head>
<title>
js效果
</title>
<script language="javascript">
var x=true;
var y=true;
function move()
{
var s_w=document.body.offsetWidth;
var s_h=document.body.offsetHeight;
var obj=document.getElementById("fly");
var d_w=obj.style.pixelWidth;
var d_h=obj.style.pixelHeight;
var d_l =obj.style.pixelLeft;
var d_t=obj.style.pixelTop;
x=(d_l<=0||d_l>=s_w-d_w?!x:x);
y=d_t<=document.body.scrollTop||d_t>=document.body.scrollTop+s_h-d_h?!y:y;
obj.style.pixelLeft=x?(d_l+1):(d_l-1);
obj.style.pixelTop=y?(d_t+1):(d_t-1);
setTimeout("move()",10);
}
var tmp=0;
window.onscroll=function scro()
{
document.getElementById("fly").style.pixelTop+=document.body.scrollTop-tmp;
tmp=document.body.scrollTop;
}
</script>
</head>
<body onLoad="move()">
<div id="fly" style="z-index:1;background:red;width=200px;height:50px;position: absolute; left:2px; top: 2px;"></div>
<script language="javascript" type="text/javascript">
for(var i=0;i<=100;i++){document.writeln(i+"<br>");}
</script>
</body>
</html>
00000000000000000000000000000000动态增删表格0000000000000000000000000000000000000000
<script language="javascript">
function deleteRow(index){
var tableObj=document.getElementById("mytable");
tableObj.deleteRow(index);
}
function addRow(){
var tableObj=document.getElementById("mytable");
var newRowObj=tableObj.insertRow(tableObj.rows.length);
var newColName=newRowObj.insertCell(newRowObj.cells.length);
var newColAge=newRowObj.insertCell(newRowObj.cells.length);
var newColButton=newRowObj.insertCell(newRowObj.cells.length);
newColName.innerHTML=document.getElementById("newName").value;
newColAge.innerHTML=document.getElementById("newAge").value;
newColButton.innerHTML='<input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length-1)+')">';
}
</script>
0000000000000000000000000000000000000实现全选项果00000000000000000000000000000000000
<script language="javascript">
function checkAll(boolValue)
{
var checks=document.getElementsByName("MyChecks");
{
for(var i=0;i<checks.length;i++)
{
if(checks[i].type=="checkbox") //如果为复选框
{
checks[i].checked=boolValue;
}
}
}
}
</script>
===========================================表单验证=============================
String 对象
创建String 对象 (String 对象只有一个属性length)
var str="这也是String对象" ;
var str=new String("aaaa");
str.length;
str.indexOf("子字符串",起始位置); 如果找到了，返回它的下标，否则没找到 返回-1;
str.charAt(0); 返回指索引的字符
str.substring(index1,index2); 返回位index1 和 index2之间的字符串
str.substr("index",count) ; 返回从index开始，截取count个字符
str.toLowerCase() ;小写
str.toUpperCase(); 大写
创建 数组
var provin=new Array("河北","山东","黑龙江");
动态为下拉列表加选项
var obj=document.myForm.selectDiFan;
var newE=document.createElement("option"); 创建的对象为 option 类型
newE.setAttribute("value",provin[0]); //对象的value属性：河北
newE.innerText=provin[0]; //对象标签里的值:<option>河北</option>
obj.appendChild(newE); //把对象加入obj（下接列表对象）中
//清空下拉列表里的所有选 项 document.frm.selectDiFan.innerHTML="";
--------------------------------------- 动态为下拉加选项 示例:-------------------
<select size="1" name="provins" onchange="changeCity(this);"></select>
function changeCity(obj)
{
document.frm.city.innerHTML="";
var citys; //数组
switch(obj.value)
{
case "河北":
citys=hebei; //hebei是数组
break;
case "山东":
citys=shandong;
break;
case "黑龙江":
citys=heilongjiang;
break;
}
for(var i=0;i<citys.length;i++)
{
var e=document.createElement("option");
e.setAttribute("value",citys[i]);
e.innerText=citys[i];
document.frm.city.appendChild(e);
}
动态为下拉加选项示例:-------------------
文本框对象<input type="text" onBlur="move()" onFocues="move()" onChange="move()">:
事件: onBlur 失去焦点
onFocus 得到焦点
onChange 文本框的值改变时
方法: focus() 让文本框得到焦点
select() 选中文本框中的内容，突出显示输入区域
属性: value 设置或获得一个文本框中的值
表单
document.forms[0].txtName.value
document.forms[0].elements[0] //第0个表单，第0个元素
---------------制作 按下 回车键 调用Tab键的效果
键盘事件：onKeyDown
function checkName()
{
//如果为13，就是按下回车 （因为回车键的ASCII码是13）
if(event.keyCode==13&&event.srcElement.type !="submit") //event.srcElement.type得到按下键时有焦点的按键类型
{
event.keyCode=9; (Tab键的ASCII码是 :9)
}
}
1.<input type="text" name="txtName" onKeyDown="checkName()">
2.<script>document.onKeyDown= checkName </script> //不用在<input >里写了，这会应用到整个页面
//修改标签里的值:
myDiv.innerHTML="<font color="red">用户名不能为空 </font>";
myDiv.innerText ="用户名不能为空 "
//// 验证 用户名是否有数字
1. for(i=0;i<strName.length;i++)
{
ch=strName.charAt(i);
if(ch>=0){ alert("不能包含数字");}
return false;
}
return true;
2. if(ch>='0'&&ch<='9') 这时进行决断时必须二个条件都写上，因为如果加引号，则进行ASCII比较，
有的字符的ASCII的大于'0'的ASCII码;
////页面加载时让 文本框 得到焦点
<body onLoad="document.myForm.txtName.focus()">
---------------------------------------------------------------------------------------------------------------------------------
－－－－－－－－－－－<marquee> ... </marquee>
移动属性的设置 ,这种移动不仅仅局限于文字，也可以应用于图片，表格等等
方向
<direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移！</marquee>
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>来回走</marquee>
循环
<loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>
速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>
延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>
外观(Layout)设置
对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee>
面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee>
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>
－－－－－－－－－－<iFrame>标签
<iframe src="http://www.sina.com" width="300" height="200"></iframe>用于包含一个网页，相当于框架
------------------------------在javaScript中使用正则表达式----------------------------------------
1.function checkName(obj)
{
//用户名必须以字母开头，最小6位
if(obj.value.length==0){alert('用户名不能为空');return ;}
if(obj.value.length<6){alert('用户名不能少于6位');return ;}
var regu = "^([a-zA-Z]+[_0-9a-zA-Z@.-]*)$"
var re = new RegExp(regu);
if( obj.value.search( re ) != -1 ){
return true;
}else{
window.alert( "请使用规范的会员名！" );
return false;
}
}
2.function checkName(obj)
{
//以字母开头
var reg=/^[A-Za-z]+$/;
if(！reg.test(userName.value.charAt(0))){
alert("会员名必须以字母开头");
}
}
-------------------js是获取日期如下:
<script language="javascript">
var dt = new Date();
m=dt.getMonth()+1;//获得月份
wk=dt.getDay(); //获取星期
d=dt.getDate()+1;//获取日
y=dt.getFullYear(); //获取年(四位)
document.write(m + "月" + d + "日 星期" + wk + " " + y + "年" );
</script>
-----------------------------------------------------------------------this.setCapture() 和 this.releaseCapture()
web开发和windows开发最大的区别就是windows开发是有状态的,而web开发是无状态的,在windows中,一切操作都可以由程序来控制 ,除非强制执行ctrl+alt+del;但web操作就不一样了,即使执行很重要的操作,用户一点击浏览器关闭按钮,就将前面操作成果化为乌有.尽管可以在onunload事件中加些代码,让用户可以选择是否退出,但不能从根本上解决问题!
前几天,从网上看到setCapture方法,了解了一下,大体是这样的意思,当在IE文档某个区域中使用了这个方法,并且写了onclick或者onmouse***等有关的鼠标事件方法,那么它就会监视相应的鼠标操作,即使你的鼠标移出了IE,它也一样能捕获到.如果你在某div中的onclick事件中写了一个alert命令,这时,你点击的关闭按钮,它也一样会弹出alert窗口.releaseCapture与setCapture方法相反,释放鼠标监控.
利用这个特性,我们可以延缓IE的关闭窗口等破坏性操作,将一些重要的操作能够在破坏性操作执行之前得到处理.
有一点遗憾:setCapture和releaseCapture 不支持键盘事件.只对onmousedown, onmouseup, onmousemove, onclick, ondblclick, onmouseover, onmouseout这样的鼠标事件起作用.
----------------------------------------------------------------系统时间-------------------------------
currdate=new Date();
currdate.getYear(); //得到年
currdate.getMonth(); //得到月份（＋1后是中国的月份）
currdate.getDate(); //得到日
currdate.getDay(); //得到今天星期几（如果星期二,输出：2）new Array('星期日','星期一','星期二');
分享到：
发表评论
相关推荐
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...
韩顺平html+css+js笔记，有需要的童鞋可以下来用用。
HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...
韩顺平html+css+js之JS笔记
HTML，CSS，JavaScript 本文是由笔者2011年学习HTML，CSS，JavaScript时编写的学习札记，内容来源于网络以及个人整理。 Html索引 Head中常用的标签 4 Body体上的标签 4 Body体里面的标签 4 1. 锚点标签 4 2. ...
这是关于html-css-js 笔记，希望可以对初学者有一些帮助！
前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习...
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
CSS加HTML加JS笔记大全，很实用！！！=
毕向东HTML_CSS_JavaScript教程笔记
css与javascript笔记。个人学习笔记。记得比较详细，适合新手学习
HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS ...
完整版，详细，前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容，讲解详细易懂，掌握其中的原理
学习html、css、js、react js的笔记和demo学习html、css、js、react js的笔记和demo 学习html、css、js、react js的笔记和demo学习html、css、js、react js的笔记和demo 学习html、css、js、react js的笔记和demo...
传智播客-PHP基础视频_html+css+js笔记
学习HTML和CSS时候的笔记 感觉比较详细啦，希望对大家有所帮助 自己学习的笔记 分享一下 期待更多人的分享 共同进步
1. 能够使用CSS的基本选择器选择元素 2. 能够使用CSS的扩展选择器选择元素 3. 能够说出盒子模型的属性 4. 能够说出JS中五种数据类型 5. 能够使用JS中常用的运算符 6. 能够使用JS中的流程控制语句 7. 能够在JS中定义...
css、js笔记整理，内容详细，但是可能不太完全