>웹 프론트엔드 >JS 튜토리얼 >일반적인 자바스크립트 코딩 기술_양식 효과 모음

일반적인 자바스크립트 코딩 기술_양식 효과 모음

WBOY
WBOY원래의
2016-05-16 18:55:43964검색
1. 텍스트 상자 포커스 문제
onBlur: 입력 포커스를 잃었을 때 발생하는 이벤트
onFocus: 입력이 포커스를 얻었을 때 파일이 생성됩니다.
Onchange: 텍스트가 값이 변경되면 이 이벤트 생성
Onselect: 텍스트가 강조 표시되면 이 파일을 생성
클릭하면 텍스트가 사라졌다가 포커스를 잃으면 다시 나타납니다
2. 웹 버튼의 특수 기능 Color
style="Background-color:rgb(235,207,22) ">
3. 마우스가 들어오고 나갈 때 색상이 변합니다
onMouseOver =this.style.color="red" class="button">
4. 플랫 버튼
배경색: #E8E8FF; 색상:#666666" name="제출">
5. 버튼 색상 변경

6. 평면 입력 상자

7. 창을 지정된 크기

8. 텍스트를 위아래로 스크롤합니다.
height=60>



공화국<script> <BR>window.resizeTo(300,283); <BR></script>

9.状态栏显示该页状态

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


    


11.可以在文字域的font写onclick事件
12.打印
打印网页
13.线型输入框
class="line">
14.显示文档最后修改日期

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





link


16.可以根据网页上的选项来确定页面颜色


background.html

<script> <BR><!-- <BR>function bgChange(selObj) { <BR>newColor = selObj.options[selObj.selectedIndex].text; <BR>document.bgColor = newColor; <BR>selObj.selectedIndex = -1; <BR>} <BR>//--> <BR></script>

Changing Background Colors







17.将按钮的特征改变

  本例按钮的代码如下:
onmouseout="this.className='style1'" class="style1">
18.改变按钮的图片.

  本例的按钮代码如下:
onmouseout="this.className='style3'" class="style3">
19.打印页面

20.可以直接写html语言
document.write("");
21.改变下拉框的颜色
>guoqiang99859
25.layer2为组件的ID,可以控制组件是否可见
document.all.item('Layer2').style.display = "block";
document.all.item('Layer2').style.display = "none";//
26.将页面加入favorite中
//
27.过10秒自动关闭页面

function closeit() {
setTimeout("self.close()",10000)
}

