sxw53
sxw53
采纳率0%
2017-07-20 07:08

急急急!!!大神们帮帮忙!!!

jsp里面的元素怎么样不随着页面大小而移动 想固定死!!!!!!!!!!!!!!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

7条回答

  • qq_19558705 ITDragon龙 4年前

    这定位的问题, 和css有关,你需要改的是元素的定位问题,A是参照物,B是需要定位的元素。则 A 的css加上 position:relative 。 B 的css 加上 position:absulte ,top:值; left:值;。如果你用的是火狐,打开控制台,你会看到 body默认带上 position: relative;

    点赞 评论 复制链接分享
  • luweihualulei 阿磊_kb 4年前

    我看你的css里面都是用相对定位,而且用的都是百分比!肯定会随着页面大小 变化而变化

    点赞 评论 复制链接分享
  • sxw53 sxw53 4年前
     <%@ page contentType="text/html;charset=utf-8"%>
    <%@ page language="java" import="java.util.*"%>
    <%@ page language="java" import="com.beyond.framework.common.config.*"%>
    <%@ page language="java" import="com.beyond.framework.util.tools.*"%>
    <%@ page language="java" import="com.beyond.framework.user.entity.*"%>
    <%@ page import="com.beyond.framework.dictionary.entity.DictionaryInfo"%>
    <%@page import="com.beyond.framework.jurisdiction.entity.AdminGroupInfo"%>
    <%@ page language="java" import="com.mohe.retailer.order.entity.*"%>
    
    <%@page import="com.beyond.framework.util.tools.Global"%>
    <%@ taglib uri="/pageTag" prefix="pageTag"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    
    
    <%
    
        String path = request.getContextPath();
        UserInfo loginUserInfo = (UserInfo) session.getAttribute(SessionConfig.ADMIN_USER_INFO);
    
    
        Order order = (Order)request.getAttribute("order1");
        if(order == null){
            order = new Order();
        }
        boolean isAdd = order == null || order.getOId() == null ? true : false;
    
    %>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>POS收银</title>
    
    <script type="text/javascript">
    
    
    
    
    
    /*加减乘除*/  
    function compute(op)
    {
       var num1,num2;
         num1=parseFloat(document.myform.num1.value);
         num2=parseFloat(document.myform.num2.value);
         if (op=="+")
            document.myform.result.value=num1+num2  ;
       if (op=="-")
            document.myform.result.value=num1-num2  ;
       if (op=="*")
            document.myform.result.value=num1*num2  ;
       if (op=="/"  &&  num2!=0)
            document.myform.result.value=num1/num2  ;
    }
    
    
    
    
    
    /*求和*/  
    function init(){
        debugger
        var trs=document.getElementsByTagName("tr");
        for(var i=0;i<trs.length;i++){
        var tds=trs[i].getElementsByTagName("td");
        var m=0;
        for(var j=0;j<tds.length;j++){
        m+=parseInt(tds[j].innerHTML);
        }
        var s=document.createElement("td");
        s.innerHTML=m;
        trs[i].appendChild(s);
        }
        }
    
    
    /*删除事件*/
    function deleteRow(e)
    {
     e=e||event;
     var btn=e.srcElement||e.target;
     btn.parentNode.parentNode.parentNode.removeChild(btn.parentNode.parentNode);
    }
    
    
    
    
    
    
    function clock_12h()
    {
    var today = new Date(); //获得当前时间
    //获得年、月、日,Date()函数中的月份是从0-11计算
    var year = today.getFullYear();  
    var month = today.getMonth()+1;
    var date = today.getDate();
    var hour = today.getHours();  //获得小时、分钟、秒
    var minute = today.getMinutes();
    var second = today.getSeconds();
    
    var apm="AM"; //默认显示上午: AM
    if (hour>12) //按12小时制显示
    {
    hour=hour-12;
    apm="PM"  ;
    }
    var weekday = 0;
    switch(today.getDay()){
    
    case 0:
        weekday = "星期日";
    break;
    case 1:
        weekday = "星期一";
    break;
    case 2:
        weekday = "星期二";
    break;
    case 3:
        weekday = "星期三";
    break;
    case 4:
        weekday = "星期四";
    break;
    case 5:
        weekday = "星期五";
    break;
    case 6:
        weekday = "星期六";
    break;
    }
    
    /*设置div的内容为当前时间*/
    document.getElementById("myclock").innerHTML=year+"年"+month+"月"+date+"日&nbsp;"+hour+":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+weekday+"";
    
    }
    /*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
    var myTime = setInterval("clock_12h()",1000);
    
    </script>
    <style type="text/css">
    #center{
    
    margin:0 200px 0 200px;  
    height:450px; 
    background:#000000; 
    border:1px solid #FFFFFF;
    color: white;
    overflow-y:scroll;
    }
    #button {
    width:50px;
    height:25px;
    font-size:10px;
    color:black;
    }
    #button1 {
    width:140px;
    height:70px;
    font-size:30px;
    color:black;
    }
    #all1{ 
    width:1080px; 
    padding:25px;   
    background-color:#000000; 
    margin:0 auto; 
    text-align: center;
    color: white;
    }
    #top1{
    position:fixed;_position:
      absolute;bottom:0;
      left:25%;
      _bottom:auto;
      _top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    margin-bottom:10px;
    color: white;
    }
    #top2{
    position:fixed;_position:
      absolute;bottom:0;
      left:38%;
      _bottom:auto;
      _top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    margin-bottom:10px;
    color: white;
    }
    #top3{
    position:fixed;_position:
      absolute;bottom:0;
      left:53%;
      _bottom:auto;
      _top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    margin-bottom:10px;
    color: white;
    }
    #top4{
    position:fixed;_position:
      absolute;bottom:0;
      left:75%;
      _bottom:auto;
      _top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    margin-bottom:10px;
    color: white;
    }
    #top5{
    position:fixed;_position:
      absolute;bottom:0;
      left:80%;
      _bottom:auto;
      _top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    margin-bottom:10px;
    color: white;
    }
    #top{
    color: white;
    }
    #topp{
    color: red;
    }
    #tableText td{
            width: 162px;
    }
    .sidebar{color:#FFFFFF; }
    </style></head>
    
    
    
    <body bgcolor="#000000">
    <div id="top" align="center">
    <p><h1>您好,欢迎使用超市收银系统</h1></p>
    
    </div>
    
    
    
    <div align="center" class="sidebar">
    <p id="myclock" >  </p>
    
    </div>
    
    <div onload="init()" id="all1" >
    <form id="userForm"  method="post" style="margin-left: 15%;"> 
    
    
        会员账号:<input type="text"  placeholder="会员账号" size="20" maxlength="13" name="mId" value="<%=Global.nvlToString(order.getMId())%>">
    
    
        操作员:<input type="text" size="20"  maxlength="13" name="uId" value="<%=Global.nvlToString(order.getUId())%>">
    
        商品编号:<input style="margin-right: 21.1%"  type="text" id="code"  placeholder="商品编号" size="20" maxlength="13" >
        <input type="button"  value="订单号" onclick="getRand()" Hidden Button/><!-- 生成随机数按钮 -->
            <input id="num1" name="oId" type="text" size="15" Hidden Test/><!-- 随机数1 -->
            <input type="hidden" name="oYtotalprice" value="<%=Global.nvlToString(order.getoYtotalprice())%>"  id="yyys" >
            <input type="hidden" name="oStotalprice" value="<%=Global.nvlToString(order.getoStotalprice())%>"  id="sssy">
            <script type="text/javascript">
            var num1 = document.getElementById("num1");
    
            var result = document.getElementById("result");
            function getRand(){
                num1.value = Math.floor((Math.random() * 1000000) + 1);
    
            }
    
            getRand();/*初始化*/
    
    
    
    
        </script>
    
    </p>
    </form>
    </div>
    <div  id="center">
    <table id="tableText" style="    margin-left: 17%;">
    <tr>
    
    
    
    <td>商品名称</td>
    <td>数量</td>
    <td>单价(元)</td>
    <td>小计(元)</td>
    <td>操作</td>
    </tr>
    
    </table>    
    </body>
    </div>
    <div id="top1" >
    <table id="tableText"width="728"  border="0" >
    <tbody>
    <tr>
        <td width="280">合计:<input style="font-weight:bold;font-style:italic ;font-size:20px;align:center;" type="text" height="91"width="280"value="<%=Global.nvlToString(order.getoYtotalprice())%>" disabled="disabled" size="5" id="yyy" >元</td>
    </tr>
    <tr>    
        <td width="280">实收:<input type="text" style="font-weight:bold;font-style:italic ;font-size:20px;align:center;" height="91"width="280"value="<%=Global.nvlToString(order.getoStotalprice())%>" disabled="disabled" size="5" id="sss">元</td>
    </tr>   
    
    
    <!--  <tr> 
        <td width="280"><input type="submit" name="收款" style="cursor:pointer;" value="确认收款" id="add" onclick="formsubmit()"> </td>
    </tr>
    <tr>
        <td width="280" style="cursor:pointer;" onclick="window.location='http://localhost:8484/market/index.do#/market/jurisdiction/roleList.do'">返回</td>
    </tr>  
    -->
    </tbody>
    </table>
    </div>
    <div id="top2" >
    <table id="tableText"width="728"  border="0" >
    <tbody>
    
    <tr>    
        <td width="280">实际收款:<input style="font-weight:bold;font-style:italic ;  font-size:20px;align:center;" type="text"  height="91"width="280" size="5" >元</td>
    </tr>   
    <tr> 
        <td width="280">应找零钱:<input style="font-weight:bold;font-style:italic ; font-size:20px;align:center;" type="text"  height="91"width="280" size="5">元</td>
    </tr>
    
    </tbody>
    </table>
    </div>
    <div id="top3" >
    <input type="submit"    name="收款" style="cursor:pointer;" value="确认收款" id="button1" onclick="formsubmit()">
    <input type="button"  name="返回" style="cursor:pointer;" value="返回" id="button1" onclick="window.location='http://localhost:8484/market/index.do#/market/jurisdiction/roleList.do'">
    </div>                 
    <div id="top4" >
    <table id="tableText"width="728"  border="0" >
    <tbody>
    
    <tr>    
        <td width="280">F5:刷新</td>
    </tr>   
    <tr> 
        <td width="280">Tab:换行</td>
    </tr>
    
    
    </tbody>
    </table>
    </div>
    <div id="top5" >
    <table id="tableText"width="728"  border="0" >
    <tbody>
    
    
    <tr> 
        <td width="280">F9:收款</td>
    </tr>
    <tr> 
        <td width="280">F10:返回</td>
    </tr>
    
    </tbody>
    </table>
    </div>
    
    
    
    <script type="text/javascript" src="<%=path%>/common/smartadmin/js/libs/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">
    /* var jq$ = jQuery.noConflict(); //防止$符号与其他的冲突 */
    $(document).ready(function () {   //防止在DOM元素加载完成就执行jQuery代码,从而避免产生不必要的错误
        $("*").keydown(function (e) {//判断按键
            e = window.event || e || e.which;
            if (e.keyCode == 112 || e.keyCode == 113
                || e.keyCode == 114 || e.keyCode == 115
                || e.keyCode == 117
                || e.keyCode == 118 || e.keyCode == 119
                || e.keyCode == 122 || e.keyCode == 123) {
                e.keyCode = 0;
                return false;
            }
        });
        //document.onhelp = function () { return false };//
        window.onhelp = function () { return false };//ie下面不能屏蔽f1键的补充方法,和上面的一行的效果是一样的,选其一
    });
        var number=0;
        $("#code").keydown(function(){
            debugger
             if (event.keyCode == "13") {//keyCode=13是回车键
    
                 var gId = $("#code").val();
                 $("#code").val("");
                 url = "<%=path%>/pos/getGoodsById.do";
                    $.ajax({
                        type: 'post',
                        url: url,
                        data: {
                            "gId":gId
                        },
                        cache: false,
                        dataType: "json",
                        success: function(data) {
                            /* alert(JSON.stringify(data)) */
                            if (data.error_code == "0") {
                                var html="";
                                html+="<tr><td><input type=\'text\' value='"+data.com.gname+"' name=\'商品名称\' disabled=\'disabled\'></td>";
                                html+="<td><input type=\'text\' value=\'1\' onchange=\'chang(this,"+number+")\';; name=\'数量\' id=\'"+number+"number\'></td>";
                                html+="<td><input type=\'text\' value=\'"+data.com.gsellprice+"\' name=\'单价\' disabled=\'disabled\' id=\'"+number+"price\' name=\'pice\'></td>";
                                html+="<td><input type=\'text\' value=\'"+(data.com.gsellprice)+"\' name=\'小计\' id=\'"+number+"smallprice\' name=\'pice\'disabled=\'disabled\'></td>";
                                html+="<td><input type=\'button\'  style=\'cursor:pointer;\' name=\'操作\' value=\'删除\' id=\'button\' onclick=\'deleteRow()\'> </td>";
                                html+="</tr>";
                                $("#tableText").append(html); 
                                number=number+1;
                                aaa();
                            }
                        }
                    });
             }
    
    
        })
    
        function aaa(tableText) {
         var price = new Array();
         var number = new Array();
         var sum = 0;
            $("#tableText :input[name=单价]").each(function(i){ 
                price.push(this.value);
            }); 
    
            $("#tableText :input[name=数量]").each(function(i){ 
                number.push(this.value);
            }); 
    
    
            for (var i = 0; i < price.length; i++) {
                for (var m = 0; m < number.length; m++) {
                    if(i==m){
                        sum+=decimal(number[m]*1*price[m]*1,2)
                    }
                }
            }
               $("#yyy").val(decimal(sum,2));
               $("#sss").val(Math.floor(sum * 10)/10);
               $("#yyys").val(decimal(sum,2));
               $("#sssy").val(Math.floor(sum * 10)/10);
               $("#zzz").val(Math.floor(sum * 10)/10);
    }
    
        function decimal(num,v){
            var vv = Math.pow(10,v);
            return Math.round(num*vv)/vv;
            }
    
        function chang(obj,id){
            var ID =id;
            var priceid=ID+"price";
            var pr="#"+priceid;
            var price=$(pr).val();
            var number=obj.value;
            var pricrd=price*1000;
            var small=(number*pricrd)/1000;
            var smalls=ID+"smallprice";
            var sm="#"+smalls;
            $(sm).val(small);
            /* alert($(obj).parent("td").next().next().children().val()); */
    
        }
        $(document).keydown(function(){
             if (event.keyCode==121) {
                 //F10的键值为121
                 window.location='http://localhost:8484/market/index.do#/market/jurisdiction/roleList.do';
            }
        })
    
    
        $(document).keydown(function(){
             if (event.keyCode==117) {
                 //F6的键值为117
                 deleteRow(e);
            }else if (event.keyCode==120) {
                 //F9的键值为120
                 formsubmit();
            }
        })
    
    
    
        /**
        *收款处理
        */
        function formsubmit() {
            debugger
            var div = "<div class='loading-div'></div>";
            $("#myModal").after(div);
            var url = '';
                $(".modal-backdrop").remove();
                url = "<%=path%>/order/receivables.do";
                $.ajax({
                    type: 'post',
                    url: url,
                    data:$("#userForm").serialize(),
                 /*    {
    
                        "oId":$("#num1").val(),
                        "oYtotalprice":$("#yyys").val(),
                        "oStotalprice":$("#sssy").val()
                    }, */
                    cache: false,
                    dataType: "json",
                    success: function(data) {
                        number=0;
                        $(".loading-div").remove();
                        if (data.error_code == "0") {
                            alert("收款成功");
                            queryList();
                        } 
                    }
                });
                location.reload();
    
        }
    </script>
    </body>
    </html>
    
    点赞 评论 复制链接分享
  • metgo metgo 4年前

    利用绝对定位,比如

    <html>
    <head>
    <style type="text/css">
    #test
    {
    position:absolute;
    left:100px;
    top:150px
    }
    </style>
    </head>
    
    <body>
    <div id="test"></div>
    
    </body>
    
    </html>
    
    点赞 评论 复制链接分享
  • yytwiligt Hank_YH 4年前

    用绝对尺寸和绝对位置,贴代码

    点赞 评论 复制链接分享
  • qq_34309305 75闪光雷 4年前

    页面设置一个min-length,当页面 小于这个size时,就固定不变了

    点赞 评论 复制链接分享
  • luweihualulei 阿磊_kb 4年前

    代码 粘贴出来看看!

    点赞 评论 复制链接分享

相关推荐