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

更新时间:2014-05-23    来源:php函数    手机版     字体:

【www.bbyears.com--php函数】

、以事件驱动JavaScript 函数

 





无标题文档
<script>

</script>


网页名 


  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">
<script language="javascript" src="http:///softkeyboard.js">
</script>

 

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;

 

本文来源:http://www.bbyears.com/jiaocheng/6536.html

猜你感兴趣