50个js技巧（分享）

1.文本框焦点问题

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后，产生该文件

Onchange:当文字值改变时，产生该事件

Onselect:当文字加亮后，产生该文件

<input
type="text" value="mm"
onfocus="if(value==‘mm)
{value=‘‘}" onblur="if(value==‘‘) {value=‘mm‘}">

点击时文字消失，失去焦点时文字再出现

2.网页按钮的特殊颜色

<inputtype=buttonname="Submit1"
value="郭强"
size=10class=s02style="background-color:rgb(235,207,22)">

3.鼠标移入移出时颜色变化

<inputtype="submit"
value="找吧" 
name="B1"
onMouseOut=this.style.color="blue"onMouseOver=this.style.color="red"class="button">

4.平面按钮

<inputtype=submitvalue=订阅 style="border:1px solid :#666666; height:17px;
width:25pt; font-size:9pt;BACKGROUND-COLOR: #E8E8FF; color:#666666" name="submit">

5.按钮颜色变化

<inputtype=text name="nick"
style="border:1px solid #666666;
font-size:9pt; height:17px;BACKGROUND-COLOR: #F4F4FF; color:#ff6600" size="15"
maxlength="16">

6.平面输入框

<inputtype="text"
name="T1"
size="20"
style="border-style: solid;
border-width: 1">

7.使窗口变成指定的大小

<script>window.resizeTo(300,283);</script>

8.使文字上下滚动

<marqueedirection=upscrollamount=1scrolldelay=100onmouseover=‘this.stop()‘onmouseout=‘this.start()‘height=60>

<!--
head_scrolltext -->

<tr>

<td>共和国

</table><!--
end head_scrolltext-->

</marquee>

9.状态栏显示该页状态

<baseonmouseover="window.status=‘网站建设
http://www.webmake.cn/‘ ;return true">

10.可以点击文字实现radio选项的选定

<br>

&nbsp;&nbsp;&nbsp;&nbsp;

<inputtype="radio"
name="regtype"
value="A03"
id="A03"><labelfor="A03">  情侣 : 一次注册两个帐户</label><br>

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

12.打印</a>打印网页

<a
href=‘javascript:window.print()‘>

13.线型输入框

<inputtype="text"
name="key"
size="12"
value="关键字"
onFocus=this.select()onMouseOver=this.focus()class="line">

14.显示文档最后修改日期

<scriptlanguage=javascript>function hi(str){
document.write(document.lastModified) alert("hi"+str+"!")}</script>

15.可以在鼠标移到文字上时就触发事件

<html>

<head>

<scriptlanguage="LiveScript">

<!-- Hiding
function hello() {
alert("哈罗!");
}

</script>

</head>

<body>

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

<BODYSTYLE="font-family:Arial">

<B>Changing
Background Colors</B>

<BR>

<FORM>

<SELECT
SIZE="8" onChange="bgChange(this);">

<OPTION>Red<OPTION>

<OPTION>Yellow<OPTION>

<OPTION>Blue<OPTION>

<OPTION>Violet<OPTION>

<OPTION>pink<OPTION>

</SELECT>

</FORM>

</BODY>

</HTML>

17.将按钮的特征改变

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

本例按钮的代码如下：

<inputtype="submit"
name="Submit"
value="提 交"
onmouseover="this.className=‘style2‘"onmouseout="this.className=‘style1‘"
class="style1">

18.改变按钮的图片.

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

本例的按钮代码如下：

<inputtype="submit"
name="Submit2"
value="提 交"
onmouseover="this.className=‘style4‘"onmouseout="this.className=‘style3‘"
class="style3">

19.打印页面<divalign="center"><aclass=contenthref="javascript:doPrint();">打印本稿</a></div>

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

21.改变下拉框的颜色

<selectname="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的formUpdateSN(‘guoqiang99267‘,this.form)function
UpdateSN(strValue,strForm){ strForm.SignInName.value = strValue; return
false;}

24.文字标签

<labelfor="AltName4">

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

<scriptlanguage=javascript>

