网页设计中总结的几个有用的JS特效代码-网站制作-3P代码网
繁体中文
设为首页
加入收藏
当前位置:网站制作首页 >> JavaScript教程 >> 网页设计中总结的几个有用的JS特效代码

网页设计中总结的几个有用的JS特效代码

2006-11-15 08:00:00  作者:  来源:互联网  浏览次数:0  文字大小:【】【】【
简介:  1、以事件驱动JavaScript 函数 无标题文档 网页名   2、文本域显示内容,但不可修改   3、让select控件可以自定义边框 .box2{border:1px solid #00ff00;width:180px;height:17px;clip:rect...

  1、以事件驱动JavaScript 函数

无标题文档

网页名

  2、文本域显示内容,但不可修改

  3、让select控件可以自定义边框

4、CSS圆角

css实现真正的圆角表格

  5、建银密码输入器

无标题文档

onkeydown=Calc.password.value=this.value title=登录密码

onclick="password1=this;showkeyboard();this.readOnly=1;Calc.password.value=''"

readOnly type=password maxLength=12

onchange=Calc.password.value=this.value name=LOGPASS

minLength="6">

softkeyboard.js

//定义当前是否大写的状态

window.onload=

function()

{

password1=null;

initCalc();

}

var CapsLockValue=0;

var check;

function setVariables() {

tablewidth=630; // logo width, in pixels

tableheight=20; // logo height, in pixels

if (navigator.appName == "Netscape") {

horz=".left";

vert=".top";

docStyle="document.";

styleDoc="";

innerW="window.innerWidth";

innerH="window.innerHeight";

offsetX="window.pageXOffset";

offsetY="window.pageYOffset";

}

else {

horz=".pixelLeft";

vert=".pixelTop";

docStyle="";

styleDoc=".style";

innerW="document.body.clientWidth";

innerH="document.body.clientHeight";

offsetX="document.body.scrollLeft";

offsetY="document.body.scrollTop";

}

}

function checkLocation() {

if (check) {

objectXY="softkeyboard";

var availableX=eval(innerW);

var availableY=eval(innerH);

var currentX=eval(offsetX);

var currentY=eval(offsetY);

x=availableX-tablewidth+currentX;

//y=availableY-tableheight+currentY;

y=currentY;

evalMove();

}

setTimeout("checkLocation()",0);

}

function evalMove() {

//eval(docStyle + objectXY + styleDoc + horz + "=" + x);

eval(docStyle + objectXY + styleDoc + vert + "=" + y);

}

self.onError=null;

currentX = currentY = 0;

whichIt = null;

lastScrollX = 0; lastScrollY = 0;

NS = (document.layers) ? 1 : 0;

IE = (document.all) ? 1: 0;

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.softkeyboard.style.pixelTop += percent;

if(NS) document.softkeyboard.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.softkeyboard.style.pixelLeft += percent;

if(NS) document.softkeyboard.left += percent;

lastScrollX = lastScrollX + percent; } }

function checkFocus(x,y) {

stalkerx = document.softkeyboard.pageX;

stalkery = document.softkeyboard.pageY;

stalkerwidth = document.softkeyboard.clip.width;

stalkerheight = document.softkeyboard.clip.height;

if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;

else return false;}

