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. Android引入library失败的可能原因

    eclipse环境,引入library一直失败 谷歌到的原因是 Windows下 目标工程必须和引用工程在同一磁盘盘符下 然后我将要引入的library项目移动和现在项目同一磁盘下,引入成功 至于为什 ...

  2. Python 数据结构与算法 —— 哈弗曼树

    1. 从扩充二叉树到哈弗曼树 扩充二叉树:对二叉树 T,加入足够多的新叶节点(而不是任意),使 T 的原有结点都变成度数为 2 的分支节点,得到的二叉树称为 T 的扩充二叉树. 对于扩充二叉树而言, ...

  3. Qwt库的一个使用注意事项

    作者:朱金灿 来源:http://blog.csdn.net/clever101 一般debug版本的程序链接release版本的库是没有问题的.今天使用debug版本程序链接release版本的qw ...

  4. spark源码阅读

    根据spark2.2的编译顺序来确定源码阅读顺序,只阅读核心的基本部分. 1.common目录 ①Tags②Sketch③Networking④Shuffle Streaming Service⑤Un ...

  5. 使用Spring实现MySQL读写分离(转)

    使用Spring实现MySQL读写分离 为什么要进行读写分离 大量的JavaWeb应用做的是IO密集型任务, 数据库的压力较大, 需要分流 大量的应用场景, 是读多写少, 数据库读取的压力更大 一个很 ...

  6. hive load文件第一个字段为NULL

    在hive中,通常须要载入外部数据源.load文件时.第一个字段会出现NULL. 比如: 1.运行load语句: LOAD DATA LOCAL INPATH 'test.txt' OVERWRITE ...

  7. VMware虚拟机XP系统安装

    转载:http://jingyan.baidu.com/article/54b6b9c00e2f452d593b4762.html

  8. 怎样解决git提交代码冲突

    当我们使用git提交代码时,别人可能也同一时候改动了我们改动的文件,可是别人的先合入到配置库里边,这样当我们的提交要合入时.就会产生冲突,能够使用下面步骤来解决冲突: (1) git rebase   ...

  9. android中图片倒影、圆角效果重绘

    本文用来记录一些Android 操作图片的方法,方便查看. 1.将Drawable转化为Bitmap public static Bitmap drawableToBitmap(Drawable dr ...

  10. 【单词】常见单词含义的辨异(emulator/simulator、hardware/firmware)

    1. emulator 与 simulator The Simulator tries to duplicate the behavior of the device.(仿真的是行为): The Em ...