发布于 2016-09-07 02:54:26 | 161 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程,程序狗速度看过来!
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
<script type="text/javascript"><!--
function openWin(src, width, height, showScroll){
window.showModalDialog
(src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeig
ht:"+height+";scroll:"+showScroll+";");
}
// --></script>
<span style="CURSOR: pointer" style="CURSOR: pointer" onclick="openWin
('http://www.phperz.com', '500px', '400px', 'no')">点击</span>
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
<input type="button" value="打开对话框" onclick="showDialog('#')"/>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showDialog(url)
{
if( document.all ) //IE
{
feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no";
window.showModalDialog(url,null,feature);
}
else
{
//modelessDialog可以将modal换成dialog=yes
feature ="width=300,height=200,menubar=no,toolbar=no,location=no,";
feature+="scrollbars=no,status=no,modal=yes";
window.open(url,null,feature);
}
}
//-->
</SCRIPT>
<html>
<title>`````</title>
<head>
<meta name="keywords" content="51windows.Net">
<meta http-equiv=content-type content="text/html; charset=gb2312">
<script type="text/javascript"><!--
var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;
function StrCode(str)
{
if(encodeURIComponent)
return encodeURIComponent(str);
if(escape)
return escape(str);
}
function Browser()
{
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.isOP = false;
this.isSF = false;
ua = navigator.userAgent.toLowerCase();
s = "opera";
if ((i = ua.indexOf(s)) >= 0)
{
this.isOP = true;return;
}
s = "msie";
if ((i = ua.indexOf(s)) >= 0)
{
this.isIE = true;
return;
}
s = "netscape6/";
if ((i = ua.indexOf(s)) >= 0)
{
this.isNS = true;
return;
}
s = "gecko";
if ((i = ua.indexOf(s)) >= 0)
{
this.isNS = true;
return;
}
s = "safari";
if ((i = ua.indexOf(s)) >= 0)
{
this.isSF = true;
return;
}
}
function DialogShow(showdata,ow,oh,w,h)
{
var objDialog = document.getElementById("DialogMove");
if (!objDialog)
objDialog = document.createElement("div");
t_DiglogW = ow;
t_DiglogH = oh;
DialogLoc();
objDialog.id = "DialogMove";
var oS = objDialog.style;
oS.display = "block";
oS.top = t_DiglogY + "px";
oS.left = t_DiglogX + "px";
oS.margin = "0px";
oS.padding = "0px";
oS.width = w + "px";
oS.height = h + "px";
oS.position = "absolute";
oS.zIndex = "5";
oS.background = "#FFF";
oS.border = "solid #000 1px";
objDialog.innerHTML = showdata;
document.body.appendChild(objDialog);
}
function DialogHide()
{
ScreenClean();
var objDialog = document.getElementById("DialogMove");
if (objDialog)
objDialog.style.display = "none";
}
function DialogLoc()
{
var dde = document.documentElement;
if (window.innerWidth){
var ww = window.innerWidth;
var wh = window.innerHeight;
var bgX = window.pageXOffset;
var bgY = window.pageYOffset;
}else{
var ww = dde.offsetWidth;
var wh = dde.offsetHeight;
var bgX = dde.scrollLeft;
var bgY = dde.scrollTop;
}
t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}
function ScreenConvert(){
var browser = new Browser();
var objScreen = document.getElementById("ScreenOver");
if(!objScreen)
var objScreen = document.createElement("div");
var oS = objScreen.style;
objScreen.id = "ScreenOver";
oS.display = "block";
oS.top = oS.left = oS.margin = oS.padding = "0px";
if (document.body.clientHeight) {
var wh = document.body.clientHeight + "px";
}else if (window.innerHeight){
var wh = window.innerHeight + "px";
}else{
var wh = "100%";
}
oS.width = "100%";
oS.height = wh;
oS.position = "absolute";
oS.zIndex = "3";
if ((!browser.isSF) && (!browser.isOP)){
oS.background = "#cccccc";
}else{
oS.background = "#cccccc";
}
oS.filter = "alpha(opacity=50)";
oS.opacity = 40/100;
oS.MozOpacity = 40/100;
document.body.appendChild(objScreen);
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "hidden";
}
function ScreenClean()
{
var objScreen = document.getElementById("ScreenOver");
if (objScreen)
objScreen.style.display = "none";
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "visible";
}
function Demo(string)
{
ScreenConvert();
var ShowDiv="<div style="\" style="\""padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 关闭 \"></div>";
DialogShow(ShowDiv,250,120,300,100);
}
// --></script>
<style><!--
body{margin:0}
--></style><style bogus="1">body{margin:0}</style>
</head>
<body>
<div style="border:1px solid;width:100%">
<div>
<input type="button" value="显示对话框" onclick="javascript:Demo('o(∩_∩)o...哈哈!');">
<select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option
value="">2</option></select>
<input type="text" name="" value="aaa">
<input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa">
</div>
</body>
</html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>模态对话框</title> </head> <body> <div> <hr> </div> <!--对话框相关HTML代码--> <table width="100%" height="100%" id="cover" style="position:absolute;top:0px;left:0px;display:none;background-color:#666666;" onselectstart="javascript:return false;"> <tr> <td id="dlg" width="100%" height="100%" align="center" valign="center"> </td> </tr> </table> <script type="text/javascript" language="javascript"><!--
//按钮类型 var MB_OK = 1; var MB_CANCEL = 2; var MB_YES = 4; var MB_NO = 8; /*================================================================================*/ /*================================================================================*/ //MessageBox类 //因为利用层不可能实现真正模态对话框,用户仍然可以点击对话框以外的区域,所以需要一个覆盖框-coverIdStr //另一方面为了承载对话框,需要dlgIdStr function CMessageBox(coverIdStr, dlgIdStr) { this.coverIdStr = coverIdStr; this.coverId = document.getElementById(this.coverIdStr); this.dlgIdStr = dlgIdStr; this.dlgId = document.getElementById(this.dlgIdStr); this.dlgCaptionId = null; this.dlgInfoId = null; this.dlgButtonsId = null; this.caption = ""; this.info = ""; this.buttons = MB_OK; this.returnValue = 0; //返回值,0表示不确定,其它值可能是MB_OK、MB_CANCEL、MB_YES、MB_NO this.DoModal = DoModal; this.IniDlg = IniDlg; this.ShowDlg = ShowDlg; } //caption 对话框标题 //info 对话框内容,HTML无效 //buttons 对话框按钮,使用一个按钮类型值或多个按钮类型值相加(但不能重复相加),HTML有效 //objNameStr CMessageBox对象名称 function DoModal(caption, info, buttons, objNameStr) { this.dlgId.innerHTML = "<div style="\" style="\""padding:0px;width:300px;background-color:buttonface;filter:alpha(opacity=100);" + "border-top:buttonhighlight 2px solid;" + "border-right:buttonshadow 2px solid;" + "border-bottom:buttonshadow 2px solid;" + "border-left:buttonhighlight 2px solid;" + "cursor:default;\" onselectstart=\"javascript:return false;\">" + " <div id=\"" + this.dlgIdStr + "_caption\" style="\" style="\""padding:2px;width:100%;background-color:#000066;text-align:left;color:#FFFFFF;\" onselectstart=\"javascript:return false;\"></div>" + " <div id=\"" + this.dlgIdStr + "_info\" style="\" style="\""padding:10px;width:100%;background-color:buttonface;text-align:center;color:#000000;\" onselectstart=\"javascript:return false;\"></div>" + " <div id=\"" + this.dlgIdStr + "_buttons\" style="\" style="\""padding:10px;width:100%;background-color:buttonface;text-align:center;color:#000000;\" onselectstart=\"javascript:return false;\"></div>" + "</div>"; this.dlgCaptionId = document.getElementById(this.dlgIdStr + "_caption"); this.dlgInfoId = document.getElementById(this.dlgIdStr + "_info"); this.dlgButtonsId = document.getElementById(this.dlgIdStr + "_buttons"); this.IniDlg(caption, info, buttons, objNameStr); this.ShowDlg(true); } //初始化对话框 function IniDlg(caption, info, buttons, objNameStr) { this.dlgCaptionId.innerText = caption; this.dlgInfoId.innerHTML = info; this.dlgButtonsId.innerHTML = ""; if (parseInt(buttons/8) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 否 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_NO);OnDlgReturn('" + objNameStr + "', MB_NO);\"> " + this.dlgButtonsId.innerHTML;//前后空格,避免各个按钮之间离得太近 buttons -= 8; } if (parseInt(buttons/4) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 是 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_YES);OnDlgReturn('" + objNameStr + "', MB_YES);\"> " + this.dlgButtonsId.innerHTML; buttons -= 4; } if (parseInt(buttons/2) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 取 消 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_CANCEL);OnDlgReturn('" + objNameStr + "', MB_CANCEL);\"> " + this.dlgButtonsId.innerHTML; buttons -= 2; } if (buttons == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 确 定 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_OK);OnDlgReturn('" + objNameStr + "', MB_OK);\"> " + this.dlgButtonsId.innerHTML; } } //显示、隐藏对话框,并确定是点击哪个按钮关闭对话框的 //display为true-显示 //display为false-隐藏 function ShowDlg(display, returnValue) { if (display) { ReSizeDlg(); this.coverId.style.display = "block"; } else { this.coverId.style.display = "none"; } this.returnValue = returnValue; } /*================================================================================*/ /*================================================================================*/ //对话框返回函数 //自行修改函数代码 function OnDlgReturn(objNameStr, returnValue) { alert("CMessageBox 对象 " + objNameStr + " 的返回值是" + returnValue); } //保持cover框覆盖整个客户区 //保持对话框在预期位置 //如果覆盖框id不为cover,则需要手动修改此函数。 //document.body.onscroll和document.body.onresize触发本函数 //同时此函数也被CMessageBox调用 function ReSizeDlg() { var cover = document.getElementById("cover"); cover.style.pixelTop = document.body.scrollTop; cover.style.pixelLeft = document.body.scrollLeft; cover.style.width = document.body.clientWidth; cover.style.height = document.body.clientHeight; } document.body.onscroll = ReSizeDlg; document.body.onresize = ReSizeDlg; /*================================================================================*/ /*================================================================================*/ var objDlg = new CMessageBox("cover", "dlg"); var objDlg2 = new CMessageBox("cover", "dlg");
// --></script> <input type="button" value="点我" onclick="javascript:objDlg.DoModal('注意', '吃饭了', MB_OK, 'objDlg');"> <input type="button" value="然后点我" onclick="javascript:objDlg2.DoModal('注意', '吃饭了?', MB_YES+MB_NO, 'objDlg2');"> </body> </html>
五、showModalDialog 打开的模态对话框有不少经典的缺陷,解决办法
showModalDialog 打开的模态对话框有不少经典的缺陷,在这里不再冗述,我只谈谈最近碰到的几个问题以及解决办法。
问题1. showModalDialog 打开一个 aspx 页面时,如果该页面在之前已经打开过一次,则自动会加载缓存中的页面,而不能显示最新数据。
解决的办法有两种:
(1). 在打开模态框时,给 url 后面多加一个随机参数,来避免页面被缓存:
(2). 在该 asp.net 页面的 Page_Load 方法里设定不缓存:
问题2. 模态对话框中的内容和脚本加载次序不同,导致的问题。
缘起:考虑如下页面的代码
这个页面,如果在普通的 IE 窗口中加载时,提示的信息是 "155",而在模态对话框中执行时,其数值是 "0"。为什么会这样?
我们注意到普通窗口打开该页面时,当跳出 alert 对话框后,整个页面元素都已经正常显示了;而模态框在打开时,跳出 alert 对话框后,其背景却是一片空白;等点击“确定”后,才会显示出网页内容。
由此可以推测,模态框和普通页面在解析执行 HTML 时的次序不同:
普通页面:依次解析 body 中的元素,并随即绘制(render)解析完的元素。如果碰到 script, 则立刻执行之。
模态对话框:依次解析 body 中的元素,但并未立即绘制(render)它们。如果碰到 script, 则立刻执行之。等 body 都加载完毕后,再依次绘制其中的元素。
由于以上我们示例代码中访问到了 offsetWidth 属性,而我们可以推知,该属性一定是当元素被绘制(render)完毕后,才会自动计算出有意义的数值。所以就导致了问题中看到的现象。
之所以考虑到这个问题,其实是因为我在模态对话框中使用一个第三方控件的时候,出现了 bug,经过调试发现根源的原因在于该控件采用了常用的代码模式来输出其 HTML。也就是在一段 HTML 输出后,紧接着输出其初始化脚本。(这个问题值得 ASP.NET 控件开发者引起注意)
幸运的是,我有这个控件的源代码。因此修改源代码解决了这个问题。我的解法类似于这样:
六、使用div仿javascript模态窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css"><!--
#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none;}
#id2{top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;}
--></style><style type="text/css" bogus="1">#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none;}
#id2{top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;}</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asfsdfasdfasdf</title>
<script language="javascript" type="text/javascript"><!--
function show(){
id1.style.height=window.screen.height+"px";
id1.style.width=window.screen.width+"px";
id1.style.display='block';
id2.style.display='block'
}
function hide(){
id1.style.display='none'
id2.style.display='none'
}
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.id2.style.pixelTop += percent;
if(NS) document.id2.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.id2.style.pixelLeft += percent;
if(NS) document.id2.left += percent;
lastScrollX = lastScrollX + percent;
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.id2.pageX;
stalkery = document.id2.pageY;
stalkerwidth = document.id2.clip.width;
stalkerheight = document.id2.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("id2") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.id2;
stalkerTouchedX = e.pageX-document.id2.pageX;
StalkerTouchedY = e.pageY-document.id2.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
<!-- DRAG DROP CODE -->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1)
// --></script>
</head>
<body>
<p> </p>
<div id="id2">
这里可以放内容,或者添加div用innerhtml进行添加内容就可以了
<br/><input name="Button1" type="button" value="button" onclick="hide()"/>
</div>
<div id="id1"> 123</div>
<form method="post">
<input name="Button2" type="button" value="button" onclick="show()"/></form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>