<!--function
Addme(){

url
="http://your.site.address";//你自己的主页地址title="Your Site
Name";//你自己的主页名称window.external.AddFavorite(url,title);-->

</script>//

27.过10秒自动关闭页面

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

31.改变背景颜色

<tdwidth=* class=dp bgColor=#FAFBFConmouseover="this.bgColor=‘#FFFFFF‘;"onmouseout="this.bgColor=‘#FAFBFC‘;">

32.改变文字输入框的背景颜色

<style>

.input2{background-image:
url(‘../images/inputbg.gif‘);
font-size:
12px;
background-color:#D0DABB;border-top-width:1px;
border-right-width:
1px;
border-bottom-width:
1px;
border-left-width:
1px

}

</style>

<inputname=contenttype=text size="47"
class="input2"
maxlength="50">

33.改变水平线的特征

<hrsize="0"
noshade color="#C0C0C0">

34.传递参数的方式

<ahref="vote.asp?CurPage=8&id=3488">8</a>

35.页内跳转

<a
href="#1">1</a>

<ahref="#2">2</a>

<ahref="#3">3</a>

<ahref="#4">4</a>

<ahref="#5">5</a>

<ahref="#6">6</a>

<ahref="#7">7</a>

<aname="1">dfdf</a>

<aname="2">dfdf</a>//

36.两个按键一起按下

if(event.ctrlKey &&
window.event.keyCode==13)//

37.刷新页面

javascript:this.location.reload()//

38.将网页的按钮使能

<SCRIPTLANGUAGE="JavaScript">

function haha(){

for(var
i=0;i<document.form1.elements.length;i++)
{

if(document.form1.elements[i].name.indexOf("bb")!=-1)

document.form1.elements[i].disabled=!document.form1.elements[i].disabled;

}

}

</SCRIPT>

<BODY>

<formname=form1>

<INPUTTYPE="button"
NAME="aa "
value=cindyonclick=haha()>

<INPUTTYPE="button"
NAME="bb "
value=guoguo>

<INPUTTYPE="button"
NAME="bb "
value=guoguo>

39.文字移动

<marqueescrollamount=3onmouseover=this.stop();onmouseout=this.start();>

40.双击网页自动跑

<SCRIPTLANGUAGE="JavaScript">

var
currentpos,timer;function
initialize(){

timer=setInterval("scrollwindow()",1);

}

function sc(){

clearInterval(timer);

}function
scrollwindow(){

currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);

if
(currentpos!=
document.body.scrollTop) sc();

}document.onmousedown=scdocument.ondblclick=initialize</SCRIPT>//

41.后退<INPUTTYPE="button"
onclick=window.history.back()value=back>

42.前进<INPUTTYPE="button"
onclick=window.history.forward()value=forward>

43.刷新<INPUTTYPE="button"
onclick=document.location.reload()value=reload>

44.转向指定网页

