一道js面试题目

[已解决问题] 解决于 2014-01-13 09:41

麻烦大家帮我看一下这两道题目，不知道怎么写，希望大家可以帮我把逻辑思路给我屡一下嘿嘿

谢谢大家

xiaoleilei | 初学一级 | 园豆：80
提问于：2014-01-10 10:32

< >

最佳答案

第一个我会，我这里有源代码

<!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=utf-8" />
<title>拖动层效果</title>
<script language="javascript">
var obj=0;
var x=0;
var y=0;
function find(evt,objDiv){
    obj = objDiv
    x = evt.offsetX; //获取鼠标按下时候相对于事件源的坐标
    y = evt.offsetY;

}
function dragit(evt){
if(obj == 0){   //判断鼠标是否是被弹起如果弹起则返回false
   return false
}
else{
   obj.style.left = evt.clientX - x + "px";
   obj.style.top = evt.clientY - y + "px";
}

}
</script>
<style type="text/css">
#container{
   border:1px solid yellow;
   width:200px;
   height:200px;
   position:absolute;
   }
#title{
   background:url(images/2008.png) no-repeat -434px -63px;
   width:200px;
   height:20px;
   position:absolute;
   cursor:move;
   font-size:14px;
   padding-top:10px;
   padding-left:5px;
   }
#content{
   margin-top:22px;
   }
#content ul{
   margin:5px;
   padding:5px;
   list-style-type:none;
   }
#content ul li{                 /*要拖动一个东西，先判断当鼠标按下的时候的事件，再判断鼠标移动时候的时间，最后判断鼠标弹起时候事件*/
   list-style-type:none;
   margin-top:5px;
   }
</style>
</head>
                         
<body style="margin:0" onmousemove="dragit(event)" onmouseup="obj = 0">
<div id="container">
                    
<div id="title" onmousedown="find(event,document.getElementById('container'))">
今日公告
</div>
<div id="content">
<ul>
   <li>中国拐点向好迹象加速</li>
   <li>2012年火车票不再难买</li>
   <li>英警察每2天记忆归零</li>
   <li>第四季度经济强劲复苏 </li>
   <li>宠物狗守车买菜月薪30</li>
</ul>
</div>
</div>
</body>
</html>

第二题就是控制提示框的display属性问题，但我也不太会做

奖励园豆：5

我是一个小程序员 | 菜鸟二级 |园豆：207 | 2014-01-10 13:03

其他回答(6)

你可以参考下移动层弹出层相关的东西

wolfy | 园豆：2636 (老鸟四级) | 2014-01-10 11:01

click事件，把移动div 坐标。第二个一样控制div的display属性而已。

randy_code | 园豆：202 (菜鸟二级) | 2014-01-10 11:53

关键代码：

1：
(function($){
    var $w = $("外框"),
        dx,dy; 
    var isMove =false; 
    $("标题栏").mousedown(function(e){
         isMove = true;
         dx=e.pageX - parseInt($w.css("left"));
         dy=e.pageY - parseInt($w.css("top"));
     });
     $(document).mousemove(function(e){
         if(isMove)
         {
             $w.css({"left":e.pageX - dx,"top":e.pageY - dy});
         }
     })

})(jQuery);    
2.
$("#anniu").click(function(e){
    $("#tishi").show();
    e.stopPropagation()//防止冒泡
});
$("#tishi").click(function(e){
    $(this).show();
    e.stopPropagation()//防止冒泡
});
$(document).click(function(e){
    $("#tishi").hide();
})

|WinKi| | 园豆：669 (小虾三级) | 2014-01-10 13:31

<html>
<head>
    <title>hello</title>
    <style type="text/css">
        #box1 {
            margin: 10px;
            padding: 5px;
            width: 150px;
            height: 250px;
            border: 1px solid #6BAC46;
            text-align: center;
        }
        .boxTitle {
            margin: 0px;
            padding: 0px;
            line-height: 24px;
            background-color: #4CCB00;
            cursor: pointer;
        }
        .boxContent {
            margin-top: 5px;
            height: 220px;
            background-color: #E9E9E9;
        }
    </style>
    <script type="text/javascript">
        var key = 0;
        var gapX = 0;
        var gapY = 0;
        function mouseDown(event) {
            var box = document.getElementById("box1");
            var left = box.style.left;
            var tops = box.style.top;
            gapX = event.clientX - getNum(left);
            gapY = event.clientY - getNum(tops);
            key = 1;
        }
        function mouseUp() {
            key = 0;
        }
        function mouseMove(event) {
            if(key == 1) {
                var box = document.getElementById("box1");
                box.style.left = event.clientX - gapX;
                box.style.top = event.clientY - gapY;
            }
        }
        function getNum(pixel) {
            return pixel.substring(0, pixel.length - 2);
        }
    </script>
