原生js实现游戏按钮

LeoHsiun 发布于2019-08-23 17:58 / 3144人阅读

摘要：游戏按钮原生实现游戏的开始暂停结束实现使用实现实现步骤获取元素开始事件停止事件暂停事件定时器效果演示代码按钮动画样式输入游戏总时长分钟倒计时秒开始暂停结束有加入一丢丢的动画代码获取元素总时长剩余时长点开始按钮时间戳

游戏按钮

原生js实现游戏的‘开始’‘暂停’‘结束’

实现：

使用setInterval实现

js实现步骤：

获取元素

开始事件

停止事件

暂停事件

定时器

效果演示：

html代码

有加入一丢丢c3的动画

js代码

window.onload = function(){
    //  1.获取元素
    var endTimeStr = document.getElementsByClassName("endTime")[0];
    var timeVal = document.getElementsByTagName("input")[0];
    var startBtn = document.getElementsByClassName("start")[0];
    var pauseBtn = document.getElementsByClassName("pause")[0];
    var stopBtn = document.getElementsByClassName("stop")[0];
    var totalTime, //总时长
        showTime,//剩余时长
        startTime, //点开始按钮时间戳
        nowTime,//定时器开启的时间戳
        timer;
    var timeType = 1; //1结束后开始 2暂停后开始


    // 2.开始事件
    startBtn.onclick = function(){
        if(timer) clearInterval(timer);
        if(timeType==1)totalTime = timeVal.value*60;  //初始化总时长
        startTime = new Date(); //点击按钮开始时间
        startBtn.disabled = true;
        start();
    }
    // 3.停止事件
    stopBtn.onclick = function(){
        clearInterval(timer)
        timeType = 1;
        showTime = timeVal.value*60;  //剩余时长
        endTimeStr.innerHTML = showTime;
        startBtn.disabled = false;
    }
    // 4.暂停事件
    pauseBtn.onclick = function(){
        clearInterval(timer)
        timeType = 2;
        startBtn.disabled = false;
        totalTime = showTime;  //总时长==剩余时长
    }
    /*
    定时器
    */ 
   function start(){
       nowTime = new Date();//定时器开始时间
       showTime = totalTime-parseInt((nowTime-startTime)/1000);
       endTimeStr.innerHTML = showTime;
       timer = setInterval(function(){
            showTime--;
            endTimeStr.innerHTML = showTime;
            if(showTime<1){
                clearInterval(timer)
                alert("游戏结束");
            }
       },100);
   }
 }

代码复制可直接查看效果

专线服务超融合服务器原生js获取按钮原生js设置按钮禁用原生js实现 ajax原生js实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104457.html

前端每日实战：163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏（内含 3 个视频）

摘要：本项目将设计一个多选一的交互场景，用进行页面布局用制作动画效果用原生编写程序逻辑。中包含个展示头像的和个标明当前被选中头像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/L...

pakolagij 2019-08-23 13:49 评论0 收藏0
前端每日实战：163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏（内含 3 个视频）

摘要：本项目将设计一个多选一的交互场景，用进行页面布局用制作动画效果用原生编写程序逻辑。中包含个展示头像的和个标明当前被选中头像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/L...

antz 2019-08-02 12:09 评论0 收藏0
前端每日实战：163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏（内含 3 个视频）

摘要：本项目将设计一个多选一的交互场景，用进行页面布局用制作动画效果用原生编写程序逻辑。中包含个展示头像的和个标明当前被选中头像的。 showImg(https://segmentfault.com/img/bVbknOW?w=400&h=302); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/L...

The question 2019-08-29 17:26 评论0 收藏0
菜鸟| 微信小游戏好友排行榜教程

摘要：今天我们分享的菜鸟文档将介绍微信小游戏好友排行榜的制作过程，包括创建项目并发布微信开发者平台添加小游戏打开开放域功能主域和开放域通讯，以及与原生的布局。写在前面：随着越来越多的新人开始接触白鹭引擎，创作属于自己的游戏。考虑到初学者会遇到一些实际操作问题，我们近期整理推出菜鸟系列技术文档，以便更好的让这些开发者们快速上手，Egret大神们可以自动忽略此类内容。今天我们分享的菜鸟文档将...

libxd 2019-08-23 11:33 评论0 收藏0