本文主要是介绍js基础应用篇 - 豌豆射手，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
豌豆射手效果图，增加了可拖拽功能
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>豌豆射手</title><style type="text/css">*{margin: 0;padding: 0;}img{width: 100px;height: 100px;position: absolute;cursor: pointer;}/*div{width: 100px;height: 100px;background: red;position: absolute;}*/p{width: 30px;height: 30px;background: green;border-radius: 50%;position: absolute;}</style>
</head>
<body>
<div></div>
< img src="img/wan1.jpg" />
</body>
<script type="text/javascript">var odiv = document.getElementsByTagName("img")[0];function aa(){//创建豆子p元素，并添加到body中var p = document.createElement("p");document.body.appendChild(p);//豆子原始左边距=豌豆的左外边距+豌豆射手宽度（高度一样）p.style.left = odiv.offsetLeft + odiv.offsetWidth +"px";p.style.top = odiv.offsetTop + p.offsetHeight/2 +"px";//豆子移动时的左边距var count = odiv.offsetLeft+odiv.offsetWidth;var timer1 = setInterval(function(){count++;p.style.left=count+"px";//设置豆子左边距大于1000时消失，不在移动if (parseInt(p.style.left)>1000) {document.body.removeChild(p);// p.style.display="none";clearInterval(timer1);}},1);}setInterval(aa,1000);odiv.onmousedown=function(e){var evt = e||window.event;
// var xx = evt.clientX-odiv.offsetLeft;
// var yy = evt.clientY-odiv.offsetTop;var xx= evt.offsetX;var yy = evt.offsetY;document.onmousemove=function(e){var evt = e||window.event;var x = evt.clientX-xx;var y =evt.clientY-yy;odiv.style.left = x+"px";odiv.style.top = y+"px";return false;}document.onmouseup=function(){document.onmousemove = null;document.onmouseup = null;}}</script>
</html>
这篇关于js基础应用篇 - 豌豆射手的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
