javascript004：键盘事件，定时器

最新推荐文章于 2024-01-05 16:02:00 发布

一个码农

最新推荐文章于 2024-01-05 16:02:00 发布

阅读量531

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44699728/article/details/90780999

版权

Js中的键盘事件

onkeydown 键盘按下 onkeyup 键盘释放
键盘事件，用于能获得光标的元素。

 <input type=”text”> 
<textarea></textarea>

键盘按下会弹出一个话：

  <textarea onkeydown="alert('输入密码')"></textarea>

键盘事件可以直接加在整个页面上。无论光标处在哪里，都能够触发。
document就代表页面

注意：
当给整个页面添加键盘事件时，必须用脚本添加，不能用某个标记添加。如: document.onkeydown
document.onkeydown 后面不能直接写脚本，必须写一个函数。
在document.onkeydown后面所写的函数，不能加括号

使用键盘事件对象. 给整个页面添加键盘事件时，因为事件后面不能让函数带括号，所以我们自己无法传参数进去。此时系统会自动传一个参数进去。这个参数就是当前的事件对象。键盘事件对象中，没有鼠标的横纵坐标。但是有当前按下的按键对应的数字。

<script>
    function f1(e) {
        var c = e.keyCode;
        alert(c);
    }
    document.onkeydown = f1;
</script>

keycode代表键盘所对应的字符----A–65
在这里插入图片描述

根据用户按下的按键的不同，显示不同的内容
用键盘控制一个div的移动。
注意：调用方法需要写在方法外面，script里面才会生效，要不然不能调用

 <style>
        #wps{
            border: black solid 5px;
            width: 200px;
            height: 200px;
            position: absolute;
        }
        #wps2{
            border: red solid 5px;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="wps"></div>
<div id="wps2"></div>
<script>
        function yidong(e){
        var n=e.keyCode;
        switch (n) {
            case 65:
                wps.style.left="-10px"  ;
                break;
            case 68:
                wps.style.left = "20px"	 ;
                break;
            case 87:
                wps.style.top = "-10px" ;
                break;
            case 83:
                wps.style.top = "10px"	;
                break;
        }
        }
        document.onkeydown=yidong;//调用函数
</script>

让盒子无限移动

 <style>
        #wps{
            border: black solid 5px;
            width: 200px;
            height: 200px;
            position: absolute;
        }
        #wps2{
            border: red solid 5px;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="wps"></div>
<div id="wps2"></div>
<script>
        function yidong(e){
        var n=e.keyCode;
        switch (n) {
            case 65:
                wps.style.left= wps.offsetLeft-20+"px"  ;
                //前面是只读属性，后面是只写属性。先定位，再在原来的基础上移动
                break;
            case 68:
                wps.style.left =wps.offsetLeft+20+ "px"	 ;
                break;
            case 87:
                wps.style.top = wps.offsetTop-20+"px" ;
                break;
            case 83:
                wps.style.top = wps.offsetTop+20+"px"	;
                break;
        }
        }
        document.onkeydown=yidong;
</script>

JS中的定时器:
setTimeout
setInterval

setTimeout是一次性定时器。
setInterval是持续定时器。

<script>
		setTimeout("alert(123)", 1000);  //一秒后弹出123
		setInterval("alert(123)", 1000);//没隔一秒弹一次123
	</script>

制作一个层，让层逐渐变大。
在这里插入图片描述
案例：大到500就停止

clearInterval 是用来结束定时器的，注意，一定要将setInterval()的返回值赋给一个变量，结束时，就用这个变量结束。
案例：让上面那个层，变大到500以后，再自己变小。再变大…

案例：制作一个图片，让图片一闪一闪（一闪一闪就是透明度的变化）
在这里插入图片描述

一个码农

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript004：键盘事件，定时器

Js中的键盘事件onkeydown 键盘按下 onkeyup 键盘释放键盘事件，用于能获得光标的元素。 <input type=”text”> <textarea></textarea>键盘按下会弹出一个话： <textarea onkeydown="alert('输入密码')"></textarea>键盘...
复制链接

扫一扫