28.可以比较字符的大小
char=post.charAt(i);
if(!('0'29.将字符转化为数字
month = parseInt(char)
30.点击value非空的选项时转向指定连接

31.改变背景颜色
onmouseout="this.bgColor='#FAFBFC';">
32.改变文字输入框的背景颜色


33.改变水平线的特征


34.传递参数的方式
8
35.页内跳转
1
2
3
4
5
6
7
dfdf
dfdf//
36.两个按键一起按下
if(event.ctrlKey && window.event.keyCode==13)//
37.刷新页面
javascript:this.location.reload()//
38.将网页的按钮使能





39.文字移动

40.双击网页自动跑
//
41.后退

42.前进

43.刷新

44.转向指定网页
document.location=http://blog.csdn.net/lxs5i5j/archive/2007/01/22/"http://ww"或者document.location.assign(http://blog.csdn.net/lxs5i5j/archive/2007/01/22/"http://guoguo.com")
45.在网页上显示实时时间
//
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”内写下所需内容

//
49.可以改变页上的连接的格式,使其为双线

A:link {text-꾸밈: 없음; 색상:#0000FF; 글꼴 계열: 宋体} A:visited {텍스트 장식: 없음; 색상: #0000FF; 글꼴 계열: 宋体}
A:hover {텍스트 장식: 밑줄 윗줄; 색상: FF0000}

帮助A:link {텍스트 장식: 없음; 색상:#0000FF; 글꼴 계열: 宋体}
A:visited {text-꾸밈: 없음; 색상: #0000FF; 글꼴 계열: 宋体}
A:hover {text-장식: 밑줄 윗줄 선 통과; color: FF0000}
TH{FONT-SIZE: 9pt} TD{FONT-SIZE: 9pt}
body {SCROLLBAR-FACE-COLOR: #A9D46D; 스크롤바-하이라이트-색상: #e7e7e7;스크롤바-그림자-색상:#e7e7e7; 스크롤바-3DLIGHT-색상: #000000; 줄 높이: 15pt; 스크롤바-화살표-색상: #ffffff;
스크롤바-트랙-색상: #e7e7e7;}
입력{테두리-위-너비: 1px; PADDING-RIGHT: 1px; 패딩-왼쪽: 1px; 테두리-왼쪽-너비: 1px; 글꼴 크기:
9pt; 테두리-왼쪽-색상: #cccccc;
테두리-하단-너비: 1px; 테두리-하단-색상: #cccccc; 패딩 하단: 1px; 테두리 상단 색상: #cccccc;
PADDING-TOP: 1px; 높이: 18px; 테두리 오른쪽 너비: 1px; BORDER-RIGHT-COLOR: #cccccc}
DIV,form ,OPTION,P,TD,BR{FONT-FAMILY: 宋体; 글꼴 크기: 9pt}
텍스트 영역에서 {border-width: 1; 테두리 색상: #000000; 배경색: #effefef; 글꼴 모음: 宋体;
글꼴 크기: 9pt; 글꼴 스타일: 굵게;}
.text { 글꼴 계열: "宋体"; 글꼴 크기: 9pt; 색상: #003300; 테두리: #006600 실선; border-width: 1px 1px
1px 1px}
完整的css
50.new建frame
href="javascript:newframe('http://www .163.net/help/a_little/index.html','http://www.163.net/help/a_little
/a_13.html')">

51.向文件中写内容
String str = "인쇄"; //항상 루트에서 경로를 제공합니다. 이런 식으로 거의 항상 작동합니다.
String nameOfTextFile = "/usr/anil/imp.txt"; 시도
{ PrintWriter pw = new PrintWriter(new FileOutputStream(nameOfTextFile));
pw.println(str); //정리
pw.close(); }
catch(IOException e)
{ out.println(e.getMessage());
}
%>
52.先读文件再写文件









eryrytry int count=0;
FileInputStream fi =new FileInputStream("count.txt");
FileOutputStream fo =new FileOutputStream("count.txt");
ObjectOutputStream so= new ObjectOutputStream(fo);
so.writeInt(count);
so.close();
%>
53.直线型输入框
54.可以将背景改为按钮性状,통过改变css改变属性 onmouseout=this.className='mouseout';>
color="#000000">录音笔

. mouseoverbt {

배경 이미지: url(file:///c|/">

// 85.当前屏幕的分辨率 screen.width、screen .height//

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

87.本地快捷键

网上邻居

我的电脑<script> <BR>window.resizeTo(300,283); <BR></script> <script> <BR><!-- <BR>function bgChange(selObj) { <BR>newColor = selObj.options[selObj.selectedIndex].text; <BR>document.bgColor = newColor; <BR>selObj.selectedIndex = -1; <BR>} <BR>//--> <BR></script>我文档 <script> <BR>var contents='<style>body,td{font:menu}img{cursor:hand}'; <BR>contents+='<title>你要关闭我吗'; <BR>contents+='<body bgcolor=menu>'; <BR>contents+='<table width=100% height=100% border=0>'; <BR>contents+='<tr><td align=center>'; <BR>contents+='你要关闭我吗?<br>'; <BR>contents+='<img src=http://www.aspxclub.com/UploadFile/Material/1/1281.gif onclick=self.close() alt="일반적인 자바스크립트 코딩 기술_양식 효과 모음">'; <BR>contents+='<img src=http://www.aspxclub.com/UploadFile/Material/1/1282.gif onclick=self.close() alt="일반적인 자바스크립트 코딩 기술_양식 효과 모음">'; <BR>contents+='</script>
';
showModalDialog("about:"+contents+"","","dialogHeight:50px;dialogWidth:250px;help:no;status:no")
document.write(contents);
回收站 target="_blank">추억제면板 拨号网络(windows 2000)
88.IE菜单
//改变按钮上的图片
//创建新连接
//打印
//另存为htm
//另存为txt
document.execCommand("SaveAs")//保存为
document.execCommand('undo')//撤销上一次操作
89.web对话框
<script> <BR>var contents='<style>body,td{font:menu}img{cursor:hand}'; <BR>contents+='<title>你要关闭我吗'; <BR>contents+='<body bgcolor=menu>'; <BR>contents+='<table width=100% height=100% border=0>'; <BR>contents+='<tr><td align=center>'; <BR>contents+='你要关闭我吗?<br>'; <BR>contents+='<img src=http://www.aspxclub.com/UploadFile/Material/1/1281.gif onclick=self.close() alt="일반적인 자바스크립트 코딩 기술_양식 효과 모음">'; <BR>contents+='<img src=http://www.aspxclub.com/UploadFile/Material/1/1282.gif onclick=self.close() alt="일반적인 자바스크립트 코딩 기술_양식 효과 모음">'; <BR>contents+=''; <BR>showModalDialog("about:"+contents+"","","dialogHeight:50px;dialogWidth:250px;help:no;status:no") <BR>document.write(contents); <BR></script>//
90.取第x,y的值
//
91.向新打开的网页上写内容
newwin=window.open('about:blank','','top=10');
newwin.document.write('');//
93.返回
javascript:history.go(-2);//
94.将页面上选中的内容复制到剪贴板
abcdefg
onclick="window.clipboardData.setData('text',document.selection.createRange().text);" value='复制页面选中
的字符'>//
95.将页面上选中的内容复制到剪贴板
kjhkjhkhkj////
96.鼠标移到下拉框时自动全部打开
//
97.获得本机的文件
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.GetFile("C:\\bsitcdata\\ejbhome.xml");
alert("File last modified: " + f1.DateLastModified); //
98.判断客户端是否是IE浏览器
因为 document.all 是 IE 的特有属性,所以通常用这个方法来判断客户端是否是IE浏览器 ,document.all?1:0;
99.创建新的下拉框选项
new Option(text,value)这样的函数//
100.在页面上画柱状图



%12
4人backdepth='15pt' on='true'/>


%12
4人backdepth='15pt' on='true'/>
//
101.饼图





onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'
CoordSize='10,10' strokecolor='white' fillcolor='#ffff33'>

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'
CoordSize='10,10' strokecolor='white' fillcolor='#ff9933'>

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'
CoordSize='10,10' strokecolor='white' fillcolor='#3399ff'>

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'
CoordSize='10,10' strokecolor='white' fillcolor='#99ff33'>

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'
CoordSize='10,10' strokecolor='white' fillcolor='#ff6600'>

onmouseover='javascript:show(this);' onmouseout='javascript:hide(this);' href='http://www.cnADO.com'
CoordSize='10,10' strokecolor='white' fillcolor='#ff99ff'>




style='fontsize:2'>asp技术/>

style='fontsize:2'>php/>

style='fontsize:2'>jsp/>

style='fontsize:2'>c#写的.netWEB程序/>

vb.net
写的.netWEB程序
/>


xml技术
/>



style="border-collapse: collapse" bordercolor="#CCCCCC" width="100%" ID="Table1">



 

//
102.是一个特殊的容器,想装个网页都行
//button
103.外部的html代码
event.srcElement.outerHTML//
104.标识当前的IE事件的触发器
event.srcElement和event.keyCode//
105.事件类型
event.type//
106.动态改变类型

//
107.页面翻转
//
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.