JS案例练习（pink老师经典案例）

已于 2022-03-07 15:48:04 修改
阅读量2k 收藏 43
点赞数 5
分类专栏： 前端学习 文章标签： c++ css css3
于 2022-03-02 16:17:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenruiaaa/article/details/123231047
版权

记录在观看Pink老师js教程中遇到的值得反复写的案例！

1. 翻转任意数组

function Change() {
            var newArr = [];
            for (var i = arguments.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arguments[i]
            }
            return newArr;
        }

        console.log(Change(1, 2345, 6, 8, 89, 5, 9));插入代

var arr = [1, 2345, 6, 8, 89, 5, 9];
        console.log(arr.reverse());

2.求red出现的位置和次数

var arr = ['red', 'blue', 'red', 'green', 'pink', 'red', 'red'];
        var index = arr.indexOf('red');

        var number = 0;
        while (index != -1) {
            console.log(index);
            var index = arr.indexOf('red', index + 1);
            number++;

        }
        console.log(number);

3.替换字符

var str5 = 'abaasdffgggghhhhjkkkgfdddssssss23444343434';
        while (str5.indexOf("s") !== -1) {
        str5 = str5.replace('s', 'u');
        }
        console.log(str5);


var str5 = 'abaasdffgggghhhhjkkkgfdddssssss23444343434';
        do {
            var index = str5.indexOf('s');
            console.log(index);
            str5 = str5.replace('s', 'u');
        } while (index !== -1)

        console.log(str5);

注意

  1. 字符串.replace(被替换的字符串， 要替换为的字符串)；
  2. 因为被替换了，使用自动查找下一个，不需要我们给index加一了
  3. 但是indexof需要每次循环变化

4.找出以上字符串出现次数最多的字符和出现的次数

 var str = "abcoefoxyozzopp";
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) {
                // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);

var max = 0;
        var ch = "";
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log("最多的字符是" + ch);

5.表单全取消全选

<!-- 表单全选取消全选 -->
    <table>
        <thead>
            <td><input type="checkbox" id="j_cbAll"></td>
            <td>商品</td>
            <td>价钱</td>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>iPhone6</td>
                <td>1000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>2</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

 <script>
 //1.点击最上面一个，下面的全选择
        var j_cbAll = document.getElementById('j_cbAll');
        var tds = document.getElementById('j_tb').querySelectorAll('input');
        j_cbAll.onclick = function () {
            for (var i = 0; i < tds.length; i++) {
                tds[i].checked = this.checked;
            }
        }
        //2. 下面复选框需要全部选中，上面第一个才会选中
        for (var i = 0; i < tds.length; i++) {
            tds[i].onclick = function () {
                var flag = true;
                //每次点击都要检查下面的4个按钮是否全被选中
                for (var j = 0; j < tds.length; j++) {
                    if (!tds[j].checked) {
                        flag = false;
                        break; //退出for循环，这样可以提高执行效率，只要有一个没选中，就可以为false了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>

注意：

  1. 注意返回的是一个数组还是一个元素
  2. 注意函数事件，判断以及循环的嵌套层级关系
  3. 是this.checked不是直接checked
  4. 引入新变量flag是用于：利用循环中的某次判断的结果影响全部循环结束的结果。

6.tab栏切换

<!-- tab栏切换布局分析 -->
    <div class="tab">
        <div class="nav">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与保证</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="content">
            <div class="item visit">商品介绍模块内容</div>
            <div class="item ">规格与保证内容</div>
            <div class="item">售后保障内容</div>
            <div class="item ">商品评价内容</div>
            <div class="item ">手机社区内容</div>
        </div>
    </div>

功能1：点击每个Li其颜色会发生变化（排他思想）
功能2：下面的选项和上面一一对应

 <script>
        lis = document.querySelector('.nav').querySelectorAll('li');
        divs = document.querySelector('.content').querySelectorAll('div');
        items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li，设置索引号
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
//1.上面的选项卡模块，点击某一个当前这一个底色是红色，其余不变（排他思想），修改类名的方式
              //干掉所有人 其余的 li清除class这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                }
                //留下我自己
                this.className = 'current'
//2. 内容显示模块：下面的选项卡和上面的选项卡是一一对应，相匹配
                var index = this.getAttribute('index');
                // 隐藏所有其他的内容
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none'
                }
                items[index].style.display = 'block'
            }
        }
    </script>

注意：
1.获取的是类还是标签需要注意
2.如何一一对应上面和下面内容：主要是利用设置给每个li设置新属性，让新属性与索引号相同，这样点击小li时，下面的盒子通过获取小li的新属性就可以得到该li索引号。
3.或者说，排他思想第一步通过循环将所有元素都变为一样，那么第二步如何给自己或者链接的盒子添加特殊的格式呢？
（1）如果是给自己加特殊格式：可以通过this指向函数的调用者，也就是自己。
（2）如果是给一一对应的盒子加特殊格式：通过添加新属性，把自己的索引号封装在新属性里，让链接的盒子调用新属性就可以得到索引号得到特殊的格式。

7.新浪下拉菜单案例

<ul class="nav">
        <li>
            <a href="">微博</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">评论</a></li>
                <li><a href="">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">评论</a></li>
                <li><a href="">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">评论</a></li>
                <li><a href="">@我</a></li>
            </ul>
        </li>
    </ul>

// <!-- 获取元素 -->
        //1.所有的标签
        var nav = document.querySelector('.nav');
        var lis = nav.children;//得到4个小li
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';
                //第二个孩子
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }

注意

  1. 导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
  2. 核心原理：当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐藏
  3. 代码小细节：注意是.style.display
  4. 一般有循环关系的i时，用this指向，否则找不到是哪个i

8.留言案例

<textarea name="" id="" cols="30" rows="10">123</textarea>
    <button>发布</button>
    <ul>
        
    </ul>

添加留言

var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value;
                ul.appendChild(li);
//ul.insertBefore(li,ul.children[0]);
            }
        }