function grabIt(e) {

check = false;

if(IE) {

whichIt = event.srcElement;

while (whichIt.id.indexOf("softkeyboard") == -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.softkeyboard;

StalkerTouchedX = e.pageX-document.softkeyboard.pageX;

StalkerTouchedY = e.pageY-document.softkeyboard.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; }

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);

document.write("

密码输入器                
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\">
")

//给输入的密码框添加新值

function addValue(newValue)

{

if (CapsLockValue==0)

{

var str=Calc.password.value;

if(str.length

{

Calc.password.value += newValue;

}

if(str.length<=password1.maxLength)

{

password1.value=Calc.password.value;

}

}

else

{

var str=Calc.password.value;

if(str.length

{

Calc.password.value += newValue.toUpperCase();

}

if(str.length<=password1.maxLength)

{

password1.value=Calc.password.value;

}

}

}

//实现BackSpace键的功能

function setpassvalue()

{

var longnum=Calc.password.value.length;

var num

num=Calc.password.value.substr(0,longnum-1);

Calc.password.value=num;

var str=Calc.password.value;

password1.value=Calc.password.value;

}

//输入完毕

function OverInput()

{

//m_pass.mempass.value=Calc.password.value;

var str=Calc.password.value;

password1.value=Calc.password.value;

//alert(theForm.value);

//theForm.value=m_pass.mempass.value;

softkeyboard.style.display="none";

Calc.password.value="";

password1.readOnly=1;

//password1.value=Calc.password.value;

}

//关闭软键盘

function closekeyboard(theForm)

{

//eval("var theForm="+theForm+";");

//theForm.value="";

softkeyboard.style.display="none";

//Calc.password.value="";

}

//显示软键盘

function showkeyboard()

{

if(event.y+140)

softkeyboard.style.top=event.y+document.body.scrollTop+15;

if((event.x-250)>0)

{

softkeyboard.style.left=event.x-250;

}

else

{

softkeyboard.style.left=0;

}

softkeyboard.style.display="block";

password1.readOnly=1;

password1.blur();

//password1.value="";

}

//设置是否大写的值

function setCapsLock()

{

if (CapsLockValue==0)

{

CapsLockValue=1

// Calc.showCapsLockValue.value="当前是大写 ";

}

else

{

CapsLockValue=0

// Calc.showCapsLockValue.value="当前是小写 ";

}

}

function setCalcborder()

{

CalcTable.style.border="1px solid #0090FD"

}

function setHead()

{

CalcTable.cells[0].style.backgroundColor="#7EDEFF"

}

function setCalcButtonBg()

{

for(var i=0;i

{

if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1")

{

// if(i==10)

// alert(123);

Calc.elements[i].style.borderTopWidth= 0

Calc.elements[i].style.borderRightWidth= 2

Calc.elements[i].style.borderBottomWidth= 2

Calc.elements[i].style.borderLeftWidth= 0

Calc.elements[i].style.borderTopStyle= "none";

Calc.elements[i].style.borderRightStyle= "solid";

Calc.elements[i].style.borderBottomStyle= "solid";

Calc.elements[i].style.borderLeftStyle= "none";

//#46AC17

Calc.elements[i].style.borderTopColor= "#118ACC";

Calc.elements[i].style.borderRightColor= "#118ACC";

Calc.elements[i].style.borderBottomColor= "#118ACC";

Calc.elements[i].style.borderLeftColor= "#118ACC";

//#CBF3B2

Calc.elements[i].style.backgroundColor="#ADDEF8";

var str1=Calc.elements[i].value;

str1=str1.trim();

/*

if(str1=="`")

{

Calc.elements[i].style.fontSize=14;

}

*/

if(str1.length==1)

{

//Calc.elements[i].style.fontSize=16;

//Calc.elements[i].style.fontWeight='bold';

}

var thisButtonValue=Calc.elements[i].value;

thisButtonValue=thisButtonValue.trim();

if(thisButtonValue.length==1)

{

Calc.elements[i].onclick=

function ()

{

var thisButtonValue=this.value;

thisButtonValue=thisButtonValue.trim();

addValue(thisButtonValue);

//alert(234)

}

Calc.elements[i].ondblclick=

function ()

{

var thisButtonValue=this.value;

thisButtonValue=thisButtonValue.trim();

addValue(thisButtonValue);

//alert(234)

}

}

}

}

}

function initCalc()

{

setCalcborder();

setHead();

setCalcButtonBg();

}

String.prototype.trim = function()

{

// 用正则表达式将前后空格

// 用空字符串替代。

return this.replace(/(^\s*)|(\s*$)/g, "");

}

var capsLockFlag;

capsLockFlag=true;

function capsLockText()

{

if(capsLockFlag)//改成大写

{

for(var i=0;i

{

var char=Calc.elements[i].value;

var char=char.trim()

if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==1)

{

Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)-32)+" "

}

}

}

else

{

for(var i=0;i

{

var char=Calc.elements[i].value;

var char=char.trim()

if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==1)

{

Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)+32)+" "

}

}

}

capsLockFlag=!capsLockFlag;

}

责任编辑:admin
相关文章