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

来源：互联网发布：蓝科cms下载编辑：程序博客网时间：2024/05/16 12:25
废话不多说，直接上代码
<!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