[导入]javascript总结
1.动态添加一行，和删除当前行
<script>
var count=0;
function ff()
{
var txt1=document.getElementById("Text1");
var table1=document.getElementById("table1");
rowNo=table1.rows.length;
Tr=table1.insertRow(rowNo);
Tr.id="tr"+count;
Td=Tr.insertCell(0);
Td.id="td"+count;
Td.innerText=txt1.value;
Td2=Tr.insertCell(1);
Td2.innerHTML+='<input οnclick="del(this)" type="button" value="删除"/>'
count +=1;
}
function del(btn)
{
var tr=btn.parentNode.parentNode;
var tb=tr.parentNode;
tb.removeChild(tr);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<input id="Text1" runat="server" type="text" NAME="Text1">
<table id="table1" border="1" bordercolor="red">
</table>
<input id="Button1" type="button" οnclick="ff()">
</form>
</body>
</HTML>
2。表格斜线
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute; left: "+(x+20)+"; top: "+(y+20)+";background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>
<body leftmargin=20 topmargin=20>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400>
<TR bgcolor="FFFFFF">
<TD id="td1"> </TD>
<TD>张三</TD>
<TD>李四</TD>
<TD>王五</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>数学</TD>
<TD>55</TD>
<TD>66</TD>
<TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>英语</TD>
<TD>99</TD>
<TD>68</TD>
<TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>语文</TD>
<TD>33</TD>
<TD>44</TD>
<TD>55</TD>
</TR>
</TABLE>
<script>
function line(x1,y1,x2,y2,color)
{
var tmp
if(x1>=x2)
{
tmp=x1;
x1=x2;
x2=tmp;
tmp=y1;
y1=y2;
y2=tmp;
}
for(var i=x1;i<=x2;i++)
{
x = i;
y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;
a(x,y,color);
}
}
//line(1,1,100,100,"000000");
line(td1.offsetLeft,td1.offsetTop,td1.offsetLeft+td1.offsetWidth,td1.offsetTop+td1.offsetHeight,'#000000')
</script>
</BODY>
</HTML>
3。可拖动的Table
<SCRIPT LANGUAGE="JavaScript">
<!--
var currentMoveObj = null; //当前拖动对象
var relLeft; //鼠标按下位置相对对象位置
var relTop;
var zindex=-1;//控制被拖动对象的z-index值
function f_mdown(obj)
{
currentMoveObj = obj; //当对象被按下时，记录该对象
currentMoveObj.style.position = "absolute";
relLeft = event.x - currentMoveObj.style.pixelLeft;
relTop = event.y - currentMoveObj.style.pixelTop;
zindex=currentMoveObj.style.zIndex;//记录原z-index值
currentMoveObj.style.zIndex=10000;
}
window.document.onmouseup = function()
{ currentMoveObj.style.zIndex=zindex;//恢复
zindex=-1;
currentMoveObj = null; //当鼠标释放时同时释放拖动对象
}
function f_move(obj)
{
if(currentMoveObj != null)
{
currentMoveObj.style.pixelLeft=event.x-relLeft;
currentMoveObj.style.pixelTop=event.y-relTop;
}
}
//-->
</SCRIPT>
<BODY>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
<TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" οnmοusedοwn="f_mdown(this)" οnmοusemοve="f_move(this)">
<TR>
<TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>
</TR>
<TR>
<TD align="center" height="60">content</TD>
</TR>
</TABLE>
</BODY>
2.解析XML 成Table
<XML ID="oXmlData">
<tab>
<row>
<col name="Col1"/>
<col name="Col2"/>
<col name="Col3"/>
</row>
<row>
<col name="Col4"/>
<col name="Col5"/>
<col name="Col6"/>
</row>
<row>
<col name="Col7"/>
<col name="Col8"/>
<col name="Col9"/>
</row>
</tab>
</XML>
<input type="button" value="生成XML表格" onClick="createXmlTable()">
<div id="oDiv_createXmlTable"></div>
<script language="JavaScript">
function createXmlTable(){
var HTML='';
var row=oXmlData.XMLDocument.getElementsByTagName('row');
var col=oXmlData.XMLDocument.getElementsByTagName('col');
HTML+='<table border><tr>';
for(i=1;i<col.length+1;i++){
HTML+='<td>'+col[i-1].getAttribute('name')+'</td>';
if(i%row.length==0 && i!=col.length) HTML+='</tr><tr>';
}
HTML+='</tr></table>';
oDiv_createXmlTable.innerHTML=HTML;
}
</script>
4.可拖动的列
<style>
.tdLine {
float:right;
width:6px;
cursor:w-resize;
height:100%;
background:red;
}
</style>
<body>
<table border="1">
<tr>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
<td width="120"><div class="tdLine" οnmοusedοwn="run(this)"></div></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script>
function run(obj){
var _sx = event.x;
document.onmouseup = function(){
this.onmousemove = null;
}
document.onmousemove = function(){
var _xx = event.x - _sx;;
obj.parentNode.width = obj.parentNode.width * 1 + _xx;
_sx = event.x;
window.status = "x = " + _sx;
}
}
</script>
6。javascript setTimeout 和 setInterval的区别
setTimeout (表达式,延时时间)
setInterval(表达式,交互时间)
延时时间/交互时间是以豪秒为单位的(1000ms=1s)
setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
setInterval 在执行时,它从载入后,每隔指定的时间就执行一次表达式
set Timeout 也可以实现象setInterval一样的功能
set Timeout:
<script language="javascript">
var i;
i=0;
function reloop()
{
i=i+1;
alert(String(i));
setTimeout("reloop()",1000);
}
reloop();
</script>
setInterval:
<script language="javascript">
var i;
i=0;
function reloop()
{
i=i+1;
alert(String(i));
}
setInterval("reloop()",1000);
</script>
7.取得鼠标所在位置的对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 取得鼠标所在位置的对象 </TITLE>
<META NAME="Author" CONTENT="宝玉 [url]http://www.nwpubbs.net[/url]">
</HEAD>
<script language="javascript">
<!--
function fnGetTable( oEl )
{
try{
while( null != oEl && oEl.tagName!="TABLE" )
{
oEl = oEl.parentElement;
}
return oEl;
}
catch(e)
{
return null;
}
}
function pos()
{
try{
oElement = document.elementFromPoint(event.x,event.y);
oElement = fnGetTable(oElement);
if(oElement.tagName=="TABLE")
show.innerText=oElement.id;
}
catch(e)
{}
}
// -->
</script>
<BODY οnmοusemοve="pos()">
<table border="1" cellpadding="" cellspacing="" width="" id="table1">
<tr>
<td>table1</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table2">
<tr>
<td>table2</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table3">
<tr>
<td>table3</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table4">
<tr>
<td>table4</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table5">
<tr>
<td>table5</td>
</tr>
</table><br /><br />
<table border="1" cellpadding="" cellspacing="" width="" id="table6">
<tr>
<td>table6</td>
</tr>
</table><br /><br />
鼠标当前在：<span id="show"></span>
</BODY>
</HTML>
9。精典的拖动效果
<html>
<head>
<title>_xWin</title>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='slategray';//color;
var index=10000;//z-index;
var xx;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
sha.style.left = parseInt(win.style.left) + offx;
if ((y1 + event.clientY - y0)>0 && (y1 + event.clientY - y0)<600){
win.style.top = y1 + event.clientY - y0;
sha.style.top = parseInt(win.style.top) + offy;
}
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display=="none";
if(flg)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
//关闭;
function cls(obj)
{
var win = obj.parentNode.parentNode.parentNode;
//var sha = win.nextSibling;
win.style.visibility = "hidden";
//sha.style.visibility = "hidden";
}
//显示/隐藏;
function ShowHide()
{
if (xx!=null)
if (xx.style.visibility == "hidden")
xx.style.visibility = "visible";
else if (xx.style.visibility == "visible")
xx.style.visibility = "hidden";
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
xx = document.getElementById('allx');
xx.style.visibility = "visible";
}
//初始化;
function bulid()
{
var str = ""
+ "<div id='allx'><div id='xMsg'" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:11px;"
+ "font-family:Verdana;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "' "
+ "οnmοusedοwn='getFocus(this)'>"
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "' "
+ "οnmοusedοwn='startDrag(this)' "
+ "οnmοuseup='stopDrag(this)' "
+ "οnmοusemοve='drag(this)' "
+ "οndblclick='min(this.childNodes[1])'"
+ ">"
+ "<span style='width:" + (this.width-2*14-4) + ";padding-left:3px;'>" + this.title + "</span>"
+ "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='min(this)'>0</span>"
+ "<span style='width:14;border-width:0px;color:white;font-family:webdings;' οnclick='cls(this)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div id='xshadow' style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "'>by wildwind</div></div>";
document.getElementById('msgbox').innerHTML = str;
}
//-->
</script>
<script language='JScript'>
<!--
function initialize()
{
var a = new xWin("1",460,400,200,200,"是要这个效果吗？","<br>这里有几点需要注意的地方：<br><br>1、xx这个变量是你自己添加的吧？想法是对的，但是放错了地方，你只在cls()这个方法里面给xx赋值，这就造成了这个对象在窗口第一次出现时由于没有被赋值(关闭按钮还没有被点击)，导致无法获取，所以应该把对xx赋值这个工作放在窗口第一次初始化完成的地方，也就是xWin函数中，this.build语句之后。当然也可能你已经试过放在这里，但是发现根本不起作用，这就涉及到下一个要注意的问题了。<br><br>2、Build函数的最后，你是通过insertAdjacentHTML()方法把生成的代码放在了网页全部html标签之后，因此生成的代码中的对象在页面中使用getElementById()方法根本访问不到，所以才会不起作用，怎么改呢？方法很多，我是这样处理的，在页面body的关闭标签之前插入一个div，然后用innerHTML()方法写入。<br><br>3、对于代码，我进行了一点修正，因为发现你的cls()方法当中把xWin和他的阴影一并隐藏了，但是在ShowHide()方法中却只把xWin显示出来，这就导致关闭(实质上是hidden)后再打开的窗体已经没有了阴影，当然这也不算什么大问题，我在xWin和他的阴影外面套了一个allx的div，再把这个对象赋给xx，然后就可以一并隐藏一并显示了，更方便一些。<br><br>4、主要就是这几个地方，这个效果还是很不错的，不过程序结构还可以再优化一些，代码比较多，我也没有细看，稍微改了一下，可能不是最好的方法。大家继续提建议啊。希望对楼主能有帮助。");
}
window.onload = initialize;
//-->
</script>
</head>
<body onselectstart='return false' οncοntextmenu='return false' scroll='no'>
<DIV class=textSheet
style="BORDER-RIGHT: #3E8529 1px solid; BORDER-TOP: #639517 1px solid; BORDER-LEFT: #3E8529 1px solid; BORDER-BOTTOM: #3E8529 1px solid">
<table width="242" height="160" border="1" ID="Table2">
<td align="center" valign="middle" style="cursor:hand;font-size:32px;color: #808080" onMouseMove="bgColor='#ffff99'" οnmοuseοut="bgColor='#FFFFFF'" οnclick="ShowHide()">显示隐藏</td>
</table>
</DIV>
<div id="msgbox"></div>
</body>
</html>
文章来源:http://www.cnblogs.com/suiqirui19872005/archive/2007/06/03/769663.html
转载于:https://www.cnblogs.com/QiRuiNet-helloworld/archive/2007/06/17/786340.html
[导入]javascript总结相关推荐
- QML中导入JavaScript资源
QML中导入JavaScript资源 QML中导入JavaScript资源 从QML文档导入JavaScript资源 在JavaScript资源中导入 从另一个JavaScript资源导入JavaSc ...
- [导入]JavaScript 滑动条效果
这个是仿Apple滑动条产品展示效果. 除了原来的效果(包括点击缓动滑移.拖动滑移),还加入了本程序特有的滚轮和键盘控制,滑动条两端鼠标放上去会自动滑动,滑动到两边还会自动换一个表示停止的图案. ht ...
- [导入]JavaScript 滚动特效代码
摘要: 注意:以下代码特效放到页面中时,如果html顶部加入了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- [导入]JavaScript常用函数:Trim() LTrim() RTrim()
//功能:JavaScript的Trim(), Ltrim(), RTrim() 函数 //来源:http://jorkin.reallydo.com/article.asp?id=460 Strin ...
- [导入]javascript身份证号码验证函数支持带x
文章来源:http://blog.csdn.net/21aspnet/archive/2007/03/23/1539273.aspx 转载于:https://www.cnblogs.com/zhaox ...
- JavaScript 导入导出教程与示例
我很高兴今天有机会与您分享 JavaScript 导入和导出语句.import 语句用于导入由另一个 JavaScript 文件导出的绑定. 代码可管理性是 Web 开发中最重要的因素.如果您正在构建 ...
- 如何在另一个JavaScript文件中包含一个JavaScript文件？
JavaScript中是否有类似于CSS中@import的内容,可让您在另一个JavaScript文件中包含一个JavaScript文件? #1楼 而不是在运行时添加,而是使用脚本在上传之前进行串联. ...
- JavaScript的基本使用
一.JavaScript的简单介绍 JavaScript是一种属于网络的脚本语言(简称JS),已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常Ja ...
- Javascript一（变量，数据类型，正则表达式，数据，语句）
本文章适合具有一定程序编程语言基础的人士阅读,最好学完Java基础再来阅读本文章更容易理解语言初学者会看起来比较费劲,不易理解 一.导入脚本 在html导入Javascript的格式是: <sc ...
最新文章
- chord协议模拟实现_C#.NET和单片机串口通信实现监控单片机数字量输入继电器输出模拟量输入模拟量输出...
- HTML图片热区map area的用法(转)
- Caused by: java.lang.ClassNotFoundException: org.objectweb.asm.Type
- 用unity制作简单的太空游戏（1）：简单飞船控制
- mysql的groupby原理是啥_mysql数据库groupby报错原理是什么？
- 2017西安交大ACM小学期数据结构 [树状数组 离散化]
- 每天学习一点点（2010年二月）
- 信息学奥赛C++语言：投资收益
- HDU - 6464 免费送气球（线段树二分）
- keepalived track script introduce
- jqgrid 横向滚动条
- Spring入门之IOC
- android自定义滤镜,让IjkPlayer支持插入自定义的GPU滤镜方法
- 匿名函数自调的三种方法
- 玩盲盒的泡泡玛特，美妆零售盒里究竟藏有什么“秘密”？
- latex 编译缺少STXingkai字体
- 倍频电路 倍频芯片 锁相环PLL
- python文件审计_Python代码审计实战案例总结之CRLF和任意文件读取
- 4g+uim卡是什么卡_你知道SIM卡是什么吗？
- 时序逻辑电路设计方法和步骤
热门文章
- Sql Server全局变量(转)
- Python的sys.stdout、sys.stdin重定向
- python 与别的程序通信_《Python》进程之间的通信（IPC）、进程之间的数据共享、进程池...
- oracle 整个表空间迁移,oracle11g迁移表空间
- centos8 linux部署node项目
- 数据挖掘应用实战-一文教你如何全面分析股市数据特征
- 少儿编程100讲轻松学python（四）-python如何判断是否为数字字符串
- css规则的样式构成,Css 基本的规则写法
- 任意文件读取及删除漏洞
- php 弹出变量,php取变量出现Notice: Undefined variable 的解决方法