js小例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>     <title></title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <link href="marx.css"rel="stylesheet" type="text/css"/>     <script language="JavaScript">        function Mario(){            this.x=0;            this.y=0;            this.move=function(dir){                switch (dir){                    case 0://向左移动                        var getmove2=document.getElementById(‘getmove‘);                         riget=getmove2.style.left;                         riget=parseInt(riget.substr(0,riget.length-2));                        getmove2.style.left=(riget-10)+‘px‘;                        break                    case 1://向右移动                        var getmove1=document.getElementById(‘getmove‘);//dom部分                         left=getmove1.style.left;                        left=parseInt(left.substr(0,left.length-2));//取对应的字符                        getmove1.style.left=(left+10)+‘px‘;                        break                    case 2://向上移动                        var getmove1=document.getElementById(‘getmove‘);//dom部分                         left=getmove1.style.top;                        left=parseInt(left.substr(0,left.length-2));//取对应的字符                        getmove1.style.top=(left-10)+‘px‘;                        break                    case 3://向上移动                        var getmove1=document.getElementById(‘getmove‘);//dom部分                         left=getmove1.style.top;                        left=parseInt(left.substr(0,left.length-2));//取对应的字符                        getmove1.style.top=(left+10)+‘px‘;                        break                }            }        }        var mario=new Mario();         //全局函数         /*function marmove(rig){             switch(rig){                 case 1:                      //alert(‘右移动‘+rig)                     mario.move(rig)                     break                  case 0:                         //alert(‘左移动‘+rig)                         mario.move(rig)                     break             }         }*/     </script> </head> <body> <p id="detail"></p> <table class="con" border="1px">         <tr><td colspan="3">按钮中心</td></tr>         <tr><td>**</td><td><input type="button" value="↑↑" onclick="mario.move(2)"/></td><td>上</td></tr>         <tr><td>**</td><td><input type="button" value="↓↓" onclick="mario.move(3)" /></td><td>下</td></tr>         <tr><td>**</td><td><input type="button" value="→→" onclick="mario.move(1)"/></td><td>右</td></tr>         <tr><td>**</td><td><input type="button" value="←←" onclick="mario.move(0)"/></td><td>左</td></tr> </table> <div class="games">     <img id=‘getmove‘ style="width: 30px; left: 30px;top:50px;position: absolute;" src="a.gif"  />      </div><br/> </body> </html>

css文件

.games{     width:500px;     height: 400px;     background-color: pink;     position: absolute; } .con{width: 200px; height: 100px; border:1px solid red; margin-top: 50px;} .button {     height: 2em;     border: 0;     border-radius: .2em;     background-color: #34538b;     color: #fff;     font-size: 12px;     font-weight: bold; }

图片如下:

时间： 2025-01-02 00:52:20

js小例子的相关文章

js小例子（标签页）

运用js写的一个小例子,实现点击不同的标签出现不同的内容: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta chaset="utf-8"> 5 <script> 6 function nav(obj, x) 7 { 8 var a = obj.parentNode.parentNode.children; 9 for(var i =0;i<a.length;i++) { 10 a[

node.js安装及小例子

1.node.js安装:http://www.nodejs.org/download/ 下载msi版本,直接双击安装,默认在c盘programfiles下,可以进行配置. 2.在某路径下建立test.js文件(本人在D:\nod目录下): 代码: 1 var http = require('http'); 2 http.createServer(function (req, res) { 3 res.writeHead(200, {'Content-Type': 'text/plain'});

关于 JS 面向对象继承属性和方法的小例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>关于 JS 面向对象继承属性和方法的小例子</h1> </body> </html> <script> //人的构造函

js图片轮换经典小例子

使用js脚本实现图片轮换.图片轮播的小例子,纯js实现的,感觉不错,收藏下. 例子,js脚本实现图片轮换代码. <script type="text/javascript"> var NowFrame = 1; //初始化显示第几张 var MaxFrame = 3; //最大显示几张 function show() { for (var i = 1; i < (MaxFrame + 1); i++) { if (i == NowFrame) document.get

JS模拟键盘事件 -- 原理及小例子

小例子: (Chrome下可用,其他浏览器未测试,使用新方法,暂不考虑兼容性) 代码如下: 1 <input type="button" tabindex="-1" value="点点点点点" id="btn"> 2 <input type="text" placeholder="1"> 3 <input type="text" plac

一个小例子理解js异步加载

前几天笔试某公司有这样一道题.编写一个javascript函数,可以在页面上异步加载js,在加载结束后执行callback,并在IE和chrome下可以执行. 就这个题我写了一个DOM方法异步加载js的例子,可以给对于异步不了解的朋友参考感受一下. 众所周知,js是一种单线程的语言,它的Event Loop机制可以看一下阮一峰的这篇博客,讲解的很好 http://www.ruanyifeng.com/blog/2014/10/event-loop.html 下面看一下我写的例子 1 <!DOCT

JS小插件之2——cycle元素轮播

元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title> cycle demo </titl

angular ngRoute小例子

ngRoute学习小例子 单页面应用中可以使用ng-view,当修改ng-view的template时可以实现一个页面html中展示不同内容(div部分). 例如index.html中包含ng-view 1 <!DOCTYPE HTML> 2 <html ng-app="app"> 3 <head> 4 <script src="./bower_components/angular/angular.js"></s

五个小例子教你搞懂 JavaScript 作用域问题

众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者将使用五个小例子来给大家分析下 JavaScript 的作用域要注意的问题. 感谢 例子的来源 (这5个例子我做错了2个 [嘿嘿,尽情鄙视吧],笔者就是要 死磕自己,奉献大家!) 先给出五个例子: 每个例子旁边都会给出答案的链接,如果你全部都正确了,你可以忽略这篇短文,并深深的鄙视下笔者. 例一: