Question

我目前正在尝试将这个红色小方块变成一个带有一些文本的按钮-但据我所知，它确实有很大的空白。

将此用作源代码。

HTML：

<div id="press">
<div class='a'></div>
</div>

CSS：

div#press {height:100px;width:100px;}

div.a {
width: 75px;
height:75px;
 background-color:red;
position:fixed;

}

JS：

$(document).ready(function() {
    animateDiv();

});

function makeNewPosition($container) {

    // Get viewport dimensions (remove the dimension of the div)
    $container = ($container || $(window))
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv() {
    var $target = $('.a');
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $('.a').animate({
        top: newq[0],
    left: newq[1]
}, speed, function() {
    animateDiv();
});

};

function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = 0.1;

var speed = Math.ceil(greatest / speedModifier);

return speed;

}

尝试创建一个按钮，该按钮在单击时开始“随机”浏览页面。

如果有人可以帮助，那将真的很整洁。

所有这些都很新，我尝试过的所有资源还没有真正帮助我。

谢谢。

Answer 1

您可以像这样编码。

<div>
  <Button>
    <a>Type some text here.</a>
  </Button>
</div>

如何使这个红色正方形成为带有文本的按钮？

1 个答案: