专家推荐 基础JS特效代码

开发 前端
JS特效有很多值得学习的地方,掌握了这些特效的使用会对我们有很大的帮助,这里向大家描述一下几个入门级的JS特效代码,相信对你的学习一定会有所帮助。

本文向大家推荐个入门级的JS特效代码,主要包括以事件驱动JavaScript函数,文本域显示内容,但不可修改,让select控件可以自定义边框等内容。

推荐几个入门级的JS特效代码

1、以事件驱动JavaScript函数

以下是引用片段: 

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <metahttp-equivmetahttp-equiv="Content-Type"
  5. content="text/html;charset=gb2312"> 
  6. <title>无标题文档</title> 
  7. <script> 
  8. <!--  
  9. functionhello()  
  10. {  
  11. aa=100 
  12. cc='欢迎第'+aa+'次光临!'  
  13. alert(cc)  
  14. }  
  15. //--> 
  16. </script> 
  17. </head> 
  18. <body> 
  19. <ahrefahref="网址"onmouseover="hello()">网页名</a>   
  20. </body> 
  21. </html> 

 2、JS特效之文本域显示内容,但不可修改

以下是引用片段: 

  1. <inputvalueinputvalue="网页名"readonly> 
  2.  

3、JS特效之让select控件可以自定义边框

以下是引用片段: 

  1. <style> 
  2. .box2{border:1pxsolid#00ff00;width:180px;height:17px;  
  3. clip:rect(0px,179px,16px,0px);overflow:hidden;}  
  4. select{position:relative;left:-2px;top:-2px;  
  5. font-size:12px;width:183px;  
  6. line-height:14px;border:0px;color:#909993;}  
  7. </style> 
  8. <divclassdivclass=box2> 
  9. <selectidselectid=idselect1onchange="select1();
  10. "hidefocus> 
  11. <optionselected>网页名</option> 
  12. <option>设计在线</option> 
  13. <option>办公软件</option> 
  14. <option>工具软件<option> 
  15. </select> 
  16. </div> 

 4、JS特效之CSS圆角

以下是引用片段: 

  1. <htmlxmlns:v> 
  2. <head> 
  3. <style> 
  4. v:*{behavior:url(#default#VML);}  
  5. </style> 
  6. </head> 
  7. <body>   
  8. <v:RoundRectstylev:RoundRectstyle="position:relative;  
  9. width:200;height:100px"> 
  10. <v:shadowonv:shadowon="T"type="single"  
  11. color="#b3b3b3"offset="5px,5px"/> 
  12. <v:textboxstylev:textboxstyle="font-size:12px">css实现真正的圆角表格</v:textbox> 
  13. </v:RoundRect> 
  14. </body> 
  15. </html> 

 5、JS特效之建银密码输入器

以下是引用片段: 

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <metahttp-equivmetahttp-equiv="Content-Type"
  5. content="text/html;charset=gb2312"> 
  6. <title>无标题文档</title> 
  7. </head> 
  8. <body> 
  9. <INPUT   
  10. onkeydown=Calc.password.value=this.valuetitle=登录密码   
  11. onclick="password1=this;showkeyboard();
  12. this.readOnly=1;Calc.password.value=''"   
  13. readOnlytype=passwordmaxLength=12   
  14. onchange=Calc.password.value=this.valuename=LOGPASS   
  15. minLength="6"> 
  16. <scriptlanguagescriptlanguage="javascript"
  17. src="http://tech.ddvip.com/imagelist/06/45/13pvu8r78n57.js"> 
  18. </script> 
  19. </body> 
  20. </html> 

【编辑推荐】

  1. 详细说明Javascript匿名函数技巧与文章
  2. JavaScript函数的定义及形式参数
  3. C#代码与JavaScript函数的相互调用
  4. JavaScript函数中arguments对象
  5. Javascript中CSS属性float特殊写法

 

责任编辑:佚名 来源: tech.ddvip.com
相关推荐

2010-07-23 12:23:49

Perl基础

2011-09-08 15:06:33

HTML 5

2010-08-09 09:14:37

Flex代码格式化

2021-06-18 10:12:09

JS代码前端

2010-06-07 17:24:44

UML

2010-06-12 17:19:18

UML用户指南

2010-07-20 13:19:16

Perl入门手册

2010-08-11 11:31:49

2010-07-20 16:19:54

Perl

2010-07-21 11:04:44

Perl学习指南

2010-08-03 14:37:30

Flex入门教程

2009-06-10 21:48:03

滚动图片Javascript特

2010-09-03 15:48:47

CSS

2010-05-31 16:42:42

SVN权限配置

2010-08-31 11:13:12

CSS框架

2010-06-29 13:45:50

UML类图教程

2010-05-24 13:04:53

jQueryJavaScript

2010-09-01 09:08:34

CSS

2010-07-01 10:24:30

UML小工具

2020-04-25 20:57:37

机器学习机器学习工具
点赞
收藏

51CTO技术栈公众号