</head>
<body onmousemove="mouseMove(event);" onmouseup="mouseUp();">
    <div id="box1" style="position:absolute;">
        <div class="boxTitle" onmousedown="mouseDown(event);">标题栏-mm</div>
        <div class="boxContent">内容资料123123</div>
    </div>
</body>
</html>

View Code

刚才做了一个，我也是边学边做

第二题也是给按钮加事件，再给body加一个事件，控制提示信息的显示display

ThreeTree | 园豆：1490 (小虾三级) | 2014-01-10 15:26

在上方区域的的点击事件中写移动坐标的方法，在下方的点击时写除此之外的所有属性display为none.

妍珊 | 园豆：1169 (小虾三级) | 2014-01-10 15:29

前端

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="JS/jquery-1.8.3.js" type="text/javascript"></script>
 5     <script src="JS/TestJS/test.js" type="text/javascript"></script>
 6 </head>
 7 <body>
 8     <form id="form1" runat="server">
 9     <div id="dd" style="width:200px; height:240px; border :1px solid Green; border-color:Green;CURSOR: move; POSITION: absolute;"
10     onmousemove="DragDiv(this.id)" 
11     onmousedown="MouseDown(this.id)"
12     onmouseup="mouseUp()" ">
13     <div style="width:180px; height:20px;  background-color:Green; margin-left:2px; margin-top:2px;">标题栏</div>
14     </div>
15     <div style=" height:200px; width:800px;"></div>
16     <div id="div1" style="width:180px; height:50px;  background-color:Green; display:none;background:#666;position:absolute;overflow:auto;display:none;padding:50px;" align="center" >主人,你呈现了我</div>
17    
18    <div style="padding-top:250px;"> <input type="button" id="btn" value="提示" style="width:180px; height:20px; " /></div>
19     </form>
20 </body>
21 </html>

View Code

JS部分

var num = 0;
/**
* @deprecated 移动div的方法
* @param{id} id 要移动的层ID
*/
var intX;
var intY;
var blnDrag = false; //鼠标是否已经按下
$(document).ready(function () {
    document.onclick = function () {
        $("#div1").css("display", "none");
    };
    Withdiv1();
    AddBtnVoid();
});

//影藏掉一个层
function HiddenDivBoy() {
    if (num % 2 == 0) {
        $("#div1").css("display", "none");
    }
}
//显示该层
function BlockDivBoy(e) {
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight;
    while (e = e.offsetParent) {
        t += e.offsetTop;
        l += e.offsetLeft;
    }
    $("#div1").css("height", "20px");
    $("#div1").css("width", "150px");
    $("#div1").css("top", "330px");
    if (num % 2 != 0) {
        $("#div1").css("display", "block");
    }
}
//给按钮绑定点击事件
function AddBtnVoid() {
    $("#btn").live("click", function () {
        num++;
        if (num % 2 != 0) {
            BlockDivBoy(this);   //呈现层
        }
        else {
            HiddenDivBoy();
        }
    });
}
//增加失去焦点事件
function Withdiv1() {
    $("#btn").live("onfocus", function () {
        HiddenDivBoy();
    });
}

//鼠标按下
function MouseDown(id) {
    //鼠标按下
    blnDrag = true;
    intX = event.clientX - GetDiv(id).style.pixelLeft;
    intY = event.clientY - GetDiv(id).style.pixelTop;
}
//鼠标拖动
function DragDiv(id) {

    //判断鼠标是否已经按下
    if (!blnDrag) {
        return false;
    }
    else {
        GetDiv(id).style.pixelLeft = event.clientX - intX;
        GetDiv(id).style.pixelTop = event.clientY - intY;
    }
}

//鼠标松开时
function mouseUp() {
    //鼠标没有按下
    blnDrag = false;
}

//得到DIV
function GetDiv(id) {
    return document.getElementById(id);
}

View Code

小学生只能帮你到这里了！

大楚打码人 | 园豆：4313 (老鸟四级) | 2014-01-10 15:36

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

一道js面试题目

欢迎，请先登录或者注册。