JS具体实例（一）

最新推荐文章于 2024-09-25 17:14:45 发布

番茄火锅rrds

最新推荐文章于 2024-09-25 17:14:45 发布

阅读量3k

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/nabirt/article/details/120932552

版权

本文详细介绍了JavaScript在前端开发中的多种实用技巧，包括字符统计、字符串处理、事件响应、选择器应用、动态生成内容等，涵盖了从基础操作到复杂交互的各种场景。通过这些实例，读者可以提升JavaScript编程能力。

摘要由CSDN通过智能技术生成

一、统计某个字符出现的次数并输出

var str = 'baobfabobodabfodao';
var index = str.indexOf('o');
var num = 0;
while (index != -1) {
   
    console.log(index);
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是：' + num);

结果如下：
在这里插入图片描述

二、统计字符串中出现的次数

let str = 'baobfabobodabfodao';
let num = str.split("").reduce((pre, cur) => {
   
    if (cur in pre) {
   
        pre[cur]++;
    } else {
   
        pre[cur] = 1;
    }
    return pre
}, {
   })
console.log('次数', num);

① 这里的split('' '')指的是，把一串字符串改为数组形式，然后用括号内的方式隔开
② reduce()方法具体：

let 结果数值变量 = 原数组.reduce((用于临时接收结果的新变量，用于索引的变量) => {
   
	......
	循环方法体
	......
},结果数值变量的初始值也可以不写)

三、点击关闭某部分

var foot = document.querySelector('.footer');
var img = foot.querySelector('img');
var meau = foot.querySelector('.meau');

img.onclick = () => {
   
    meau.style.display = 'none';
}

四、多精灵图一次性设置

1、精灵图的排列一定是有规律的

eg.（这里的精灵图例子位置是间隔44）

// 精灵图一次性设置（循环）
var lis = document.querySelector('li');
for (var i = 0; i < lis.clientHeight; i++) {
   
    // 让 索引号 乘以 规律间隔 ，就是每一个li的背景y坐标 index就是我们的y坐标
    var index = i * 44;
    lis[i].style.backgroundPosition = '0 -' + index + 'px';
}

五、全选

在这里插入图片描述

var cbAll = document.getElementById('cbAll');
var tbs = document.getElementById('tb').getElementsByTagName('input');

cbAll.onclick = () => {
   
    console.log(cbAll.checked);
    for (var i = 0; i < tbs.length; i++) {
   
        tbs[i].checked = cbAll.checked;
    }
}
for (var i = 0; i < tbs.length; i++) {
   
    tbs[i].onclick = () => {
   
        var flag = true;
        for (var i = 0; i < tbs.length; i++) {
   
            if (!tbs[i].checked) {
   
                flag = false;
            }
        }
        cbAll.checked = flag;
    }
}

六、tab栏切换案例

框架：
在这里插入图片描述
实际样式图：

window.onload = () => {
   
	var tab_list = document.querySelector('.tab_list');
	var lis = tab_list.querySelectorAll('li');
	var items = document.querySelectorAll('.item');
	
	for (let i = 0; i < lis.length; i++) {
   
	    lis[i].setAttribute('index', i);
	    lis[i].onclick = () => {
   
	        for (let i = 0; i < lis.length; i++) {
   
	            lis[i].className = '';
	        }
	        lis[i].className = 'current';
	        var index = lis[i].getAttribute('index');
	        for (let i = 0; i < lis.length; i++) {
   
	            items[i].style.display = 'none';
	        }
	        items[index].style.display = 'block';
	    }
	}
}

七、使js代码在确保页面加载完成后再进行

window.onload = () => {
   
	这里写 js 操作代码
}

八、下拉菜单显示与隐藏

<style>
    * {
     
        margin: 0;
        padding: 0;
    }

    li {
     
        list-style: none;
    }

    a {
     
        text-decoration: none;
        color: black;
    }

    .nav>li {
     
        float: left;
        position: relative;
        margin-left: 1px;
        margin-right: 1px;
    }

    .nav li {
     
        width: 100px;
        height: 50px;

        text-align: center;
        line-height: 50px;
    }

    .nav>li>a div {
     
        width: 100px;
        height: 50px;
        border-bottom: 1px solid black;
    }

    .nav>li>a div:hover {
     
        background-color: #ccc;
        color: orange;
    }

    .nav ul {
     
        display: none;
        position: absolute;
        top: 50px;
        left: -1px;
        width: 100%;
        border-left: 1px solid yellow;
        border-right: 1px solid yellow;
    }

    .nav ul li {
     
        border-bottom: 1px solid yellow;
    }

    .nav ul li a:hover {
     
        background-color: #FFF5DA;
    }
</style>

<body>
    <ul class="nav">
        <li>
            <a href="#">
                <div>微博</div>
            </a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论</a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        
        上面的<li>*3
        
    </ul>

    <script>
        window.