首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

定位出现有关问题,用的都是JS

2012-04-10 
定位出现问题,用的都是JS有这么两个图层,我用JS把JS查询后台得到的结果加到图层里。如果单独是这个的话,没

定位出现问题,用的都是JS
有这么两个图层,我用JS把JS查询后台得到的结果加到图层里。如果单独是这个的话,没问题
关键是我又加了个小窗口的图层,是JS定时查询后台,得到结果以小窗口形式显示,每当小窗口出来后就会影响到原先的图层,原先的图层好像移动了,位置发生了改变,是不是我的那些属性写得不太对
<div class=div_cont>
<div id="result"></div>
<div id="paging"></div>
</div>


不用细看,就看看那些图层,找了半天,不明白为什么

HTML code
<%@ page language="java" pageEncoding="UTF-8"%><%if(request.getParameter("name")==null)    response.sendRedirect("dl.jsp");String name=request.getParameter("name");session.setAttribute("name",name); %><html><head><title>31231</title><script type='text/javascript'    src="${pageContext.request.contextPath}/dwr/engine.js"></script><script type='text/javascript'    src="${pageContext.request.contextPath}/dwr/util.js"></script><script type='text/javascript'    src="${pageContext.request.contextPath}/dwr/interface/searchService2.js"></script><script type='text/javascript'    src="${pageContext.request.contextPath}/dwr/interface/searchService.js"></script><style type="text/css">.div_cont {    width: 1000px;    float: left;    margin: 10px;}#result {    width: 800px;    float: left;    margin-top: 5px;}#paging {    width: 800px;    float: left;    margin-top: 5px;}</style><script language="javascript">    var request;    var minpage;    var maxpage;    var startindex;    var hasnext;    function doSearch(type) {        var result = document.getElementById("result");        var pagingdiv = document.getElementById('paging');        result.innerHTML = "";        pagingdiv.innerHTML = "";        if (type != 'paging') {            var startindexinput = document.getElementById('startindex');            startindexinput.value = "1";        }        request = {            startindex : 1,            query : ""        };        DWRUtil.getValues(request);        //DWREngine.setAsync(true);        if (request.query == "") {            alert("请输入正确的词");        } else {            searchService.getSearchResults(request, fillPage);        }        //DWREngine.setAsync(false);    }    function fillPage(data) {        //    alert(DWRUtil.toDescriptiveString(data, 2));        var resultdiv = document.getElementById('result');        var pagingdiv = document.getElementById('paging');        resultdiv.innerHTML = "";        pagingdiv.innerHTML = "";        if (data.length == 0) {            resultdiv.innerHTML = "<span>sorry, we can't find what you want...</span>";            return;        }        if (null != data) {            for ( var i = 0; i < data.length; i++) {                //alert(data[i].id);                var results = data[i];                //alert(results);                var ele = document.createElement('div');                ele.setAttribute('id', 'info' + i);                ele.innerHTML = "<span>loading..</span>";                resultdiv.appendChild(ele);                var res = document.getElementById('info' + i);                //res.innerHTML="<font color=\"#0033CC\">" + title[i] + "</font><br /><a href=\"" + url[i] + "\">"                res.innerHTML = "<a href=\"" + data[i].url + "\">"                        + "<font color=\"#0033CC\">" + results.title                        + "</font></a><br /><font color=\"#008000\">"                        + data[i].content + "</font><br /><br /><br />";                //searchService.getSearchResultById(list[i],fillDetailResult);                //res.innerHTML=id[i];                //res.innerHTML=data[i].url+data[i].title+data[i].content+data[i].id;                resultdiv.appendChild(res);            }        }        minpage = data[0].minpage;        maxpage = data[0].maxpage;        //minpage=data.startpage;        //maxpage=data.endpage;        startindex = data[0].startindex;        hasnext = data[0].hasnext;        if (minpage != 1) {            var link = document.createElement('a');            link.setAttribute("href", "javaScript:paging('"                    + ((minpage - 11) * 10 + 1) + "')");            link.innerHTML = "first 10 pages<<";        }        for ( var j = minpage; j <= maxpage; j++) {            if ((j - 1) * 10 + 1 != startindex) {                var link = document.createElement('a');                link.setAttribute("href", "javascript:paging('"                        + ((j - 1) * 10 + 1) + "')");                link.innerHTML = " " + j + " ";                pagingdiv.appendChild(link);            } else {                pagingdiv.innerHTML += (" " + j + " ");            }        }        if (hasnext == 1) {            var link = document.createElement('a');            link.setAttribute("href", "javascript:paging('"                    + (maxpage * 10 + 1) + "')");            link.innerHTML = ">>last 10 pages";            pagingdiv.appendChild(link);        }    }    function paging(newindex) {        document.getElementById('startindex').value = newindex;        doSearch('paging');    }    function handlekey() {        if (document.getElementById('query').value == '')            return;        var intkey = -1;        if (window.event) {            intKey = event.keyCode;            if (intKey == 13) {                doSearch('');            }        }    }    window.onload = init;    function init() {        var time = window.setInterval(search2, 10000);    }    function search2() {        searchService2.getSearchResults(filldiv);    }    function filldiv(data) {        show(data);    }    var isshow = 0;//0小窗口没有显示,1小窗口已显      function creatediv() {        var msgw, msgh, bordercolor;        msgw = 300;//提示窗口的宽度          msgh = 300;//提示窗口的高度          var msgObj = document.createElement("div");        msgObj.setAttribute("id", "msgDiv");        msgObj.style.position = "absolute";        msgObj.style.background = "#fff";        msgObj.style.overflow = "auto";        msgObj.style.left = "900px";        msgObj.style.bottom = "10px";        msgObj.style.width = msgw + "px";        msgObj.style.height = msgh + "px";        msgObj.style.zIndex = "10001";        document.body.appendChild(msgObj);    }    function delWinD() {        document.getElementById("msgDiv").style.display = "none";        isshow = 0;    }    function show(data) {        isshow = 1;        if (!document.getElementById("msgDiv"))//小窗口不存在          {            creatediv();            mes(data);        } else {            mes(data);            document.getElementById("msgDiv").style.display = "";            document.getElementById("msgDiv").style.bottom ="10px";            //document.getElementById("msgDiv").style.top = (document.documentElement.clientHeight / 4)            //        + "px";        }    }    function mes(data) {        var msgObj = document.getElementById('msgDiv');        msgObj.innerHTML = "";        msgObj.innerHTML = "这是弹出的小窗口!<br /><a href=\"javascript:void(0);\" onclick='delWinD();return false;'>点我关闭窗口</a>";        if (data.length == 0) {            msgObj.innerHTML = "<span>sorry, we can't find what you want...</span>";            return;        }        if (null != data) {            for ( var i = 0; i < data.length; i++) {                var results = data[i];                var ele = document.createElement('div');                ele.setAttribute('id', 'info' + i);                msgObj.appendChild(ele);                var res = document.getElementById('info' + i);                res.innerHTML = "<a href=\"" + data[i].url + "\">"                        + "<font color=\"#0033CC\">" + results.title                        + "</font></a><br /><font color=\"#008000\">"                        + data[i].content + "</font><br /><br /><br />";                msgObj.appendChild(res);            }        }    }</script></head><body><input type="hidden" name="startindex" id="startindex" value="1"><div id="searchbar"><table align="center">    <tr align="center">        <td><img alt="" src=""></td>    </tr>    <tr align="center">        <td><input size="50" type="text" name="query" id="query" value=""            onkeyup="handlekey()"> <input type="button" value="Search"            id="search" onclick="javascript:doSearch('')"></td>    </tr></table></div><hr><div class=div_cont><div id="result"></div><div id="paging"></div></div></body></html> 




[解决办法]
firebug 审查元素

可以查看并修改 属性 和任意样式

你会发现问题所在的

热点排行