注意

  1. 判断有没有输入内容是‘==’不是‘=’
  2. 先创建元素，再添加元素
  3. 注意是text.value

删除留言

    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
 
    </ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                // (3) 删除元素 删除的是当前链接的li  它的父亲
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>

注意：

  1. .阻止链接跳转需要添加javascript:void(0);或者javascript:;
  2. li.innerHTML = text.value + "删除"注意位置，还要注意单引号还是双引号
  3. node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode;注意this的引入

9.动态生成表格

         <!-- 动态生成表格 -->
    <table cellspacing="0">
        <thead>
            <tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        //1.学生的数据
        var data = [
            {
                name: '熊阳阳',
                subject: 'js',
                score: 80
            },
            {
                name: 'conan',
                subject: '数学',
                scroe: '100'
            },
            {
                name: 'conan',
                subject: '柯学',
                scroe: '100'
            }
        ]
        //2.根据数组长度，创建行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < data.length; i++) {
            // 2.1创建行
            var tr = document.createElement('tr');
            tbody.appendChild(tr)
            // 2.2创建单元格
            for (var k in data[i]) {
                console.log(data[i].k)
                var td = document.createElement('td');
                tr.appendChild(td);
           //  2.3单元格填充内容
                td.innerHTML = data[i][k];
            }
            // 2.4创建删除单元格  
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = '<a>删掉</a>'
        }
 
        //3.点击删掉，删掉
        var tbody = document.querySelector('tbody');
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                //取出被点击a的父节点(a的父节点是td,td的父节点才是tr)
                var del_td = this.parentNode;
                //是tbody删掉tr——注意是tbody啦
                tbody.removeChild(del_td.parentNode)
            }
        }
    </script>

注意
搞清楚父子节点关系

10.模拟京东快递单号查询

完整代码
注意
1.注意表单的新属性placeholder,同时注意他和value的区别
2.注意三角形的css写法：用before

11.京东倒计时效果

完整代码
注意
1.最好把变量引入放到函数外面便于维护
2.最好采用封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面的时候有空白问题

12.发送短信案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    //time=3；
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>

</html>

注意
1.disabled=true或者false不要加引号
2.点击后才会开启定时器，所以定时器函数要在点击函数的内部
3.当时间为0后，要注意恢复设置还要记得清楚定时器
如果想要多次点击，可以再加上time=3；

13.相似案例：5s后跳转页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);
    </script>
</body>

14.用户登录


<body>
    <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>



<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
        // 这样我们就能获取到路径上的URL参数
    </script>
