CSS&JS笔记

最新推荐文章于 2024-02-03 09:12:32 发布

kkllmey

最新推荐文章于 2024-02-03 09:12:32 发布

阅读量139

点赞数

分类专栏： JavaScript 文章标签： CSS IE 中国移动正则表达式浏览器

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

==========================================================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">

</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.οnscrοll=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.οnscrοll=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="删除" οnclick="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" οnchange="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('星期日','星期一','星期二');