跳至主要內容

JS表白

知识库编程技巧JavaScriptJavaScript小于 1 分钟

你喜欢我吗?

[vanilla]
<html>
<div class="demo-div" style="height: 200px">
    <h1 style="text-align: center;">你喜欢我吗?</h1>
    <input type="button" style="position:relative; left:285px; top:0px;" value=" 是的！" onclick="alert('太好了，晚上一起吃饭看电影！！！')" >
    <input type="button" style="position:relative; left:360px; top:0px;" value=" 喜欢个锤子！" id="love-Bn" onclick="alert('这不是你的真心话！')">
</div>
</html>
<script>
var loveBtn = document.getElementById('love-Bn');
loveBtn.addEventListener("mouseover", function( event ) {
  var Bn = event.target;
  var aWidth= (event.target.parentElement. clientWidth || 500)-100;
  var aHeight= (event.target.parentElement.clientHeight || 300)-56;
  var sJs1=Math.floor(Math.random()*aHeight);
  var sJs2=Math.floor(Math.random()*aWidth);
  Bn.style.top=sJs1 + 'px';
  Bn.style.left=sJs2+'px'; 
}, false);
</script>
<style>
.demo-div>input[type='button']{
    cursor: pointer;
}
</style>