用javascript编写的小游戏（getElementById ， setInterval ， clearInterval ， window.onload ， innerText 和页面跳转， 标签的使用）
（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 和页面跳转， 标签的使用）的更多相关文章
- JS练习实例--编写经典小游戏俄罗斯方块
最近在学习JavaScript,想编一些实例练练手,之前编了个贪吃蛇,但是实现时没有注意使用面向对象的思想,实现起来也比较简单所以就不总结了,今天就总结下俄罗斯方块小游戏的思路和实现吧(需要下载代码也 ...
- HTML+CSS+JavaScript实现2048小游戏
相信很多人都玩过2048小游戏,规则易懂.操作简单,我曾经也“痴迷”于它,不到2048不罢休,最高成绩合成了4096,现在正好拿它来练练手. 我对于2048的实现,除了使用了现有2048小游戏的配色, ...
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- Javascript贪食蛇小游戏
试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...
- Pygame：编写一个小游戏 标签： pythonpygame游戏 2017-06-20 15:06 103人阅读 评论(0)
大学最后的考试终于结束了,迎来了暑假和大四的漫长的"自由"假期.当然要自己好好"玩玩"了. 我最近在学习Python,本意是在机器学习深度学习上使用Python ...
- 分享几个原生javascript面向对象设计小游戏
一.序言 不知大家是不是和我一样,当初都有个梦想.学编程,就是想开发游戏.结果进入大学学习之后,才知道搞的是数据库应用程序开发!在此,本人就分享下业余时间做的几个小游戏吧!本打算想用winform或w ...
- 原创+转发：微信小程序navigator、redirectTo、switchTab几种页面跳转方式
什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...
- JavaScript面向对象编程小游戏---贪吃蛇
1 面向对象编程思想在程序项目中有着非常明显的优势: 1- 1 代码可读性高.由于继承的存在,即使改变需求,那么维护也只是在局部模块 1- 2 维护非常方便并且成本较低. 2 这个demo是采用了 ...
- HTML+Javascript制作拼图小游戏详解（终）
上次我们已经讲解了制作的原理,并且展示了主要代码. 这次我将完整的代码给大家,仅供参考. HTML部分如下: <!DOCTYPE html> <html lang="en& ...
随机推荐
- 一个防止误删MSSQL数据库的方法
一个防止误删MSSQL数据库的方法 环境:Windows2008 R2 .SQL 2012 今天发现一个有趣的现象,之前数据库服务器的其中几个数据库做过镜像,不过现在已经删除了,今天又要在那台服务器上 ...
- CentOS 7 安装RabbitMQ 3.3
1.安装erlang 语言环境 安装依赖文件 #yum install ncurses-devel 进入 http://www.erlang.org/download.html 选择源文件下载 wge ...
- 解读2015年互联网UGC内容发展态势，安全事件频发
<2015内容安全年报> 阿里移动安全 第一章 2015年内容安全形势 随着互联网业务的迅速发展,互联网上的信息内容带来了爆炸式的增长.由于缺乏对网络活动进行有效监督和管理的措施,致使互联 ...
- RBAC模型速记
RBAC Model core concept: user,role,permission,operation,resource user has many roles, assign role to ...
- CSharpGL(2)设计和使用场景元素及常用接口
CSharpGL(2)设计和使用场景元素及常用接口 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合入 ...
- 现代程序设计 网页前端开发作业（to 邹欣老师）
在一些著名的网站的搜索框上,会有一种“自动完成”功能. 比如google.百度和淘宝: 现在,我们来考虑如何实现这个功能. 第一步:模仿任意一个网站,编写一个类似的网页效果原型. 在这一步,不要估计开 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (23) -----第五章 加载实体和导航属性之预先加载与Find()方法
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-2 预先加载关联实体 问题 你想在一次数据交互中加载一个实体和与它相关联实体. ...
- JavaScript学习笔记之数值
JavaScript内部,所有数字都是以64位浮点数形式储存,即使整数也是如此.(整数也是通过64浮点数的形式来存储的) 所以,1+1.0=2:且1===1.0的 浮点数不是精确的值,所以涉及小数的比 ...
- Java final 关键词修饰类、方法、变量
1. final修饰类 被修饰的类不能被继承,也没有子类.假如随意创建这些类的子类,子类可能会错误的修改父类的实现细节.出于安全原因,类的实现细节不允许有任何改动.在创建对象模型的时候,确信这个类不 ...
- oc集合
本人之前学习过一年半ios开发 由于行情太过凄惨,故转前端.心在前端,苹果亦难忘!把我平时的笔记作出给大家总结! 回顾之前的知识 便利初始化函数:框架类库中的一些类有一系列的以init开头的方法,这些 ...