javaScript小练习之喵星人点击计数器

最新推荐文章于 2022-12-25 16:04:53 发布

迷糊的十年

最新推荐文章于 2022-12-25 16:04:53 发布

阅读量297

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/keven_apprentice/article/details/78780128

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

废话不多说，直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Cat Clicker</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


</head>
<body>
    <div class="container" style="padding-top:60px;"></div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/javascript">

        // 初始化页面
        function init() {
            // 构造函数Cat，可以帮你造很多很多猫咪
            function Cat(name, url, count) {
                // 猫咪姓名
                this.name = name;
                // 猫咪图片地址
                this.url = url;
            }
            // 获取容器元素
            var container = $('.container')[0];
            // 建立Cat 实例1
            var cat1 = new Cat('Mike', 'https://lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426');
            // 建立Cat 实例2
            var cat2 = new Cat('Joke', 'https://lh3.ggpht.com/kixazxoJ2ufl3ACj2I85Xsy-Rfog97BM75ZiLaX02KgeYramAEqlEHqPC3rKqdQj4C1VFnXXryadFs1J9A=s0#w=640&h=496');
            // 放入catInit 数组中
            var catInit = [cat1, cat2];
            // 遍历
            for (const cat of catInit) {
                // 含 猫咪 姓名 图片地址 的内容
                catContent =`<figure class="text-center cat">
                    <h2 class="">${cat.name}</h2>
                    <img src="${cat.url}">
                    <figcaption class="text-center">点击次数：<span class="count">0</span></figcaption>
                </figure>`;
                // 将内容加入容器的第一个子节点中
                container.insertAdjacentHTML('afterbegin', catContent);
            }            
        }
        // 执行初始化
        init();
        // 给每个 .cat 容器添加点击事件
        $('.cat').click(function() {
            // 临时变量获取当前容器中的记数
            var tmp = $(this).find('.count').text();
            // 变量自增
            tmp ++;
            // 更新容器中的记数
            $(this).find('.count').text(tmp);
        });
    </script>
</body>
</html>

其中，有个bug，可以修改.count中的计数。

迷糊的十年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript小练习之喵星人点击计数器

废话不多说，直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Cat Clicker</title>  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstr
复制链接

扫一扫

专栏目录