懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

30个常用javascript特效分享

发表日期:2014-10-17文章编辑:仙桃云科网络科技有限公司

1.文本框焦点问题
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
Onselect:当文字加亮后,产生该文件

<input type="text" value="mm" onfocus="if(value=='mm) {value=''}" onblur="if
(value=='') {value='mm'}">点击时文字消失,失去焦点时文字再出现


2.网页按钮的特殊颜色
<input type=button name="Submit1" value="郭强" size=10 class="s02"

style="

3.鼠标移入移出时颜色变化
<input type="submit" value="找吧" name="B1" onMouseOut=this.style.color="blue"

onMouseOver=this.style.color="red" class="button">

4.平面按钮
<input type=submit value=订阅 style="border:1px solid :#666666; height:17px; width:25pt; font-size:9pt;

color:#666666" name="submit">

5.按钮颜色变化
<input type=text name="nick" style="border:1px solid #666666; font-size:9pt; height:17px;

color:#ff6600" size="15" maxlength="16">

6.平面输入框
<input type="text" name="T1" size="20" style="border-style: solid; border-width: 1">

7.使窗口变成指定的大小
<script>
window.resizeTo(300,283);
</script>

8.使文字上下滚动
<marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()'

height=60>
<!-- head_scrolltext -->
<tr>
<td>
共和国
</table> <!-- end head_scrolltext -->
</marquee>

9.状态栏显示该页状态
<base onmouseover="window.status='网站建设 http://www.webmake.cn/' ;return true">

10.可以点击文字实现radio选项的选定
<br>
    <input type="radio" name="regtype" value="A03" id="A03">
<label for="A03"> 情侣 : 一次注册两个帐户</label> <br>

11.可以在文字域的font写onclick事件

12.打印</a>打印网页
<a href='javascript:window.print ()'>

13.线型输入框
<input type="text" name="key" size="12" value="关键字" onFocus=this.select() onMouseOver=this.focus()

class="line">

14.显示文档最后修改日期
<script language=javascript>
function hi(str)
{
document.write(document.lastModified)

alert("hi"+str+"!")
}
</script>

15.可以在鼠标移到文字上时就触发事件
<html>
<head>
<script language="LiveScript">
<!-- Hiding
function hello() {
alert("哈罗!");
}
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>

16.可以根据网页上的选项来确定页面颜色
<HTML>
<HEAD>
<TITLE>background.html</TITLE>
</HEAD>
<SCRIPT>
<!--

function bgChange(selObj) {
newColor = selObj.options[selObj.selectedIndex].text;
document.bgColor = newColor;
selObj.selectedIndex = -1;
}

//-->
</SCRIPT>
<BODY STYLE="font-family:Arial">
<B>Changing Background Colors</B>
<BR>
<FORM>
<SELECT SIZE="8" onChange="bgChange(this);">
<OPTION>Red
<OPTION>Orange
<OPTION>Yellow
<OPTION>Green
<OPTION>Blue
<OPTION>Indigo
<OPTION>Violet
<OPTION>White
<OPTION>pink
</SELECT>
</FORM>
</BODY>
</HTML>

17.将按钮的特征改变
<style type="text/css">
<!--
.style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF

#CCCCCC #CCCCCC #CCCCFF}
.style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin;

border-color: #CCFF99 #999999 #999999 #CCFF99}
-->
</style>
  本例按钮的代码如下:
<input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'"

onmouseout="this.className='style1'" class="style1">

18.改变按钮的图片.
<style type="text/css">
<!--
.style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px}
.style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width:

60px; height: 22px}
-->
</style>
  本例的按钮代码如下:
<input type="submit" name="Submit2" value="提 交" onmouseover="this.className='style4'"

onmouseout="this.className='style3'" class="style3">

19.打印页面
<div align="center"><a class="content" href="javascript:doPrint();">打印本稿</a></div>

20.可以直接写html语言
document.write("");

21.改变下拉框的颜色
<select name="classid"

onChange="changelocation(document.myform.classid.options[document.myform.classid.selectedIndex].value)"

size="1" style="color:#008080;font-size: 9pt">

22.转至目标URL
window.location="http://guoguo"

23.传递该object的form
UpdateSN('guoqiang99267',this.form)
function UpdateSN(strValue,strForm)
{
strForm.SignInName.value = strValue;
return false;
}

24.文字标签
<label for="AltName4"><input name="AltName" type="RADIO" tabindex="931" id="AltName4"

>guoqiang99859</label>

25.layer2为组件的ID,可以控制组件是否可见
document.all.item('Layer2').style.display = "block";
document.all.item('Layer2').style.display = "none";//

26.将页面加入favorite中
<script language=javascript>
<!--
function Addme(){
url = "http://your.site.address"; //你自己的主页地址
title = "Your Site Name"; //你自己的主页名称
window.external.AddFavorite(url,title);
-->
</script>//

27.过10秒自动关闭页面
< script language="JavaScript" >
function closeit() {
setTimeout("self.close()",10000)
}
< /script >

28.可以比较字符的大小
char=post.charAt(i);
if(!('0'<=char&&char<='9'))

29.将字符转化为数字
month = parseInt(char)

30.点击value非空的选项时转向指定连接
<select onchange='if(this.value!="")window.open(this.value)' class="textinput">
<option selected>主办单位</option>
<option>-----------------</option>
<option value="http://www.bjd.com.cn/">北京日报</option>
<option value="http://www.ben.com.cn/">北京晚报</option>
</select>

如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17