使用jQuery移动div并随机选择一个可以通过以下步骤实现:
<div id="container">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<!-- 添加更多div -->
</div>
<style>
#container {
width: 500px;
height: 300px;
border: 1px solid #000;
position: relative;
}
div {
width: 100px;
height: 100px;
background-color: #ccc;
position: absolute;
}
</style>
<script>
$(document).ready(function() {
// 移动div
$('#container div').click(function() {
var leftPos = Math.random() * ($('#container').width() - $(this).width());
var topPos = Math.random() * ($('#container').height() - $(this).height());
$(this).css({
left: leftPos,
top: topPos
});
});
// 随机选择一个div
$('#randomButton').click(function() {
var divCount = $('#container div').length;
var randomIndex = Math.floor(Math.random() * divCount);
var randomDiv = $('#container div').eq(randomIndex);
randomDiv.css('background-color', 'red');
});
});
</script>
<button id="randomButton">随机选择一个div</button>
完成以上步骤后,打开HTML文件,点击div元素即可移动它,点击按钮则会随机选择一个div,并将其背景颜色改为红色。
领取专属 10元无门槛券
手把手带您无忧上云