javascript级联菜单(日历)

上次考DOM,考到级联菜单,迷迷糊糊,晕晕乎乎,不知从何下手。今天冷静下来,理了理思路。

要求:

  1. “年”或“月”发生变化且为有效值时,“日”下拉选择框显示相应的项。
  2.  “年”下拉选择框为初始状态时, “月”、“日”下拉选择框一定为初始状态。
  3. “月”下拉选择框为初始状态时, “日”下拉选择框一定为初始状态。

calender

思路:

1.  当前选框选项有变化的时候,操作下一个选框。当选择年份的时候,填充月份,选择月份的时候,根据所选月份填充日期。当年份为初始化状态,将月份和日期设置为初始化状态,月份为初始化状态时,将日期也设置为初始化状态。

2. 每年的月份数相同,但每个月的天数不同,将不同天数保存在数组中,方便相应月份调用。

3. 闰年2月与平年2月天数不同,分开判断。

上代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calendar</title>
</head>
<body style="text-align:center">
    <select name="year" id="year">
        <option value="0">--</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
    </select> 年
    <select name="month" id="month">
        <option value="0">--</option>
    </select> 月
    <select name="date" id="date">
        <option value="0">--</option>
    </select> 日
    
    <script>
        window.onload = initSelect;
        
        function initSelect(){
            var yearSel = document.getElementById('year');
            var monthSel = document.getElementById('month');
            
            initYear(); //设置年份默认选中第一个选项
            initMonth(); //设置月份默认选中第一个选项
            initDate(); //设置日期默认选中第一个选项
            yearSel.onchange = yearFun; //当年份被选择的时候调整月份
            monthSel.onchange = monthFun; //当月份被选择的时候调整日期
            
        }
        
        function yearFun(){
            if( this.options.selectedIndex === 0 ){ //如果选中第一个,把月,日设置为也选中第一个
                initMonth();
                initDate();
            }else{ //如果选中年份,填充月份
                popMonth();
            }
        }
        
        function monthFun(){
            var dateArr = [31,28,31,30,31,30,31,31,30,31,30,31]; //储存不同月份天数的数组
            var thisValue = parseInt(this.options[this.options.selectedIndex].value); //获取当前选中的选项的值并转为数字
            
            if( this.options.selectedIndex === 0 ){ //如果选中第一个选项,初始化日期
                initDate();
            }else{ //如果选中其他选项,根据选项加载不同日期
                document.getElementById('date').options.length = 1;
                var isLeap = checkLeap(); //要使用函数返回值,可以保存为变量,或直接使用
                if ( isLeap ){
                    dateArr[1] = 29;
                }else{
                    dateArr[1] = 28;
                }
                for( var i = 0; i < dateArr[thisValue-1]; i++ ){ //根据选中选项的value值查找date数组中对应的天数值,循环出来
                    document.getElementById('date').options[i+1] = new Option( i+1 ); //因为第一个选项是横线,所以要+1,从第二个开始
                };
            }
        }
        
        function popMonth(){
            initDate(); //填充月份的时候初始化日期
            for( var i = 0; i < 12; i++ ){
                document.getElementById('month').options[i+1] = new Option(i+1,i+1); //填充月份,设置内容和值
            }
        }
        
        function checkLeap(){ //判断选中年份是否为闰年
            var yearSel = document.getElementById('year');
            var thisYearValue = parseInt(yearSel.options[yearSel.options.selectedIndex].value); //获取当前选中年份的值并转为数字
            if( (thisYearValue % 4  === 0 && thisYearValue % 100 !== 0) || thisYearValue % 400 === 0 ){ //闰年:能被4整除的同时不能被100整除,或者能被400整除,只要满足两者之一就是闰年
                return true;
            }
            return false;
        }
        
        function initYear(){
            document.getElementById('year').options.selectedIndex = 0; //设置年份选中第一个选项
        }
        
        function initMonth(){
            document.getElementById('month').options.selectedIndex = 0; //设置月份选中第一个选项
            document.getElementById('month').options.length = 1; //只保留第一个选项
        }
        
        function initDate(){
            document.getElementById('date').options.selectedIndex = 0; //设置日期选中第一个选项
            document.getElementById('date').options.length = 1; //只保留第一个选项
        }
    </script>
</body>
</html>

查看DEMO

1. select.options.selectedIndex 可以获取到被选中选项的index值。

2. new Option( ), 创建新的option

3. 函数的返回值可以保存为变量:

