（1）图片轮转

   <script type="text/javascript" >

      var num=;

      setInterval(function(){

         var dom=document.getElementById('myid');

     // var mysrc=dom.src;

     //alert(mysrc);

     if(num<){

       num++;

      }else{

       num=;

     }

     dom.src='images/'+num+'.jpg';

,);

   </script>
<body>

  <img src="data:images/1.jpg" width="500px" height="500px" id="myid"/>

</body>

这个要用到setInterval(调用的函数名称,周期性调用函数之间间隔的毫秒数);
获取路径：document.getElementById(绑定的Id);

想实现轮转，我们想到的就是改变图片的路径，这就用到了判断，因为我们就几张图片，就举个简单的例子！

想要轮转更多只需要把num数变一下即可。

（2）倒计时10s

<script type="text/javascript">

   windom.onload=function(){

    //获取开始按钮对象

    var mystrat=document.getElementById('stratid');

   //获取停止按钮对象

    var mystop=document.getElementById('stopid');

    //当点击开始时发生

     var date=;

    mystrat.onclick=function(){

      date=setInterval(stratnum,);

    };

    //当点击停止时发生

   mystop.onclick=function(){

      clearInterval(date);

   };

      //时间倒数方法

    function stratnum(){

      var dom=document.getElementById('myspan');

      //alert(dom);

      var num=dom.innerText;

      if(num>){

        num--;

      }

     dom.innerText=num;

    };

}

</script>
<body>

   <input type="buttom" id="stratid" value="開始">

   <input type="button" id="stopid" value="停止">

   <span id="myspan"></span>

</body>

想要達到倒計時的效果，我們要先考慮怎麼獲取當前的數，用到的方法還是document.getElementById(獲取對象的Id);
這樣我們就可以進行判斷了，只要滿足我們的條件即可。

在這裡還有一個知識點，就是先獲取的是點擊的對象，然後再根據它們響應的事件作出具體的操作。

（3）referrer的使用

2.html

<body>

<a href="2.html"> 馬上抽獎</a>

</body>

1.html

<script type="text/javascript">

  windom.onload=funcction(){

  var mystr=document.referrer;

  if(mystr){

    var dom=document.getElementById('mydiv'); 

    dom.style.display='none';

}else{

 setInterval(function(){

    var dom = document.getElementById("myspan");

    var num = dom.innerText;

    if (num > ) {

     num--;

     dom.innerText = num;

    } else {

     location.href = "2.html";

    }

},);  

}  

};

</script>
<body>

    <div id="mydiv">

        <span style="color:red;" id="myspan"></span>秒后跳转到登陆页面

    </div>

</body>

先要获取从上一个网页过来的路径：document.referrer;如果得到的路径为空，说明不是从登陆页面过来的，
就要进行判断该显示什么，不该显示什么，

获取秒数：document.ElementById('myspan');，

这个时候就需要我们进行判断了，秒数不可能为负，当为零时跳转到登录页面。

反之，就是正常从登录页面过来的。

用javascript编写的小游戏（getElementById ， setInterval ， clearInterval ， window.onload ， innerText 和页面跳转， 标签的使用）的更多相关文章

  1. JS练习实例--编写经典小游戏俄罗斯方块

    最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也 ...

  2. HTML+CSS+JavaScript实现2048小游戏

    相信很多人都玩过2048小游戏,规则易懂.操作简单,我曾经也“痴迷”于它,不到2048不罢休,最高成绩合成了4096,现在正好拿它来练练手. 我对于2048的实现,除了使用了现有2048小游戏的配色, ...

  3. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  4. Javascript贪食蛇小游戏

    试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...

  5. Pygame：编写一个小游戏 标签： pythonpygame游戏 2017-06-20 15:06 103人阅读 评论(0)

    大学最后的考试终于结束了,迎来了暑假和大四的漫长的"自由"假期.当然要自己好好"玩玩"了. 我最近在学习Python,本意是在机器学习深度学习上使用Python ...

  6. 分享几个原生javascript面向对象设计小游戏

    一.序言 不知大家是不是和我一样,当初都有个梦想.学编程,就是想开发游戏.结果进入大学学习之后,才知道搞的是数据库应用程序开发!在此,本人就分享下业余时间做的几个小游戏吧!本打算想用winform或w ...

  7. 原创+转发：微信小程序navigator、redirectTo、switchTab几种页面跳转方式

    什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...

  8. JavaScript面向对象编程小游戏---贪吃蛇

    1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. ​ 2 这个demo是采用了 ...

  9. HTML+Javascript制作拼图小游戏详解（终）

    上次我们已经讲解了制作的原理,并且展示了主要代码. 这次我将完整的代码给大家,仅供参考. HTML部分如下: <!DOCTYPE html> <html lang="en& ...

随机推荐

  1. 如何生成报告来枚举出整个sharepoint环境中的每个页面所使用的所有webpart

    背景 我的公司的SharePoint环境中购买了大量的第三方webpart,比如Quick Apps, Telerik RadEditor, Nintex Workflow等等..这样做的好处就是成本 ...

  2. 有Maple T.A.自有试题图so easy

    对于想完全控制试题库的用户而言,Maple T.A.是最好的选择.不论您是要利用现有的题库,还是要创建自己的题库,Maple T.A.都可以为您提供功能强大.操作便捷的工具创建数学内容. 1) Ste ...

  3. DDD实践问题之 - 关于论坛的帖子回复统计信息的更新的思考

    之前,在用ENode开发forum案例时,遇到了关于如何实现论坛帖子的回复的统计信息如何更新的问题.后来找到了自己认为比较合理的解决方案,分享给大家.也希望能和大家交流,擦出更多的火花. 论坛核心领域 ...

  4. Some practices to write better C#/.NET code（译）

    C#(.NET)中有关编码的一些建议,原文地址:http://www.codeproject.com/Articles/539179/Some-practices-to-write-better-Cs ...

  5. [Unity3D]自己动手重制坦克舰队ArmadaTank(2)从碰撞说起

    [Unity3D]自己动手重制坦克舰队ArmadaTank(2)从碰撞说起 在上一篇里我给出了重制的坦克舰队效果图和试玩程序.本篇介绍一下玩家坦克和敌方坦克碰撞问题. +BIT祝威+悄悄在此留下版了个 ...

  6. C语言 · 打印1-200之间的素数

    素数定义:除了1和本身再无其他整数可被其本身整除的数称为素数,也称质数. 举一例子打印出1-200之间所有的素数: #include<stdio.h> #include<math.h ...

  7. Oracle编程脚本记录

    --命令窗口查询 exec 存储名.包名.视图; select 函数名 from dual; create or replace procedure PR_test is begin --存储过程的代 ...

  8. C++构造函数和析构函数

    构造函数简介 在上一个章节我们在创建好类的对象之后,首先对它的每一个成员属性赋值之后再对它们进行输出操作,如果不赋值就输出,这些值就会是垃圾值.而为了代码的简介,一次性为所有成员属性初始化,C++的类 ...

  9. 为什么DOM操作很慢

    转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...

  10. Hibernate学习之hibernate.cfg.xml

    <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...