屏幕中间有一条线。以这条线为中心,应该有一个矩形,我可以在某个事件中更改其位置和大小(例如单击它)。更改矩形的X位置后,它始终需要完全显示在屏幕上,我至少需要更改至少30像素。

这是我当前的代码:

<html>
<head>
  <title>B1</title>
  <style type="text/css">

     .line {
        position:absolute;
        top:50%;
        width:100%;
        height:1px;
        background:black;
    }

     .rectangle {
         position:absolute;
         top: 50%;
         left: 80%;
        width: 200px;
        height: 100px;
        margin: 0 auto;
        background: red;
    }

    </style>
   </head>
  <body>
  <script type="text/javascript">

    function changeRec() {
        var elementStyle = document.getElementById("rectangle").style;
        var newX = (Math.random() * window.screen.availWidth - 30) + 30;
        if (newX > window.screen.availWidth - document.getElementById("rectangle").clientWidth) {
            newX = window.screen.availWidth - document.getElementById("rectangle").clientWidth;
            newX;
        }
        elementStyle.position = "relative";
    }

     document.onkeydown = onKey;
     function onKey(e) { if (e == null) {
             e = window.event;
         }
        switch (e.which || e.charCode || e.keyCode) {
            case 32:
            // space
                changeRec();
            break;
            case 65: // a
            break;
            case 66:
            // b
        }
     }

  </script>

    <hr class="line">
    <div class="rectangle" id="rectangle" ></div>





我有两个问题:


矩形不在Y轴的线上居中,因为高度应该是可变的,所以我不能只设置固定的边距。
我的changeRec()方法无法正常工作。有时,它将X位置设置为屏幕之外的值。


我对JS,CSS和HTML还是很陌生,因此可以提供任何帮助,

最佳答案

因此,我摆弄了您的代码,并使其正常工作。这是您似乎遇到的问题:

矩形的垂直对齐

实现这种垂直对齐的一种解决方案是使用transform:translateY,如下所示:

top:50%;
transform:translateY(-50%);


但是由于某种原因,我希望有人比我更聪明地解释,为使矩形正确居中,我使用了translateY(-43%)。也许关于hRules有点奇怪...

编辑:这确实是因为hr及其边距。我将其边距设置为0,并且translateY(-50%)按预期工作。

至于移动Rect问题,有几个问题:

正如人们在评论中所说,要选择矩形,您需要使用:

document.getElementsByClassName("rectangle")[0]


我想,尽管您的编辑不再需要。

在您的代码中,此行:

var newX = (Math.random() * window.screen.availWidth - 30) + 30;


为什么是-30?矩形的宽度为200像素。另外,-30应与availWidth一起放在括号中。为了下面的代码段,我将availWidth更改为document.body.clientWidth以解决iFrame问题。因此,我们有:

var newX = (Math.random() * (document.body.clientWidth -200));


同样,您也无缘无故将矩形的位置更改为相对位置。我刚刚删除了。

最后,为矩形赋予样式新的左值时,请不要忘记添加“ px”。

无论如何,这是一个有效的代码段:



function changeRec() {
        var elementStyle = document.getElementsByClassName("rectangle")[0].style;
        var newX = (Math.random() * (document.body.clientWidth -200));
        elementStyle.left = newX+"px";
    }

     document.onkeydown = onKey;
     function onKey(e) { if (e == null) {
             e = window.event;
         }
        switch (e.which || e.charCode || e.keyCode) {
            case 32:
            // space
                changeRec();
            break;
            case 65: // a
            break;
            case 66:
            // b
        }
     }

.line {
        position:absolute;
        top:50%;
        width:100%;
        height:1px;
        margin:0px;
        background:black;
    }

     .rectangle {
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50%;
        width: 200px;
        height: 100px;
        background: red;
    }

<hr class="line">
<div class="rectangle"></div>

10-05 20:58
查看更多