`
wubing2789
  • 浏览: 7074 次
  • 性别: Icon_minigender_1
  • 来自: 鞍山
社区版块
存档分类
最新评论

Javascript技巧大集合

JavaScriptCSSASP.netHTMLSQL 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 <P>
 1.文本框焦点问题
 <input type="text" value="郭强" onfocus="if(value=='郭强') {value=''}" onblur="if (value=='') {value='郭强'}">
</p>

<p>
2.网页按钮的特殊颜色
<input type=button name="Submit1" value="郭强" size=10 class=s02 style="background-color:rgb(235,207,22)">
</p>

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

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

BACKGROUND-COLOR: #E8E8FF; color:#666666" name="submit">
</p>
<p>
5.按钮颜色变化
<input type=submit name="nick" style="border:1px solid #666666; font-size:9pt; height:17px;
BACKGROUND-COLOR: #F4F4FF; color:#ff6600" size="15" maxlength="16">
</p>

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

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

<p>
8.使文字上下滚动
<marquee direction=up scrollamount=3 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()'
height=80>
共和国
</marquee>
</p>

<p>
9.状态栏显示该页状态
<base onmouseover="window.status='网站建设 http://www.webmake.cn/' ;return true">
</p>
<p>
10.可以点击文字实现radio选项的选定
<br>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="regtype" value="A03" id="A03">
<label for="A03"> 情侣 : 一次注册两个帐户</label> <br>
</p>

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

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

<p>
14.显示文档最后修改日期
<script language=javascript>
function hi(str)
{
document.write(document.lastModified)
alert("hi"+str+"!")
}
</script>
</p>

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

<p>
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>
</P>

<p>
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">
</P>

<p>
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">
</P>

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

<p>
21.改变下拉框的颜色
<select name="classid" onChange="changelocation(document.myform.classid.options[document.myform.classid.selectedIndex].value)"
size="1" style="color:#008080;font-size: 9pt">
</select>
</P>

<p>
22.转至目标URL
<!--
window.location="http://guoguo"
-->
</P>

<p>
23.传递该object的form
<!--
UpdateSN('guoqiang99267',this.form)
function UpdateSN(strValue,strForm)
{
strForm.SignInName.value = strValue;
return false;
}
-->
</P>

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

<p>
25.layer2为组件的ID，可以控制组件是否可见
<script>
document.all.item('AltName4').style.display = "block";
document.all.item('AltName4').style.display = "none";
</script>

</P>

<P>
27.过3秒自动关闭页面
<!--
<script language="JavaScript" >
function closeit() {
setTimeout("self.close()"，3000)
}
</script >
-->
</p>

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

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

<p>
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>
</P>

<p>
31.改变背景颜色
<td width=* class=dp bgColor=#FAFBFC onmouseover="this.bgColor='#FFFFFF';"
onmouseout="this.bgColor='#FAFBFC';">
</td>
</P>

<p>
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>
<input name=content type=text size="47" class="input2" maxlength="50">
</P>

<p>
33.改变水平线的特征
<hr size="0" noshade color="#C0C0C0">
</P>

<p>
35.页内跳转
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
<a href="#6">6</a>
<a href="#7">7</a>
<a name="#1">dfdf</a>
<a name="#2">dfdf</a>/
</P>

<p>
38.将网页的按钮不可点击
<SCRIPT LANGUAGE="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><form name=form1>
<INPUT TYPE="button" NAME="aa " value=cindy onclick=haha()>
<INPUT TYPE="button" NAME="bb " value=guoguo>
<INPUT TYPE="button" NAME="bb " value=guoguo>
</P>


<p>
45.在网页上显示实时时间
<SCRIPT LANGUAGE="JavaScript">

var clock_id;
window.onload=function()
{
clock_id=setInterval("document.form1.txtclock.value=(new Date);",1000)
}
</SCRIPT>
<INPUT TYPE="text" NAME="txtclock">
</P>


<p>
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");//
-->
</P>


<p>
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-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 1px

1px 1px}

</style>完整的css
-->

</P>
50.新建frame
<a href="javascript:newframe('http://www.163.net/help/a_little/index.html','http://www.163.net/help/a_little
/a_13.html')"><img alt=帮助 border=0 src="http://www.rdxx.com/Files/Pic/2007-9/13/JFCC87I9H8A63D7516.gif"></a>


<p>
53.直线型输入框
<INPUT name=Password size=10 type=password style="border-left-width: 0; border-right-width: 0;
border-top-width: 0; border-bottom-style: solid; border-bottom-width: 1; background-color: #9CEB9C">
</P>

<p>
54.可以将背景改为按钮性状，通过改变css改变属性
<td width="65" align="center" bgcolor="#E0E0E0" onmouseover=this.className='mouseoverbt';
onmouseout=this.className='mouseout';><a href="tm.asp?classid=76"><font color="#000000">录音笔</font></a></td>
<style>
.mouseoverbt
{
background-image: url(http://www.yongle.com.cn/img/btbgw64h20y.gif);
background-repeat: no-repeat;
}
.mouseout
{
background-color: #E0E0E0;
}
</style>


</P>
65.定时执行某段程序
<!--
setTimeout("change_color()",600);
-->

<p>
71.禁止选择页面上的文字来拷贝
<!--
<script>
function noEffect() {
with (event) {
returnValue = false;
cancelBubble = true;
}
return;
}
</script>
<body onselectstart="noEffect()" oncontextmenu="noEffect()">
-->
</P>

<p>
79.获得当前的行是表格的第几行
<script>
function getrow(obj)
{
if(event.srcElement.tagName=="TD"){
curRow=event.srcElement.parentElement;
alert("这是第"+(curRow.rowIndex+1)+"行");
}
}
</script>
<table border="1" width="100%" onclick=getrow(this)>
<tr>
<td width="20%">　</td>
<td width="20%">　</td>
<td width="20%">　</td>
<td width="20%">　</td>
<td width="20%">　</td>
</tr>
<tr>
<td width="20%">　</td>
<td width="20%">　</td>
<td width="20%">　</td>
<td width="20%">　</td>
<td width="20%">　</td>
</tr>
</table>
</P>


<p>
83.显示是鼠标按钮的哪个键
<!--
<body onMouseDown="alert(event.button)">点Mouse看看//
-->
</P>

<p>
84.打开C盘
<!--
<form action="file:///c|/"><input type="submit" value="c:\ drive"></form>
-->

</P>

<p>
86.设置表格中的内容
<!--
tbl.rows[0].cells[1].innerText=document.form.text1.value;//
-->
</P>


<p>
113.鼠标为等待形状
<input type=button onclick="this.style.cursor='wait'">
</P>

<p>
117.交换节点
<table width=200 height=200 border>
<tr><td id=c1>CELL_1</td></tr>
<tr><td id=c2>CELL_2</td></tr>
</table>
<br>
<input type="button" value="swap row" onclick="c1.swapNode(c2)">
</P>

<p>
221.能输入的下拉框
<span>
<input name="Department1" id="Department1" style=" border-right:0;width:130" autocomplete="off">
<span style="width:150;overflow:hidden">
<select style="width:150;margin-left:-130" onChange="Department1.value=value">
<option value=""></option>
<option value="asdfasfadf">asdfasfadf</option>
<option value="546546">546546</option></select>
</P>


 </body>
</html>

分享到：
| Struts的html标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics