js篇：案例总结_js案例-CSDN博客

本文链接：https://blog.csdn.net/Ghlys/article/details/128651998

用字符编码输出26个字母

var arr=[]
for(var i=65;i<91;i++){
arr.push(String.fromChartCode(i))
}
console.log(arr)

统计数组字符出现次数

```
 var obj={}//建一个新的对象输出字符次数
 for(var i=0;i<str.length;i++){
         var key =str[i] //定义一个变量接受字符
         if(obj[key]){
                     obj[key]++ //如果对象内有key                                 字符成员，则key成员                                的值加一
                      }
         else{
             obj[key]=1
             }
   }
```

模糊查询:利用数组的filter,字符串的indexOf

```
var input=prompt("请输入查询内容")//定义一个变量接受                                   查询内容
var res=arr.filter(function(item){
    return item.indexOf(input)>-1//如果结果大于-1                                    就证明字符串中存                                    在查询内容，则数                                    true，就会将原                                    字符串中的内容返                                    回到数组
})
```

随机取整

min~max:不包含max

function getRnd(min,max){
     if(min>max){
                 console.error("参数有误")
                 return
                }
     return  Math.floor(Math.random()*                          (max-min)
                        )+min
}

min~max：包含max

function getRnd(min,max){
     if(min>max){
                 console.error("参数有误")
                 return
                }
     return  Math.floor(Math.random()*                          (max-min+1)
                        )+min
}

添加按钮停止定时器

	<button id="btn1">停止延时定时</button>
    <button id="btn2">停止间隔定时</button>
	var time1=setTimeout(function(){
		console.log("我是延时定时器")
	},5000)
	var time2=setInterval(function(){
		console.log(new Date())
	},3000)
<script>
	//设置两个定时器
	console.log(btn1,btn2)
	//给两个按钮连接到js的控制台
    btn1.onclick=function(){
	     clearTimeout(time1)
    }
    btn2.onclick=function(){
	     clearInterval(time2)
    }
    //给两个按钮添加行为：理解为给按钮添加onclick属性，属性值为一个函数
</script>

倒计时

	<div id="box"></div>
	<script>
	var targetDate=new Date("2023/2/13")
	//设置目标时间
	function diffTime(current,target){
		 var sub=Math.ceil((target-current)/1000)
		 //两个时间对象相减会自动转化为时间戳相减，并返回时间戳
		 var obj={
		 day:parseInt(sub/(60*60*24)),
		 hours:parseInt(sub%(60*60*24)/(60*60)),
		 minutes:parseInt(sub%(60*60)/60),
		 seconds:parseInt(sub%60)
		 }
		 //用一个对象把倒计时装起来
		 return obj
	}
	//设置一个计算倒计时的函数
	setInterval(function(){
	    var currentDate=new Date()
	    //设置当前时间，用间隔计时器更新当前时间，如果放在代码开头那么运行那一刻就固定住了。
		var res=diffTime(currentDate,targetDate)
	    //引用计算倒计时的函数
	box.innerHTML=`距离开学还有-${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`
	//innerHTML属性可以让新的内容覆盖之前的内容
	},1000)
	//设置一个更新倒计时的函数
	</script>

记住用户名

	<div>
		用户名：
		<input type="text" id="username">
		密码：
		<input type="password" id="password">
   </div>
   <div>
		<button id="login">登录</button>
   </div>
   <script>
   		login.onclick=function(){    localStorage.setItem("username",username.value)
localStorage.setItem("password",password.value)
		}
       //存用户名，密码
		var uservalue=localStorage.getItem("username")
		var passvalue=localStorage.getItem("password")
		//从本地读取用户名，密码
		username.value=uservalue
		password.value=passvalue
		//将用户名，密码赋值
   </script>

密码可视

<input type="password" id="password">
<button id="eyebtn">eye</button>
<script>
     var passInput=document.getElementById("password")
     var eyeBtn=document.querySelector("#eyebtn")
     eyeBtn.onclick=function(){
     if(passInput.type==="password"){
     passInput.type="text"
     }
     else{
     passInput.type="password"
     }
     }
</script>

购物车全选

分析：点一次全选，全部商品被选中

再点一次全选，全部商品取消选中

单点商品会被选中

当吧所有商品都选中的时候，全选框被点亮

	<input type="checkbox" id="all">全选/取消全选
	<hr>
	<ul class="shop">
	<li>
		商品1
		<input type="checkbox">
	</li>
	<li>
		商品2
		<input type="checkbox">
	</li>
	<li>
		商品3
		<input type="checkbox">
	</li>
	<li>
		商品4
		<input type="checkbox">
	</li>
	<li>
		商品5
		<input type="checkbox">
	</li>
	</ul>
	<script>
	var oAll=document.querySelector("#all")
	//得到全选框的值判断是否被选上
	var oitems=document.querySelectorAll(".shop input")
	//得到商品复选框的值判断是否被选上
	all.onclick=function(){
		  for(var i=0;i<oitems.length;i++){
			  oitems[i].checked=all.checked
		  }
	}
	//将全选框的值一个一个地赋值给商品复选框
	 for(var i=0;i<oitems.length;i++){
		  oitems[i].onclick=handler
	 }
	 //商品每被点击一次就数一次别选中的商品数
	 function handler(){
		  var count=0
		  for(var i=0;i<oitems.length;i++){
			 if(oitems[i].checked) count++
		  }
		  //计算有多少数量商品被选中
		  if(count===oitems.length){
			 oAll.checked=true
		  }else{
			   oAll.checked=false
		  }
		  //决定全选框的状态
	 }
	
	</script>

渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        li{
            overflow: hidden;
        }
        li img{
            float: left;
            width: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="" alt="">
            <h3></h3>
            <p></p>
        </li>
    </ul>
    <script>
    //引入ul节点
        var ul=document.querySelector("ul")
    //后端的数组信息
        var filmList=[
            {
                url:"https://image11.m1905.cn/uploadfile/2019/0121/thumb_1_300_406_20190121042317131236.jpg",
                title:"胖子行动队",
                grade:"兄弟同心其重断金"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2018/1130/thumb_1_300_406_20181130125801119153.jpg",
                title:"影",
                grade:"张艺谋之匠心回归"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2022/1101/thumb_1_300_406_20221101040710322533.jpg",
                title:"大鱼海棠",
                grade:"国产动漫惊世之作"
            }
        ]
    //将后端的数组信息映射到新数组，形成格式
        var filmItems=filmList.map(function(item){
             return `<li>
                      <img src="${item.url}"                         alt="">
                      <h3>${item.title}</h3>
                      <p>${item.grade}</p>
                     </li>`
        })
    //将数组转化为字符串返回给页面
        ul.innerHTML=filmItems.join("")
    </script>
</body>
</html>

简易选项卡

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            display: flex;
            list-style: none;
        }
        li{
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex: 1;
        }
        .active{
            color: orange;
            border-bottom: 1px solid orange;
        }
</style>
<body>
    <ul>
        <li class="active" id="item1">正在热映</li>
        <li id="item2">即将上映</li>
    </ul>
    <script>
        item1.onclick=function(){
            item1.classList.add("active")
            item2.classList.remove("active")
        }
        item2.onclick=function(){
            item2.classList.add("active")
            item1.classList.remove("active")
        }
    </script>
</body>

选项卡

需要注意的点：for循环在页面打开一瞬就已经执行完毕了，所以用i作为li的下标肯定是循环到最后的那个数字，此时我们可以用i给每个li加自定义属性辨别li，然后使用关键字this辨别点击的li是哪个。其中this可以特指点击的选项

<style>
        *{margin: 0;
        padding: 0;
        }
        ul{
            list-style: none;
        }
        .header{
            display: flex;
            width: 500px;
        }
        .header li{
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align:center;
            border: 1px solid black;
        }
        .box{
            position: relative;
        }
        .box li{
            position: absolute;
            left: 0;
            top: 0;
            width: 500px;
            height: 200px;
            background-color: yellow;
            display: none;
        }
        //给第一个样式先来个激活状态
        .header .active{
            background-color: orange;
        }
        .box .active{
             display: block;
        }
</style>
    <ul class="header">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul class="box">
        <li class="active">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
<script>
var headerItems=document.querySelectorAll(".header li")
var boxItems=document.querySelectorAll(".box li")
//用for循环给每li添加自定义属性标识，并且设置标题的点击事件
for(var i=0;i<headerItems.length;i++){
   headerItems[i].dataset.index=i;
   headerItems[i].onclick=handler
 }
//点击事件函数
function handler(){
//辨识点击哪个标题
var index=this.dataset.index
//移除激活类名
for(var m=0;m<headerItems.length;m++){             headerItems[m].classList.remove("active")       boxItems[m].classList.remove("active")
}          
//添加激活状态
headerItems[index].classList.add("active")     boxItems[index].classList.add("active")
}
</script>

动态删除

遇到的问题：

使用appendChild函数出现Uncaught TypeError: appendChild is not a function：

这是因为当使用querySelectorAll获取元素时，其返回的是数组，而没有定位到某一具体对象
（类似的还有getElementsByTagName() 方法，getElementsByTagName() 方法返回 HTMLCollection 对象，HTMLCollection 对象类似包含 HTML 元素的一个数组，看起来可能是一个数组，但其实不是，不过可以像数组一样，使用索引来获取元素）

所以使用此类方法获取元素时，需定位到某一具体元素，让浏览器知道在哪个元素下添加子节点即可

<body>
    <ul class="list"></ul>
    <script>
    //获取list
        var list=document.querySelector(".list")
    //设置li内容的数组
        var arr=["111","222","333"]
        for(var i=0;i<arr.length;i++){
        //创造li节点
            var li=document.createElement("li")
        //为li赋予内容
            li.innerHTML=arr[i]
        //创造删除按钮
            var button=document.createElement("button")
            button.innerHTML="delete"
         //创造按钮的点击事件
            button.onclick=handler
         //将按钮赋予li
            li.appendChild(button)
         //将li赋予list
            list.appendChild(li)
        }
        //按钮的点击事件函数
        function handler(){
            this.parentNode.remove()
        }
    </script>
</body>

懒加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        li{
            overflow: hidden;
        }
        li img{
            float: left;
            width: 100px;
        }
    </style>
</head>
<body>
    <ul>
    </ul>
    <script>
        var ul=document.querySelector("ul")
    //后端的数组信息
        var arr1=[
            {
                url:"https://image11.m1905.cn/uploadfile/2019/0121/thumb_1_300_406_20190121042317131236.jpg",
                title:"胖子行动队",
                grade:"兄弟同心其重断金"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2018/1130/thumb_1_300_406_20181130125801119153.jpg",
                title:"影",
                grade:"张艺谋之匠心回归"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2022/1101/thumb_1_300_406_20221101040710322533.jpg",
                title:"大鱼海棠",
                grade:"国产动漫惊世之作"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2019/0121/thumb_1_300_406_20190121042317131236.jpg",
                title:"胖子行动队",
                grade:"兄弟同心其重断金"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2018/1130/thumb_1_300_406_20181130125801119153.jpg",
                title:"影",
                grade:"张艺谋之匠心回归"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2022/1101/thumb_1_300_406_20221101040710322533.jpg",
                title:"大鱼海棠",
                grade:"国产动漫惊世之作"
            }
        ]
        var arr2=[
            {
                url:"https://image11.m1905.cn/uploadfile/2022/1102/thumb_1_300_406_20221102085849762157.jpg",
                title:"乘风破浪",
                grade:"邓超喊赵丽颖妈咪"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2016/1229/thumb_1_300_406_20161229110503435593.jpg",
                title:"反贪风暴2",
                grade:"周渝民为爱而牺牲"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2022/1110/thumb_1_300_406_20221110104836235910.jpg",
                title:"边缘行者",
                grade:"生死兄弟情义江湖"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2022/1102/thumb_1_300_406_20221102085849762157.jpg",
                title:"乘风破浪",
                grade:"邓超喊赵丽颖妈咪"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2016/1229/thumb_1_300_406_20161229110503435593.jpg",
                title:"反贪风暴2",
                grade:"周渝民为爱而牺牲"
            },
            {
                url:"https://image11.m1905.cn/uploadfile/2022/1110/thumb_1_300_406_20221110104836235910.jpg",
                title:"边缘行者",
                grade:"生死兄弟情义江湖"
            }
        ]
        //将数据放射到html中
        function renderHTML(arr){
            for(var i=0;i<arr.length;i++){
                var li=document.createElement("li")
                li.innerHTML=
                    `<img src="${arr[i].url}" alt="">
                    <h3>${arr[i].title}</h3>
                    <p>${arr[i].grade}</p>`
                ul.appendChild(li)               
            }
        }
        renderHTML(arr1)
        //防止画面渲染在滚动条一滚动就触发
        var isloading=false
        //滚动滚动条就触发事件
        window.onscroll=function(){
            //计算（ul高+距离文档左上角的高）-（窗口高+滚动距离)判断滚动条是否到底部
            var listHeight=ul.offsetHeight
            var listTop=ul.offsetTop
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            var windowHeight=document.documentElement.clientHeight
            if(isloading) return
            if((listHeight+listTop)-(scrollTop+windowHeight)<100){
                //防止滚动条一动就触发渲染画面的事件
                isloading=true
                setTimeout(function(){
                renderHTML(arr2)
                //画面渲染后再滚动滚动条才能再次触发渲染画面
                isloading=false
                },1000)
            }
        }
    </script>
</body>
</html>

鼠标跟随效果

<style>
     *{
         margin: 0;
         padding: 0;
     }
     #box{
         width:200px ;
         height: 200px;
         background-color:blanchedalmond;
         position: relative;
     }
     #box p{
         width: 100px;
         height: 100px;
         background-color: #fede4f;
         opacity: 0.3;
         position: absolute;
         left: 50px;
         top: 50px;
         z-index: 100;
         pointer-events: none;
         display: none;
     }
</style>
<div id="box">
     京东图片
     <p>
         黄色框
     </p>
 </div>
<script>
     box.onmouseover=function(){           this.firstElementChild.style.display="block"}
     box.onmouseout=function(){      this.firstElementChild.style.display="none"}
     box.onmousemove=function(evt){   
//鼠标跟随       this.firstElementChild.style.left=evt.offsetX+"px"        this.firstElementChild.style.top=evt.offsetY+"px"}
</script>

鼠标拖拽

```
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: #fede4f;
            opacity: 0.3;
            position: absolute;
            left: 50px;
            top: 50px;
            z-index: 100;
        }
</style>
        <p id="box">黄色框</p>
<script>
        box.onmousedown=function(){
            //鼠标按下后才计算鼠标在文档内的移动距离
        document.onmousemove=function(evt){
            //让鼠标处于移动元素的中央
            var x=evt.clientX-box.offsetWidth/2
            var y=evt.clientY-            box.offsetHeight/2
            //确保移动元素在窗口内移动
            if(y<=0) y=0
            if(x<=0) x=0
if(x>=document.documentElement.clientWidth-box.offsetWidth) x=document.documentElement.clientWidth-box.offsetWidth
if(y>=document.documentElement.clientHeight-box.offsetHeight) y=document.documentElement.clientHeight-box.offsetHeight
            //让盒子移动
            box.style.left=x+"px"
            box.style.top=y+"px"
        }
        }
        box.onmouseup=function(){
            //鼠标抬起，解绑盒子的移动事件
            document.onmousemove=null
        }
</script>
```

自定义右键菜单

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 200px;
            padding: 10px;
            border: 1px solid black;
            display: none;
            position: absolute;
            left:0;
            top: 0;
        }
        ul li:hover{
            background-color: skyblue;
        }
</style>
    <ul id="list">
        <li class="a">111</li>
        <li class="b">222</li>
        <li class="c">333</li>
    </ul>
<script>       document.addEventListener("contextmenu",function(evt){
            //删除右键的默认事件
            evt.preventDefault()
            //右击选项出现
            list.style.display="block"
            //选项跟随鼠标出现
            var x=evt.clientX
            var y=evt.clientY
            if(x>=document.documentElement.clientWidth-list.offsetWidth) x=document.documentElement.clientWidth-list.offsetWidth
            if(y>=document.documentElement.clientHeight-list.offsetHeight) y=document.documentElement.clientHeight-list.offsetHeight
            list.style.left=x+"px"
            list.style.top=y+"px"
        })
        //随便点击左键选项消失
        document.addEventListener("click",function(){
            list.style.display="none"
        })
        //taget事件委托，精确点击那个选项出现什么事件
     list.addEventListener("click",function(evt){
        console.log(evt.target||evt.srcElement)
        })
</script>