document.location="http://ww"或者document.location.assign(http://guoguo.com)

45.在网页上显示实时时间

<SCRIPTLANGUAGE="JavaScript">var
clock_id;window.onload=function(){
clock_id=setInterval("document.form1.txtclock.value=(new
Date);",1000)}</SCRIPT>//

46.可以下载文件document.location.href="目标文件"//

47.连接数据库

import java.sql.*;String
myDBDriver="sun.jdbc.odbc.JdbcOdbcDriver";Class.forName(myDBDriver);Connection
conn=DriverManager.getConnection("jdbc:odbc:firm","username","password");Statement
stmt=conn.createStatement();ResultSet
rs=stmt.executeQuery(sql);rs.getString("column1");//

48.可以直接在页面“div”内写下所需内容

<INPUTTYPE="button"
onclick="a1.innerHTML=‘<font
color=red>*</font>‘"><divid=a1></div>//

49.可以改变页面上的连接的格式，使其为双线<style>

A:link
{text-decoration:
none;
color:#0000FF;
font-family:
宋体}

A:visited
{text-decoration:
none;
color:
#0000FF;
font-family: 
宋体}

A:hover
{text-decoration: underline
overline;
color:
FF0000}

</style>

<style>

A:link
{text-decoration:
none;
color:#0000FF;
font-family:
宋体}

A:visited
{text-decoration:
none;
color:
#0000FF;
font-family: 
宋体}

A:hover
{text-decoration: underline
overline line-through;
color:
FF0000}

TH{FONT-SIZE:
9pt}TD{FONT-SIZE:
9pt}

body
{SCROLLBAR-FACE-COLOR:#A9D46D;

SCROLLBAR-HIGHLIGHT-COLOR:
#e7e7e7;

SCROLLBAR-SHADOW-COLOR:#e7e7e7;

SCROLLBAR-3DLIGHT-COLOR:
#000000;

LINE-HEIGHT:
15pt;

SCROLLBAR-ARROW-COLOR:
#ffffff;

SCROLLBAR-TRACK-COLOR:
#e7e7e7;

}

INPUT{

BORDER-TOP-WIDTH:
1px;

PADDING-RIGHT:
1px;

PADDING-LEFT:
1px;

BORDER-LEFT-WIDTH:
1px;

FONT-SIZE:9pt;

BORDER-LEFT-COLOR:
#cccccc;

BORDER-BOTTOM-WIDTH:
1px;

BORDER-BOTTOM-COLOR:
#cccccc;

PADDING-BOTTOM:
1px;

BORDER-TOP-COLOR:
#cccccc;

PADDING-TOP:
1px;
HEIGHT:
18px;

BORDER-RIGHT-WIDTH:
1px;

BORDER-RIGHT-COLOR:
#cccccc

}

DIV,form
,OPTION,P,TD,BR{

FONT-FAMILY:
宋体; 
FONT-SIZE:
9pt

}

textarea,
select{

border-width:
1;

border-color:
#000000;

background-color:
#efefef;

font-family:
宋体;font-size:
9pt;

font-style:
bold;

}

.text{
font-family:
"宋体";

font-size:
9pt;

color:
#003300;

border: #006600
solid;

border-width: 1px 1px1px
1px

}

</style>

完整的css

50.新建frame<ahref="javascript:newframe(‘http://www.163.net/help/a_little/index.html‘,‘http://www.163.net/help/a_little/a_13.html‘)"><imgalt=帮助 border=0 src="http://bjpic.163.net/images/mail/button-help.gif"></a>

时间： 2024-08-10 00:20:40

50个js技巧（分享）的相关文章

冷门JS技巧

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开

提升开发幸福感的10条JS技巧

总结一些能够提高开发效率的JS技巧,这些技巧很实用,觉得挺好,想推荐给大家,所以有了这篇文章. 生成随机UID const genUid = () => { var length = 20 var soupLength = genUid.soup_.length var id = [] for (var i = 0; i < length; i++) { id[i] = genUid.soup_.charAt(Math.random() * soupLength) } return id.jo

webstorm的中文教程和技巧分享

webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu.com/s/1pJI9PMV WebStorm为前端javascript开发而生,专门为 javascript开发做了很多优化,令前端工程师眼前一亮的. 一.webstorm的功能 1.webstorm的智能的代码补全: 支持不同浏览器的提示,还包括所有用户自定义的函数(项目中) 代码补全包含了所有

50分钟学会Laravel 50个小技巧

50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45  Yuansir-web菜鸟 原文  http://www.yuansir-web.com/2015/12/09/50分钟学会laravel-50个小技巧/ 主题 Laravel 转载请注明:转载自 Yuansir-web菜鸟 | LAMP学习笔记 本文链接地址: 50分钟学会Laravel 50个小技巧 原文链接:< 50 Laravel Tricks in 50 Minutes by willroth >

AG真人视讯技巧分享,押注玩法、平台入口7711833.com

AG真人视讯平台入口7711833.com技巧分享,押注玩法玩ag视讯经验:我简单说几句个人的一些经验,ag视讯.bb视讯 选桌子的一些小技巧,我一般是看盘感选桌子,刚开不就或者开了三分之二的个人感觉比较顺.大致方向和冷热号比较明确. 怎么看路子,其实是顺龙跟跳,不过我不会把把买,感觉顺的时候我会做几期的计划,稍加本金的30%的注码,如果不中的时候我会收,均注继续摸索好的路子. 玩ag视讯不建议长时间的拉锯战,有时候好的路子不要浪费,但最好不要连续的倍投,×××玩的就是心跳,但真金白银也只是数字

用户界面设计经验分享：界面设计技巧分享

如此有用的文章我已记不得是什么时候发现的了,但在看完的那一刻便想将之翻译,分享给大家自己也受用. 时间过了很久,来到了2014年,终于静下心来花了大把时间连同图片一起译成了中文.像我这样业余的翻译六级分数只够及格的程序员,不敢说做到信雅达,但求意思到位. 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控.同时用户也可以一目了然内容.而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达.最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮. 2 放出礼品往往更具

SharePoint 2013技巧分享系列 - 同步Exchange显示高清用户照片

在"SharePoint 2013技巧分享系列 - Active Directory同步显示用户照片"文中介绍了如何同步Active Directory显示用户照片,但是同步完成后,用户照片尺寸和清晰度都不是非常理想.本文将介绍如何同步Exchange Server显示高清用户照片. 原理 与SharePoint Server 2010相似, 在SharePoint Server 2013中存在一个用户照片的目录.当SharePoint启用Exchange照片同步时, SharePoi

win10系统操作技巧分享

Win10系统正式版发布后,很多人都迫不及待更新了win10系统.不少的人在更新了win10系统之后才发现win10系统操作起来并不是那么得心应手,win10系统要怎么操作呢?win10系统操作的技巧是怎样的呢?那么,小编就把win10系统操作技巧分享给大家! Win10技巧1.窗口1/4分屏 从Win7时代开始,微软便引入了屏幕热区概念,即当你需要将一个窗口快速缩放至屏幕1/2尺寸时,只需将它直接拖拽到屏幕两边即可.在Win10中你会发现这项功能大大加强,除了左.右.上这三个热区外,我们还能拖

论文写作技巧分享

中学生初学议论文写作时,往往无从下手,即使勉强去写,也往往是以叙代议,或空发议论,不符合议论文的基本要求.这是中学生作文训练中从记叙文过渡到议论文时经常且普遍出现的现象.为了帮助学生解决这个问题,给他们一个入门向导,我在指导议论文训练时试用了以下四种方法,效果较好.现以命题作文为例,把四种方法的运用情况介绍如下,供广大师生参考. 一.宽大题目缩小做 所谓宽大题目,指文题从字面上看是要讲大道理的,论述范围很宽泛,初写议论文的人一时还难以驾驭它.对这样的文题,就需要"小做",即把文题适当&