本文向大家推荐个入门级的JS特效代码,主要包括以事件驱动JavaScript函数,文本域显示内容,但不可修改,让select控件可以自定义边框等内容。
推荐几个入门级的JS特效代码
1、以事件驱动JavaScript函数
以下是引用片段:
- <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
- <html>
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=gb2312">
- <title>无标题文档</title>
- <script>
- <!--
- functionhello()
- {
- aa=100
- cc='欢迎第'+aa+'次光临!'
- alert(cc)
- }
- //-->
- </script>
- </head>
- <body>
- <ahrefahref="网址"onmouseover="hello()">网页名</a>
- </body>
- </html>
2、JS特效之文本域显示内容,但不可修改
以下是引用片段:
- <inputvalueinputvalue="网页名"readonly>
3、JS特效之让select控件可以自定义边框
以下是引用片段:
- <style>
- .box2{border:1pxsolid#00ff00;width:180px;height:17px;
- clip:rect(0px,179px,16px,0px);overflow:hidden;}
- select{position:relative;left:-2px;top:-2px;
- font-size:12px;width:183px;
- line-height:14px;border:0px;color:#909993;}
- </style>
- <divclassdivclass=box2>
- <selectidselectid=idselect1onchange="select1();
- "hidefocus>
- <optionselected>网页名</option>
- <option>设计在线</option>
- <option>办公软件</option>
- <option>工具软件<option>
- </select>
- </div>
4、JS特效之CSS圆角
以下是引用片段:
- <htmlxmlns:v>
- <head>
- <style>
- v:*{behavior:url(#default#VML);}
- </style>
- </head>
- <body>
- <v:RoundRectstylev:RoundRectstyle="position:relative;
- width:200;height:100px">
- <v:shadowonv:shadowon="T"type="single"
- color="#b3b3b3"offset="5px,5px"/>
- <v:textboxstylev:textboxstyle="font-size:12px">css实现真正的圆角表格</v:textbox>
- </v:RoundRect>
- </body>
- </html>
5、JS特效之建银密码输入器
以下是引用片段:
- <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
- <html>
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=gb2312">
- <title>无标题文档</title>
- </head>
- <body>
- <INPUT
- onkeydown=Calc.password.value=this.valuetitle=登录密码
- onclick="password1=this;showkeyboard();
- this.readOnly=1;Calc.password.value=''"
- readOnlytype=passwordmaxLength=12
- onchange=Calc.password.value=this.valuename=LOGPASS
- minLength="6">
- <scriptlanguagescriptlanguage="javascript"
- src="http://tech.ddvip.com/imagelist/06/45/13pvu8r78n57.js">
- </script>
- </body>
- </html>
【编辑推荐】
- 详细说明Javascript匿名函数技巧与文章
- JavaScript函数的定义及形式参数
- C#代码与JavaScript函数的相互调用
- JavaScript函数中arguments对象
- Javascript中CSS属性float特殊写法