js课程 5-14 js如何实现控制动画角色走动

一、总结

一句话总结：首先是onkeydown事件，然后是改变元素的left和top属性

1、常用键盘事件有哪些？

• onkeydown和 onkeyup，onkeypress用的很少

2、js如何实现按上下左右页面中的图片也跟着变化？

首先是onkeydown事件，然后是改变元素的left和top属性

3、js中的事件触发的两种方式？

在标签内，比如onclick=""
在script中，document.onkeydown=function(event){}

26 document.onkeydown=function(event){

4、如何让一个文本框里面只能输入大写或者小写（比如验证码框）（用键盘事件）？

用onkeyup函数，比如只能输入大写，首先获取文本内容，然后全部用toUpperCase函数转成大写

23 <script>

24 vobj=document.getElementById('verify');

25

26 vobj.onkeyup=function(){

27     val=this.value;

28     val2=val.toUpperCase();

29     this.value=val2;

30 }

31 </script>

二、js如何实现控制动画角色走动

1、相关知识

 js特效:
1.触发事件
2.属性改变
3.样式改变

绑定事件:
1.标签身上
2.js代码中

鼠标事件:
• onclick
• ondblclick
• onmouseenter
• onmouseleave
• onmousemove

实例:循环单击!

键盘事件:
• onkeydown
• onkeyup
• onkeypress

2、代码

onkeyup键盘弹起事件

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

     </style>

 </head>

 <body>

     <form action="">

         <p>用户名:</p>

         <p><input type="text"></p>

         <p>密码:</p>

         <p><input type="text"></p>

         <p>验证码:</p>

         <p><input type="text" id='verify'></p>

         <p><input type="submit" value="Ok"></p>

     </form>

 </body>

 <script>

 vobj=document.getElementById('verify');

 vobj.onkeyup=function(){

     val=this.value;

     val2=val.toUpperCase();

     this.value=val2;

 }

 </script>

 </html>

onkeydown键盘按下事件

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         img{

             cursor:pointer;

             position: absolute;

             top:0px;

             left:0px;

         }

     </style>

 </head>

 <body>

     <img src="a.png" id="imgid">

 </body>

 <script>

 imgobj=document.getElementById('imgid');

 xs=0;

 xv=30;

 ys=0;

 yv=30;

 document.onkeydown=function(event){

     kc=event.keyCode;

     document.title=kc;

     switch(kc){

         case 37:

             xs-=xv;

             imgobj.style.left=xs+'px';

             document.body.style.background='#f00';

             break;

         case 38:

             ys-=yv;

             imgobj.style.top=ys+'px';

             document.body.style.background='#0f0';

             break;

         case 39:

             xs+=xv;

             imgobj.style.left=xs+'px';

             document.body.style.background='#00f';

             break;

         case 40:

             ys+=yv;

             imgobj.style.top=ys+'px';

             document.body.style.background='#f0f';

             break;

     }

 }

 </script>

 </html>
 

js课程 5-14 js如何实现控制动画角色走动的更多相关文章

  1. js课程 1-4 js变量的作用域是怎样的

    js课程  1-4   js变量的作用域是怎样的 一.总结 一句话总结:只有在函数内部前面带var的变量为局部变量,局部变量只能在函数体内使用. 1.什么情况下会出现NaN类型的错误,举一例? Num ...

  2. js正则实现用户输入银行卡号的控制及格式化

    //js正则实现用户输入银行卡号的控制及格式化 <script language="javascript" type="text/javascript"& ...

  3. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  4. js课程 1-5 js如何测试变量的数据类型

    js课程 1-5 js如何测试变量的数据类型 一.总结 一句话总结:用typeof()方法. 1.js如何判断变量的数据类型? 用typeof()方法. 13 v=10; 14 15 if(typeo ...

  5. js课程 1-3 Javascript变量类型详解

    js课程 1-3  Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...

  6. js课程 1-2 js概念

    js课程 1-2  js概念 一.总结 一句话总结:js标签元素也是js对象,有属性和方法,方法就是事件,属性就是标签属性,可以直接调用. 1.js中如何获取标签对象? getElement获取的是标 ...

  7. c#调用js，以及js调用C#里的函数, c#自己生成js代码，实现对web的控制

    using mshtml;using System;using System.Collections.Generic;using System.Linq;using System.Security.P ...

  8. 7-81 js课程小结

    7-81 js课程小结 学习要点 理解全局对象 变量的作用范围 理解全局对象Global 全局属性和函数可用于所有内建的 JavaScript 对象.全局对象是所有全局方法的拥有者,用来统一管理全局方 ...

  9. vue用js部分控制动画实现

    上次我们提到用vue实现过渡动画,其实只讲了vue动画的一部分,用vue自带的css状态控制动画实现,不带js http://www.cnblogs.com/null11/p/7081506.html ...

随机推荐

  1. python-openpyxl安装

    今天在安装openpyxl的时候,一直提示错误,后来才发现仅仅安装它还不够,还需要其他两个库的支持1.安装jdcal2.安装et_xmlfile这两个库安装的方法,都是直接在命令行下面,进入库文件se ...

  2. python-打开网页

    最近一直想通过python来实现网页的操作.因为想把自己vimrc的配置直接通过脚本来实现.比较理想的情况下,就是通过一个脚本,把自己需要的一些资源直接从网上下载下来,然后再对下载的资源进行安装等操作 ...

  3. sparksql不支持hive中的分区名称大写

    但是在hive中查询是可以的. 后来经过一点一点测试发现,原来分区名称不能是大写,必须小写才行.

  4. 用css让元素隐藏的几种办法

    display:none;   //能隐藏并不占空间 visibility:hidden;  //隐藏但占据空间 opacity:0; position:absolute 移动到不在页面显示的地方

  5. LuoguP2754 [CTSC1999]家园(分层图，最大流)

    题目背景 none! 题目描述 由于人类对自然资源的消耗,人们意识到大约在 2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知 ...

  6. 【Django】MEDIA的配置及用法

    如果需要在数据库中存储图片或视频类的数据,我们可以配置MEDIA. 下面的示例将以上传一张图片的形式来说明MEDIA的配置及用法. 第一步 settings.py # media配置 MEDIA_UR ...

  7. VMware Vsphere 6.0安装部署 Vsphere ESXi安装

    Vsphere ESXi安装 ESXi作为虚拟化环境的Hypervisor层,负责将服务器虚拟成资源池,提供接口供管理组件调用,将下面的iso刻录成光盘或可启动U盘,安装在服务器裸机上: 下载地址请见 ...

  8. ManagementObjectSearcher 对象获取串口列表

    首先,需引用using System.Management; 可先建个枚举类,如下 #region WIN32 API /// <summary> /// 枚举win32 api /// ...

  9. 通过wireshark，以及python代码收发邮件，了解smtp协议，pop协议工作过程

    40返回连接server成功 41.43发送ehlo命令查询server支持命令 返回250 44.46请求认证  server响应235认证成功 47.49发送mail命令发送者邮箱  返回250 ...

  10. 高性能计算机传奇（vamei）

    高性能计算机是用网络将多台计算机连接在一起.并构成一个统一的系统,从而拥有远超个人电脑的计算能力.这样利用网络,让计算机合作工作的并行系统又称为集群(cluster).server.分布式计算机.超级 ...