js实现简单动画播放

最新推荐文章于 2024-05-15 22:19:45 发布

【JAVA】玩家

最新推荐文章于 2024-05-15 22:19:45 发布

阅读量960

点赞数

本文链接：https://blog.csdn.net/qq_45399396/article/details/115494296

版权

JS动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js实现简单动画播放：

功能描述：用js简单制作一个由按钮控制的可以随机播放图片的动画效果，这里当点击开始，可以不停止的播放，只有点击停止的时候才暂停，当再次点击开始的时候，继续当前页面开始播放。

需要了解的知识点：

1，需要了解元素（对象）中（添加，删除与判断）属性的方法
2，需要了解计时器的应用
3，对象的获取与绑定
4，递归的调用函数

html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>随机播放</title>
    <link rel="stylesheet" type="text/css"  href="japractice.css">
    <script type="text/javascript" src="jspractice.js"></script>
</head>
<body >
     <div class="star" id="pc">准备观赏旅行回忆咯</div>
     <input type="button" id="btn" value="开始">
</body>
</html>

css

*{
    padding:0px;
    margin: 0px;
}
.star{
    width: 900px;
    height: 480px;
    text-align: center;
    line-height: 480px;
    color: #61a58c;
    font-family: Bahnschrift;
    margin: 15px auto;
    font-size: 40px;
    border: 1px red solid;
}
.pic{
    width: 900px;
    height: 480px;
    border: 1px solid chartreuse;
    margin: 15px auto;
}
#btn{
    width: 100px;
    height: 30px;
    margin: 3px auto;
    display: block;
}


window.onload = function()
{
    //获取对象
     var pc = document.getElementById("pc");
     var btn = document.getElementById("btn");

    //创建一个数组是为了循环图片
    var list=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];

    //mytime用来作为标识
    var mytime = null;

    //给指定对象添加属性
    function  addClass(obj, cn){
        obj.className +=" "+cn;
    };

    //删除指定的元素（对象）的属性
    function removeClass(obj,cn){
        var reg = new RegExp("\\b"+cn+"\\b");
        obj.className = obj.className.replace(reg, " ");
    }

    //判断是否含指定的属性
    function  hasClass(obj, cn)
    {
        //创建正则表达是的构造函数
        var reg = new RegExp("\\b"+cn+"\\b");
        return reg.test(obj.className);
    };

    function  show(){
        //生成随机数
        num = Math.floor(Math.random()*10) % list.length;
        pc.style.background="url("+list[num]+") no-repeat";
        pc.innerHTML = " ";

        //由于setTimeout是只执行一次的函数，这里第一个参数添加函数，自我反复调用.
        //开启计时器
        mytime=setTimeout(show,800);
    };

    btn.onclick = function()
     {
         //添加指定的属性
         if(!hasClass(pc,"pic"))
         {
             addClass(pc,"pic");
         }

         if(mytime == null)
         {
             btn.value= "停止";
             show();
         }else{
             btn.value = "开始";
             //关闭计时器
             clearTimeout(mytime);

             //mytime也是全局变量
             mytime=null;
         }

     };
}

在这里插入图片描述

【JAVA】玩家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现简单动画播放

js实现简单动画播放：功能描述：用js简单制作一个由按钮控制的可以随机播放图片的动画效果，这里当点击开始，可以不停止的播放，只有点击停止的时候才暂停，当再次点击开始的时候，继续当前页面开始播放。需要了解的知识点：1，需要了解元素（对象）中（添加，删除与判断）属性的方法2，需要了解计时器的应用3，对象的获取与绑定4，递归的调用函数html<!DOCTYPE html><html><head> <meta charset="UTF-8"
复制链接

扫一扫

专栏目录