JS通过键盘点击事件实现div移动

页面内容:文本框模拟键盘点击   div元素实现移动;

<body>
<textarea id="myarea"></textarea>
<hr>
<div id="mydiv" title="dddddiv"></div>
</body>

div样式可以自行定义;

JS脚本代码如下:

当键盘输入'a'或'A'时,div向左移动10px

<script type="text/javascript">
var myarea = document.getElementById("myarea");
var mydiv = document.getElementById("mydiv");
//event是键盘事件对象,能后识别按下的是哪个键
var a = mydiv.offsetLeft;
//var a = mydiv.offsetWidth;
//var a = window.getComputedStyle(mydiv).left;;
myarea.onkeypress = function(event) {
//alert(event.keyCode);
//var odiv = document.getElementById(“mydiv”);
//alert(odiv.getAttribute(“title”));
if(event.keyCode == "65"|| event.keyCode == "97") {
a=a-10;
//var b = a + “px”;
//alert(a);
var i = "20px"
mydiv.style.left = a + "px";
}
}
</script>

  

 

转载于:https://www.cnblogs.com/sueyyyy/p/9270937.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值