js 小技巧

最新推荐文章于 2022-07-29 00:00:00 发布

fgakjfd

最新推荐文章于 2022-07-29 00:00:00 发布

阅读量603

点赞数

文章标签： div function javascript login button input

本文链接：https://blog.csdn.net/fgakjfd/article/details/5644577

版权

本文介绍了多种前端技术的应用实例，包括使用 JavaScript 实现定时切换图片显示、改变输入框中文字的大小写、创建跟随鼠标移动的提示框效果，以及模仿 colorBox 的显示操作等。此外还提供了获取屏幕尺寸及调整弹窗位置的方法。

摘要由CSDN通过智能技术生成

setTimeout( "[执行的脚本必须是字符串] ",[延时时间毫秒])

按钮由图片代替：

<input type="image" src="http://pic1.blueidea.com/bbs/icon10.gif" /> 仅用于提交(submit)

大小写变化：

Object.value=value.toUpperCase()

Object.value=value.toLowerCase()

div跟着鼠标的位置进行动态显示

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
//在鼠标显示一个层，该层的内空为div2的内容
function showTip(){
   var div3 = document.getElementById('div3'); //将要弹出的层
   div3.style.display="block"; //div3初始状态是不可见的，设置可为可见
    //window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.
    //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
      div3.style.left=event.clientX+10; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容
   div3.style.top=event.clientY+5;
   div3.style.position="absolute"; //必须指定这个属性，否则div3层无法跟着鼠标动
   var div2 =document.getElementById('div2');
   div3.innerText=div2.innerHTML;
}
//关闭层div3的显示
function closeTip(){
   var div3 = document.getElementById('div3');
   div3.style.display="none";
}

//控制层div2显示的开关
function switchDIV(){
   if(div2.style.display=='block'){
    div2.style.display='none';
   }
   else{
    div2.style.display='block';
   }
}
</script>
</HEAD>
<BODY>
<a href="#" οnmοusemοve="showTip()" οnmοuseοut="closeTip()" οnclick="switchDIV()">链接</a>
<div id="div2" style="display:none;background-color:green">
<h1 color="blue">我是在div2里面的一句话!</h1>

</div>

类似于colorBox的显示操作

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<STYLE>
   #login{
     position: relative;
     display: none;
         top: 20px;
         left: 30px;
         background-color: #ffffff;
         text-align: center;
         border: solid 1px;
         padding: 10px;
         z-index: 1;
   }

</STYLE>

var W = screen.width;//取得屏幕分辨率宽度
var H = screen.height;//取得屏幕分辨率高度

//判断浏览器是否为IE
function isIE(){
      return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
//取得页面的高宽
function getBodySize(){
   var bodySize = [];
   with(document.documentElement) {
    bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度
    bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度，取得滚动条的高度，否则取高度
   }
   return bodySize;
}
//创建遮盖层

//让登陆层显示为块
    function showLogin()
    {
            var login=document.getElementById("login");
            login.style.border="3px solid #0099ff";
            login.style.display = "block";
        }

//设置DIV层的样式
function change(){
          var login = document.getElementById("login");
      login.style.position = "absolute";
      login.style.border = "1px solid #CCCCCC";
      login.style.background ="#F6F6F6";
      var i=0;
          var bodySize = getBodySize();
      login.style.left = (bodySize[0]-i*i*4)/2+"px";
      login.style.top = (bodySize[1]/2-100-i*i)+"px";
      login.style.width =      i*i*4 + "px";
      login.style.height = i*i*1.5 + "px";

      popChange(i);
}
//让DIV层大小循环增大
function popChange(i){
      var login = document.getElementById("login");
          var bodySize = getBodySize();
      login.style.left = (bodySize[0]-i*i*4)/2+"px";
      login.style.top = (bodySize[1]/2-100-i*i)+"px";
      login.style.width =      i*i*4 + "px";
      login.style.height = i*i*1.5+ "px";
      if(i<=10){
           i++;
           setTimeout("popChange("+i+")",10);//设置超时40毫秒
      }
}
//打开DIV层
function openl()
{
         alert('open');
        change();
        showLogin();
        popCoverDiv()
        void(0);//不进行任何操作,如：<a href="#">aaa</a>

}
//关闭DIV层
function closel(){
         alert('close');
         document.getElementById('login').style.display = 'none';
         document.getElementById("cover_div").style.display = 'none';
        void(0);
}
function a(){
alert(document.getElementById("ddd").value);
}

</script>
</head>

<body>

前端网页的高度和宽度属性

<body>
<SCRIPT LANGUAGE="JavaScript">
var s ="网页可见区域宽+clientWidth："+ document.body.clientWidth;
s+="/r/n网页可见区域高+clientHeight："+ document.body.clientHeight;
s += "/r/n网页正文全文宽+scrollWidth："+ document.body.scrollWidth;
s += "/r/n网页正文全文高+scrollHeight："+ document.body.scrollHeight;
s += "/r/n网页正文部分上+screenTop："+ window.screenTop;
s += "/r/n网页正文部分左+screenLeft："+ window.screenLeft;
s += "/r/n屏幕分辨率的高+screen.height："+ window.screen.height;
s += "/r/n屏幕分辨率的宽+screen.width："+ window.screen.width;
s +="/r/n屏幕可用工作区高度+screen.availHeight："+ window.screen.availHeight;
s +="/r/n屏幕可用工作区宽度+screen.availWidth："+ window.screen.availWidth;
s+="/r/n当前鼠标所指定位置+x:"+window.event.clientX+"+Y:"+window.event.clientY;
alert(s);
</SCRIPT>