</body>
Sherry 沈
关注
  • 5
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript第五天作业案例
qq_41943654的博客
04-02 2454
JavaScript第五天作业案例 1. 练习1: 使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5] 运行结果 2. 练习2: 使用for循环 - 求出数组里大于5的和 [4, 9, 5, 20, 3, 11] 运行结果 练习3: 使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24] 运行结果 练习4: 打印数组里所有的奇数 [5, 2, 8, 10, 3, 7] 运行结果 练习5: 计算[2, 6, 18, 15, 40]
JavaScript 学习笔记 超详细（b站pink老师）_pink老师最新版js笔记
最新发布
2401_84435152的博客
04-28 647
文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。即DOM是浏览器提供的一套专门用来操作网页内容的功能。**DOM作用：**开发网页内容特效和实现用户交互标签天生自带的属性，比如class、id、title等, 可以直接使用点语法操作。比如： disabled、checked、 selected在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取。
JavaScript高级语法案例（作业）第二天
weixin_45819386的博客
04-12 932
1.原型链分析图： 该分析图是个人通过学习而得出的结论； 该图是通过网上查询得到的结论 原型链：原型形成的一条链，js在查找的过程中，如果自有属性和方法中找不到，就会去原型方法中 找，如果原型对象中还查不到，就回去原型对象中的原型中查找；直到查找到原型链的顶端---Object； 2.创建一个人类然后继承学生类以及教师类，分别通过三种不同的继承方式，总结优点缺点 <script> //人类(构造函数) function People(name,age,gender){
JS事件篇
m0_53157173的博客
08-24 1402
事件篇window.onload:事件Dom查询innerhtml ----获取节点的html内容，或者设置对应节点html内容读取或者设置节点的相关属性获取元素节点的子节点children属性可以获取到当前元素所有子元素，不包括文本节点区分概念: 节点包括文本节点，而元素不包括文本节点firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素抽离出按钮点击函数的小案例parentNode :获取一个元素的父元素innertext :获取到一个标签里面的
js自定义属性的操作以及相关案例
码云仓库地址：https://gitee.com/lance-gyq
01-09 1799
自定义属性的操作 1.获取属性值 element.属性 获取属性值 element.getAttribute(‘属性’); <body> <div id="demo" index="1"></div> <script> var div = document.querySelector('div'); //1.获取元素的属性值 //(1)element.属性 console.log(d
JS tab栏切换
每天一个前端小知识~
08-28 4998
问题： 当我们点击下面相应的选项时，选项背景颜色和内容会跟随变化 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab切换</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; }
品优购实战案例-pink老师版
01-02
【品优购实战案例-pink老师版】 在“品优购实战案例-pink老师版”中，我们聚焦于一个电商网站的开发与运营，这个实战案例由pink老师提供，旨在帮助学习者掌握IT行业中电子商务平台的建设和管理技能。在这个项目中，...
仿京东放大镜案例 pink老师
06-02
【标题】"仿京东放大镜案例 pink老师"所涉及的知识点主要集中在前端开发领域，具体是使用JavaScript、CSS和HTML来实现一个电商网站商品详情页的放大镜效果。这种效果通常用于增强用户对商品图片的观察，提升购物体验...
pink老师html＋css综合案例个人练习
03-13
在“pink老师html+css综合案例个人练习”中，我们可以看到一个关于HTML和CSS技术应用的实际项目。这个练习可能是为了帮助学习者巩固和提升他们在HTML结构化标记语言和CSS样式表语言方面的技能。日期标注为“2023.3....
pink老师 JavaScript基础 简易ATM案例
09-26
题目描述： - 里面现存有 100 块钱。 - 如果存钱，就用输入钱数加上先存的钱数, 之后弹出显示余额提示框 - 如果取钱，就减去取的钱数，之后弹出显示余额提示框 - 如果显示余额，就输出余额 ...
pink老师htmlcss学习 - 学成在线案例
03-26
"pink老师htmlcss学习 - 学成在线案例"这个资源包显然是一份用于教学或自我提升的学习材料，其中包含了一系列实例，帮助用户深入理解并掌握HTML和CSS的应用。 首先，`style.css`是CSS（层叠样式表）文件，它是用来...
Javascript事件教程练习
02-14
使用Java的面向事件的编程 和 本教程是有关Web开发的大量教程的一部分，该存储库仅关注Javascript事件，您将学习Mouse事件，Keyboard事件，Frame事件以及如何对这些事件做出React以使Web应用程序具有交互性。 您可以在10秒钟之内也可以以在本地进行。 我强烈建议按以下顺序进行本教程： ←您现在在这里 :fire: 一键安装： 本地安装 确保您已安装并已安装node.js 10+版本和python 3+版本。 这是安装breathcode-cli的命令 $ npm i breathecode-cli -g 克隆或下载此存储库。 下载完成后，您将找到一个带有子目录“ exercises”的新文件夹，其中包含所有练习。 通过从项目的根目录运行以下命令来启动教程/练习： $ npm i jest@24.8.0 $ breathecode run 练习如何组织？ 每
javascript的案例demo小练习
04-08
js、javascript、jquery的案例demo小练习、前端练习，适合新手、复习者使用
js代码-PINK老师-创建类和对象
07-15
js代码-PINK老师-创建类和对象
js经典案例
11-14
《javascript 经典案例》，中国电力出版社出版，李强译，2012年第一版
js的练习案例2
10-21
图片切换，全选与反选等。适合初学者的前端练习。欢迎下载
jQuery的简单tab栏切换，商品详情评价的切换
weixin_62273193的博客
12-21 446
实现思路 给tab li选项绑定点击事件 给点击的对象加 类名，其他的兄弟移除掉类名 获取当前点击的对象的索引 通过索引找到对应的内容栏让让显示出来，其他的兄弟隐藏
tab标签点击切换不同内容js2种实现方式：利用隐藏条件tabs[i] items[i] 一 一对应顺序相同实现、利用setAttribute/getAttribute实现
*
01-01 635
1）优化实现:利用隐藏条件实现 js代码： tab优化版： 找到所有标签:tabs 找到所有内容:items 点击当前标签tabs[i]时: 3.1 先把所有tabs样式类为置空，再把当前tab样式类名置为current 即:所有tabs[i].style.className=’’,再把当前tabs[i].className=‘current’, 3.2 同时:找到对应itemsi： 置item[i].style.display=‘block’,其它置none // 先 找到所有标签元素 va.
JavaScript插件之Tab选项卡
吴林
11-13 1325
闲来无事，研究了一下JavaScript插件的写法，本文介绍了此款插件的基本用法，实现的功能以及代码。 首先，来看看最终效果： 这是一款普通的Tab选项卡插件，下面来讲讲它实现了哪些功能： 1、支持不同鼠标事件触发选项卡切换效果； 2、支持不同切换效果的配置，例如淡入淡出/直接切换； 3、支持默认展示第几个选项卡的配置； 4、支持选项卡的自动切换效果。 例子很简单，需要用到的知识
用web做一个京东倒计时效果
04-26
好的，您想要实现的是一个类似京东购物网站中商品抢购页面上的倒计时效果，对吗？那么您需要使用 JavaScript 来实现。具体来说，您可以使用 setInterval() 函数来定时更新剩余时间，并将其显示在页面上。 以下是实现倒计时效果的代码示例： HTML 代码： ``` <div id="countdown"></div> ``` JavaScript 代码： ``` // 目标日期，示例中设置为今天的晚上 10 点 var targetDate = new Date(); targetDate.setHours(22, 0, 0, 0); // 定时器，每秒执行一次 var timer = setInterval(function() { // 计算剩余时间 var now = new Date(); var diff = targetDate - now; if (diff <= 0) { // 时间到了，清除定时器 clearInterval(timer); document.getElementById('countdown').innerHTML = '时间到了！'; } else { // 更新倒计时显示 var hours = Math.floor(diff / 3600000); var minutes = Math.floor((diff % 3600000) / 60000); var seconds = Math.floor((diff % 60000) / 1000); document.getElementById('countdown').innerHTML = '距离抢购结束还有 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒'; } }, 1000); ``` 上述代码中，我们首先设置了目标日期为今天的晚上 10 点。然后使用 setInterval() 函数每秒执行一次定时器回调函数。在回调函数中，我们首先计算剩余时间，如果剩余时间小于等于 0，说明时间到了，清除定时器并显示时间到了的提示；否则，更新倒计时的显示。最后，将倒计时显示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值