function myFunction()
{
var x=5;
return x;
}

可以保存为变量:

var myVar=myFunction();
console.log(myVar);

也可以直接使用:

document.getElementById("demo").innerHTML=myFunction();

js判断移动设备类型

media query根据屏幕尺寸显示相应css,当需求不止是需要判断用户的屏幕是否适合手机或平板的尺寸(因为有可能用户缩小浏览器进行浏览),而需要确切知道用户是否从移动端进入并执行相应动作时,可以用以下js进行简单判断:

 

$(document).ready(function () {
    var isMobile = {
        Android: function () {
            return navigator.userAgent.match(/Android/i) ? true : false;
        },
        BlackBerry: function () {
            return navigator.userAgent.match(/BlackBerry/i) ? true : false;
        },
        iOS: function () {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
        },
        Windows: function () {
            return navigator.userAgent.match(/IEMobile/i) ? true : false;
        },
        any: function () {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
        }
    };
    if (isMobile.any()) { //判断是否为android,BlackBerry,ios,windows
        //要执行的代码
    }
});

javascript 案例二(网页换肤)

今日案例,一个简单的网页换肤,即切换样式表。经过上一修改元素样式的案例,这个写得更为轻松了。

css:

<style>
#container{text-align:center;color: #333}
#nav li{display: inline-block; padding: 8px 20px;margin: 0 10px;cursor: pointer;border-radius: 10px;}
.green{background-color: #16977d;}
.blue{background-color: #3c999c;}
.white{background-color: #f4f4f4;}
.content{margin-top: 100px;font-size: 34px}
</style>

分别写了三个样式表:

green.css, blue.css, white.css

html:

<div id=”container”>
<ul id=”nav”>
<li class=”green”>Green</li>
<li class=”blue”>Blue</li>
<li class=”white”>White</li>
</ul>
<h1 class=”content”>Here is test page</h1>
</div>

js:

var themeList = [‘green’,’blue’,’white’]; //将样式表的名称写在数组里
var tarObj=document.getElementById(‘stylefile’); //获得页面中的样式表
var navName=document.getElementById(‘nav’);
var navList=navName.childNodes;//获得点击对象
window.onload = actFun;
function actFun() {
for(var i=0; i<navList.length; i++){
navList[i].onclick=function(){
tarObj[‘href’]=’css/’+this.className+’.css’
}
}

}

查看DEMO

javascript 案例一(控制元素属性)

改变元素样式

目标是修改div的宽度,高度,背景色,显示隐藏。

html:
<style>
#btn{text-align:center;}
#btn input{margin:10px;}
#div1{width:100px;background-color: #000;height:100px;margin:20px auto;}
</style>

<div id=”container”>
<div id=”btn”>
<input type=”button” value=”width” id=”width”>
<input type=”button” value=”height” id=”height”>
<input type=”button” value=”backgroundcolor” id=”backgroundcolor”>
<input type=”button” value=”hide” id=”hide”>
<input type=”button” value=”reset” id=”reset”>
</div>
<div id=”div1″></div>
</div>
以下为黑暗中摸索的js:

//获得每个按钮

var mainDiv = document.getElementById(‘div1’)
,cWidth = document.getElementById(‘width’)
,cHeight = document.getElementById(‘height’)
,cColor = document.getElementById(‘backgroundcolor’)
,cHide = document.getElementById(‘hide’)
,cReset = document.getElementById(‘reset’);
window.onload = actFun;
//绑定每个按钮的点击事件
function actFun() {
cWidth.onclick = function(){
mainDiv.style.width=’150px’;
}
cHeight.onclick = function(){
mainDiv.style.height=’200px’;
}
cColor.onclick = function(){
mainDiv.style.backgroundColor=’#ff0000′;
}
cHide.onclick = function(){
mainDiv.style.display=’none’;
}
cReset.onclick = function(){
mainDiv.style.width=’100px’;
mainDiv.style.height=’100px’;
mainDiv.style.backgroundColor=’#000′;
mainDiv.style.display=’block’;
}
}

很显然,如果再添加五个要修改的样式,还得再给5个按钮绑定事件。处于还没入门,刚找到门缝的我,也只能写成这样。

于是,借鉴别人的代码,重新写了一遍:

//既然要给按钮绑定事件,并且做的同一件事都是修改样式,那么就把它写成一个函数,若再需要绑定事件,则无需再写。

function actFun(tar,pro,value){
tar.style[pro]=value;
}
window.onload = function(){
var getButton=document.getElementsByTagName(‘input’);//获得所有按钮
var getTar=document.getElementById(‘div1’);//获得要修改的元素
var proArr=[‘width’,’height’,’background’,’display’,’display’];//把要修改的属性放在数组
var tarArr=[‘150px’,’200px’,’#ff0000′,’none’,’block’];//修改的值放在一起
for(var i=0; i<getButton.length; i++){//将按钮循环一遍
getButton[i].index=i;
getButton[i].onclick=function(){
if(this.index == getButton.length-1){
getTar.style.cssText=””;//如果是最后一个按钮,即reset,就把样式清除掉
};
actFun(getTar,proArr[this.index],tarArr[this.index]);//调用函数
}
}
}

查看DEMO

虽然很简单,很基础,但偶还是得花更多的时间去理解和练习并且掌握好它(怀着一颗迷茫又敬畏的心),原因你懂的。

 

原生javascript实现星级评分

作为资深菜鸟一枚,对javascript表示无力掌控,但自始至终坚定信念,自强不息,挖粪涂墙。

自知网络已有无数星级评分之案例教程,但星级评分对我来说,就如同Hello world一样,简约、经典、永恒,是入门的必备案例。在最近奋斗的途中,我也写了一小段javascript用于实现简单的星级评分。

基本思路:星级评分只做一件事,就是无论鼠标划过或点击某颗星星,就点亮这颗星星及之前的星星,并熄灭这颗星星之后的星星。

代码如下:

HTML:

span即每颗星星,共10颗。

<div id=”star”>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS:

顺便练习css3,于是用css写星星的形状。

#star{
text-align: center;
padding-top: 30px;
}
#star span{
margin: 50px 0;
position: relative;
display: inline-block;
color: #999;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-bottom: 20px solid #999;
border-left: 30px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star span:before {
border-bottom: 30px solid #999;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -18px;
left: -23px;
display: block;
content:”;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star span:after {
position: absolute;
display: block;
color: #666;
top: 3px;
left: -34px;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-bottom: 20px solid #999;
border-left: 30px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content:”;
}

/*用于点亮星星的class名为rated*/
#star span.rated,
#star span.rated:before,
#star span.rated:after
{
color:#ff0000;
border-bottom-color:#ff0000;
}

javascript隆重出场:

var starGroup = document.getElementById(‘star’).children,
clickIndex; //定义一个全局变量用于储存被点击星星的索引值

window.onload = starFunc;

function starFunc() {
for (var i = 0; i < starGroup.length; i++) {//将每颗星星循环出来
starGroup[i].onmouseover = starHover;//绑定鼠标划到星星上的事件
starGroup[i].onclick = starClick;//绑定点击星星事件
starGroup[i].onmouseout = starOut;//绑定鼠标移出星星事件
starGroup[i].index = i;//获得每颗星星的索引
};
}

function starHover() {
var curIndex = this.index;//鼠标划过星星时,获得当前星星索引值
starLight(curIndex);//传入点亮星星的函数,从而执行点亮和熄灭动作
}

function starClick() {
var curIndex = this.index;//获得当前被点击星星的索引值
starLight(curIndex);//传入点亮星星的函数
clickIndex = curIndex;//将被点击星星的索引值记录下来
}

function starOut() {
//如果点击事件发生,被点击星星索引传入点亮星星函数,鼠标划出时将恢复点击时的状态,如果点击事件没有发生,星星将全部熄灭
starLight(clickIndex);
}

function starLight(index) {//点亮星星函数,当mouse over和点击事件发生时,将当前星星索引值传入,用以执行星星的点亮和熄灭动作
for (var i = 0; i < starGroup.length; i++) {
if (i <= index) {
starGroup[i].className = “rated”;//点亮星星
} else {
starGroup[i].className = “”;//熄灭星星
};
};
}

星级评分完成!

当然,这样的星级评分并不够完整和严谨,仅作学习之用。

查看在线DEMO

 

 

控制导航条随滚动条固定于页面顶部 javascript

导航栏随着滚动条的滚动,固定浮于页面顶部:

divFix:
function fixDiv(div_id,offsetTop){var offsetTop=arguments[1]?arguments
[1]:0;var Obj=$(‘#’+div_id);var ObjTop=Obj.offset().top;var
isIE6=$.browser.msie && $.browser.version == ’6.0′;if(isIE6)
{$(window).scroll(function(){if($(window).scrollTop()<=ObjTop){Obj.css
({‘position’:’relative’,’top’:0});}else{Obj.css
({‘position’:’absolute’,’top’:$(window).scrollTop()+offsetTop+’px’,’z-
index’:1});}});}else{$(window).scroll(function(){if
($(window).scrollTop()<=ObjTop){Obj.css
({‘position’:’relative’,’top’:0});}else{Obj.css
({‘position’:’fixed’,’top’:0+offsetTop+’px’,’z-index’:1});}});}

前端笔记

HTML:

1.html5声明:<!DOCTYPE HTML>

2.flash背景透明:

火狐:在embed标签中,添加属性wmode=”Transparent”

IE:在object标签中间,添加<param name=”wmode” value=”Transparent” />

3.html标签<marquee></marquee>可以实现字幕滚动。

完整:<marquee id=”affiche” align=”left” behavior=”scroll”
bgcolor=”#FF0000″ direction=”up” height=”300″ width=”200″ hspace=”50″
vspace=”20″ loop=”-1″ scrollamount=”10″ scrolldelay=”100″
onMouseOut=”this.start()” onMouseOver=”this.stop()”>

4.有两次发现IE浏览器下文档模式总是被解析成杂项,今揪出凶手,原来是页面
头部的声明多了一些没有用的东西,这些东西即使被注释掉也会影响整个页面。

 

CSS:

1.text-shadow:

text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[
颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]…或者text-
shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X
Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]…例:text-shadow: 0
1px 1px #fff;

2.背景线性渐变:

内核类型写法Webkit(Chrome/Safari):-webkit-linear-gradient()/-webkit-
gradient();

Gecko(Firefox):-moz-linear-gradient();

Presto(Opera):-o-linear-gradient();

Trident(IE):-ms-linear-gradient();

W3Clinear-gradient()

IE:

filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=’#fafafa’,endColorstr=’#eaeaea’);

例:

background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient
(linear,center top,center bottom,from(#fff),to(#333));background:-
webkit-linear-gradient(#fff,#333);background:-o-linear-gradient
(#fff,#333);background:-ms-linear-gradient
(#fff,#333);background:linear-gradient(#fff,#333);

全:

background:linear-gradient(bottom,#ccc 0,#f0f0f0
100%);background:-o-linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-moz-linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-webkit-
linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-ms-linear-gradient
(bottom,#ccc 0,#f0f0f0 100%);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=’#f0f0f0′,endColorstr=’#cccccc’)

3.IE6下line-height属性失效是由于文字中包含img、input、select、textarea
、button、object等标记造成的。

给与文字相连接的img、input、textarea、select、object等元素加以css样式:
margin: (所属line-height-自身高度)/2px 0;
vertical-align:middle;

4.css雪碧在线制作网站

css sprite: http://css-sprit.es/

5.a标签伪类顺序:

a:link {color: #000;}
a:visited {color: #F00;}
a:hover{color: #0F0;}
a:active {color: #00F;}

顺序不正确有可能会导致设置失效。

6.css3.0 对象旋转属性:

-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

-moz-transition:all 0.2s ease-in-out 0s (设置旋转方式和时间)

7.IE6 IE7下,当父元素的直接子元素或者下级子元素的样式拥有
position:relative属性时,父元素的overflow:hidden属性就会失效。只要给父级元素添加position:relative即可。

8.IE6下,<b>最新时评</b>用text-indent:-999em把文
字隐掉,b设置为display:block,height:20px;还需要定line-height:20px; 否
则,b的高度以默认行高计算,不受height的影响。(标签内必须有文字,否者
line-height也会失效)

9.IE6下绝对定位的div无法遮盖select解决办法:

在需要遮盖select的那个div放入一个空的iframe:
<div><!–[if lte IE 6]><iframe></iframe><![endif]–></div>
iframe样式:
iframe{

display:none;
display:block;
position:absolute;
top:0;
left:0;
z-index:-1;
width:3000px;
height:3000px;
}

10.设置阴影:

box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow属性至多有6个参数设置,他们分别取值:
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如
果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为
“inset”时,其投影就是内阴影;
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,
则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对
象的底部,反之其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴
影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延
展扩大,反之值为负值是,则缩小
阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览
器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就
是透明,建议不要省略此参数。

仅兼容:IE9 firefox3.5 chrome2.0 opera10.6 safari4

11.IE6浮动产生双边距的问题,在浮动元素的css里加display:inline即可解决。

12.当给浮动元素的父级div设置overflow:hidden时,IE6下是不起作用的,因为
IE6下必须有固定高度宽度这一属性才会起作用,需要给元素添加height:100%即
可!

13.display:inline-table;
子元素浮动,父级元素闭合,避免overflow:hidden造成的子元素浮出父级时被隐
藏。
#main { width:700px;display:inline-table ;position:relative;
top:20px;left:300px;}
#main #left {width:233px;float:left;position:relative;top:0;left:-
230px;}
#main #right { float:left;width:428px;position:relative;top:0px;left:-
230px;}
<div id=”main”>
<div id=”left”></div>
<div id=”right”></div>
</div>
14.IE6中PNG格式图片不能显示透明背景,改用GIF透明背景图。
15.color:red; /* 所有浏览器都支持 */

color:red !important;/* 除IE6外 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
+color:red;/*IE7支持*/
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8、IE9支持 */
color:red\0; /* IE8、IE9支持 */
color:red\9\0;/*IE9支持*/

/* webkit and opera */
@media all and (min-width: 0px){ div{color:red;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-
webkit-min-device-pixel-

ratio:0) { div{color:red;} }

/* firefox * /
@-moz-document url-prefix(){ div{color:red;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest
firefox */
}

/*针对safari 3+, chrome 1+, opera9+, ff 3.5+浏览器*/
body:nth-of-type(1)div { color:red;}?9;
<!–[if lt IE 7 ]> <html> <![endif]–>
<!–[if IE 7 ]> <html> <![endif]–>
<!–[if IE 8 ]> <html> <![endif]–>
<!–[if IE 9 ]> <html> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html> <!–<![endif]–>
<!?[if IE 7]> = 等于 IE7

<!?[if lt IE 8]> = 小于 IE8(就是 IE7 或以下了啦)

<!?[if gte IE 8]> = 大于或等于 IE8

<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了

16.
Chrome和Safari中,li一定要定宽度,否则无法浮动。
IE6中的li边框无法显示。

17.一直对同一行里的两个部分左右分开难以驾驭。
a: 用一个标题标签(h1、h2…),里面放一个p标签,一个span标签,两个左右
浮动;

18.设置背景透明度:
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
19.当<li><a href=”#”></a></li>浮动,overflow:hidden不起作用,要隐藏溢出
的内容,先定li宽和高,a标签display block,li标签white-space:nowrap;
display:block;/*内联对象需加*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ;需与
overflow:hidden;一起使用。*/
text-overflow:clip/*不显示省略标记*/

20.当h标签内有a标签和其他元素,图片直接放在a标签里,会导致其他元素无法垂
直居中,可以将图片设置为a标签的背景,设定好a标签的宽高,display:inline
-block;

21.css写边框圆角:
border-top-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-radius表示所有的角;但是IE8及以下版本都不支持

22.今天才发现,a标签display设为block是可以只设高度不设宽度的,好了,以
后导航mouseover的效果不用纠结了

23.CSS解压缩:http://tool.lu/css/

24. css设置英文全部大写:text-transform:uppercase;

全部小写:text-transform: lowercase

首字母大写:text-transform:capitalize

25.简单的清除链接虚线框的办法:

a:focus{ outline:none;}

不过这种办法兼容性不是很好

JAVASCRIPT

1.弹出框背景宽高度控制
$(“#popup_mask”).css({
“width” : $(document).width(),
“height”: $(document).height(),
opacity:0.5
}).show();

2. js获取当前时间

<SCRIPT LANGUAGE=”JavaScript”> <!–var now= new Date();var
year=now.getYear();var month=now.getMonth()+1;var day=now.getDate();var
hour=now.getHours();var minute=now.getMinutes();var
second=now.getSeconds(); alert(year+”-“+month+”-“+day+”
“+hour+”:”+”:”+minute+”:”+second); –> </SCRIPT>
23.js代码压缩工具:http://javascriptcompressor.com/,css代码压缩工具:
http://www.csscompressor.com/

3.在文本输入栏中,如果加入了提示,加入onMouseOver=”this.focus

()”onFocus=”this.select()” 可以直接选中提示文本:

<textarea name=textarea wrap=virtual rows=2
cols=22onMouseOver=”this.focus()” onFocus=”this.select()”>站长之家
www.chinaz.com</textarea>

鼠标移入提示文字消失:<input type=text name=”address” size=19value=”站
长之家 www.chinaz.com”onFocus=”this.value=””>