繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

js简单项目实战_js实战

作者：繁依Fanyi0 | 2024-08-19 08:08:16

踩

js实战

js简单案例

1.localStorage本地存储


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>注册</title>
    </head>
    <body>
        <div>
            <input type="text" class="username" placeholder="请输入用户名">
            <input type="password" class="pwd" placeholder="请输入密码">
            <button>注册</button>
        </div>
        </div>
        <script>
            //获取用户名框
            let username =document.querySelector('.username');
            //获取密码框
            let pwd =document.querySelector('.pwd');
            //获取按钮
            let button=document.querySelector('button');
            //给按钮添加鼠标点击事件
            button.addEventListener('click',function(){
                //定义goods对象
                const goods = {
                    usernameVal:username.value.trim(),
                    //获取用户名框里的内容
                    //trim()去除前面与后面的空格
                    pwdVal:pwd.value.trim()
                    /获取密码框里的内容
                }
                // localStorage.setItem('goods', goods)
                // console.log(localStorage.getItem('goods'))
                // 1. 把对象转换为JSON字符串 JSON.stringify
                //使用localStorage本地存储goosJSON字符串
                localStorage.setItem('goods', JSON.stringify(goods))
                window.location.href = "./login.html";//跳转到登录页面
            })
        </script>
    </body>
</html>


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>登录</title>
    </head>
    <body>
        <div>
            <input type="text" class="username" placeholder="请输入用户名">
            <input type="password" class="pwd" placeholder="请输入密码">
            <button>登录</button>
        </div>
        </div>
        <script>
           let username =document.querySelector('.username');
            let pwd =document.querySelector('.pwd');
            let button=document.querySelector('button');
            button.addEventListener('click',function(){
                let usernameVal=username.value.trim();
                let pwdVal=pwd.value.trim();
                //将传过来的goods字符串转换为goods对象
                let goods=JSON.parse(localStorage.getItem('goods'));
                console.log(goods);
                //获取对象里的usernameVal,pwdVal
                let getUsernameVal=goods.usernameVal;
                let getPwdVal=goods.pwdVal;
                if(usernameVal!==getUsernameVal){
                    alert('用户名错误');
                }else if(pwdVal!==getPwdVal){
                    alert('密码错误');
                }else{
                    alert('登录成功')
                }
            })
        </script>
    </body>
</html>

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

localStorage 属性是只读的。

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

2.动态时钟


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>动态时钟</title>
    </head>
    <body>
        <div class="time"></div>
        <script>
            //未满10加零函数
            function addZero(item){
               item=item >= 10 ? item : "0" + item;
               return item
            }
            const time=document.querySelector('.time');
           // 2. 格式化日期对象-转换成开发中常见的日期和时间格式
           function getNewData(){
                const myDate = new Date();
                let month = myDate.getMonth() + 1; // 得到月份 数字型的 0 需要加1
                let day = myDate.getDate(); // 得到几号 数字型的 27
                let week=myDate.getDay(); // 得到星期 数字型 5
                let weekCN=['日','一','二','三','四','五','六'] ;
                let hour=myDate.getHours(); // 得到小时
                let minute=myDate.getMinutes(); // 得到分钟
                let second=myDate.getSeconds();// 得到秒数
                month = addZero(month);
                day = addZero(day);
                hour = addZero(hour);
                minute = addZero(minute);
                second = addZero(second);
                time.innerHTML=`现在的日期是:${myDate.getFullYear()}年${month}月${day}日
                ${hour}:${minute}:${second} 星期${weekCN[week]}`;
           }
           setInterval(function(){getNewData();},1000);//每秒自动执行一次getNewData函数
        </script>
    </body>
</html>

Date 对象用于处理日期和时间。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

提示： 1000 毫秒= 1 秒.

3.小米密码框素材


    //找到元素
    const mi_input=document.querySelector('.mi-input');
    const label=document.querySelector('.mi-control label');
    const mi_password=document.querySelector('.mi-password')
    let isClose=true;
    mi_input.addEventListener('focus',function(){
      label.classList.add('active');//添加类名
    })
    mi_password.addEventListener('click',function(){
      if(mi_input.type==='password'){
        mi_password.classList.add('active');
        mi_input.type='text';
        isClose=false;
      }else{
        mi_password.classList.remove('active');
        mi_input.type='password';
        isClose=false;
      }
    })
    mi_input.addEventListener('blur',function(){
      label.classList.remove('active');
    })

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

将输入框的type设为password将密码隐藏

将输入框的type设为text将密码显示

3.购物车案例


			    //用fruit对象水果数据
				const fruit = [
				{
					icon: 'img/火龙果.png',
					num: 2,
					price: 6,
				},
				{
					icon: 'img/荔枝.png',
					num: 7,
					price: 20,
				},
				{
					icon: 'img/榴莲.png',
					num: 3,
					price: 40,
				},
				{
					icon: 'img/鸭梨.png',
					num: 10,
					price: 3,
				},
				{
					icon: 'img/樱桃.png',
					num: 20,
					price: 34,
				},
			];
			let str='';
            // 1. 获取元素
			let	tbody=document.querySelector('.main .tbody');
			let	price=document.querySelector('.main .bottom .right-box .price-box .price');
            let	pay=document.querySelector('.main .bottom .right-box .pay');
			let sum=0;//总价
			let allNum=0;//总数
            //循环写入动态html页面
			for(let i=0;i<fruit.length;i++){
				str+=`<div class="tr">
					<div class="td"><input type="checkbox" class="check"/></div>
					<div class="td"><img src="${fruit[i].icon}" alt="" /></div>
					<div class="td">${fruit[i].price}</div>
					<div class="td">
						<div class="my-input-number">
							<button class="decrease">-</button>
							<span class="my-input__inner">${fruit[i].num}</span>
							<button class="increase">+</button>
						</div>
					</div>
					<div class="td">${fruit[i].price*fruit[i].num}</div>
					<div class="td"><button>删除</button></div>
				</div>`;
			}
			tbody.innerHTML=str;
			let check= document.querySelectorAll('.tbody .tr .td .check');
			let flag=new Array();
			for(let i=0;i<check.length;i++){
				flag[i]=false;
			}
            //按下按钮时遍历全部checkbox得到总价与总数
			check.forEach(function(checkbox,i){
				checkbox.onclick=function () {
					if(flag[i]===false){//奇数次数按下会加
						sum+=fruit[i].price*fruit[i].num;
						allNum+=fruit[i].num;
						flag[i]=true;
					}else{{//偶数次数按下会加
						sum-=fruit[i].price*fruit[i].num;
						allNum-=fruit[i].num;
						flag[i]=false;
					}
					price.innerHTML=+sum;
					pay.innerHTML=`结算(${allNum})`;
				};
			});
			// 1. 获取元素
			const input = document.querySelectorAll('.tbody .tr .td input');
			console.log(input);
			input.forEach(function(el){
                //通过input元素找button元素
				const button = el.parentElement.parentElement.children[5].children[0];
				console.log(button);
				button.addEventListener('click',function(){
                     //通过input元素找checkbox元素
					if(this.parentElement.parentElement.children[0].children[0].checked){
						this.parentElement.parentElement.remove();
					}
				})
			})

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

let	tbody=document.querySelector('.main .tbody');

对应


                    <div class="tbody">
						<!-- 需要渲染的列表 核心代码区域 -->
					</div>


let	price=document.querySelector('.main .bottom .right-box .price-box .price');
            let	pay=document.querySelector('.main .bottom .right-box .pay');
			let sum=0;//总价

对应


                    <div class="right-box">
						<!-- 所有商品总价 -->
						<span class="price-box">
							总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;
							<span class="price"></span>
						</span>
						<!-- 结算按钮 -->
						<button class="pay"></button>
					</div>

parentElement

parentNode 属性可返回某节点的父节点。

如果指定的节点没有父节点则返回 null 。

children 属性返回元素的子元素的集合，是一个 HTMLCollection 对象。

提示: 根据子元素在元素中出现的先后顺序进行排序。使用 HTMLCollection对象的 length属性获取子元素的数量，然后使用序列号(index，起始值为0)访问每个子元素。

children 属性与 childNodes 属性的差别：

childNodes 属性返回所有的节点，包括文本节点、注释节点；
children 属性只返回元素节点；

4.返回数组中出现次数最多的两个数字及其出现次数


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>返回数组中出现次数最多的数字及其出现次数</title>
        <div id="Divisibility6"></duv>
    </head>
    <body>
    <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
        <script>
            function GetMostTimeNum(arr){
                let time;//次数
                let timeArr=[];//次数数组
                maxtime=0;//最大次数
                max=arr[0];//最多相同次数的数
                indexArr=[];//下标数组
                //得到每个数与后面的数的相同次数
                for(let i=0;i<arr.length;i++){
                    time=0;
                    for(let j=i+1;j<arr.length;j++){
                        if(arr[j]===arr[i]){
                            time++;
                        }
                    }
                    timeArr.push(time);
                    indexArr.push(i);
                }
                //得到最多相同次数的数与下标
                for(let i=0;i<timeArr.length;i++){
                    if(timeArr[i]>maxtime){
                        maxtime=timeArr[i];
                        maxIndex=indexArr[i]
                        max=arr[maxIndex]
                    }
                }
            }
            function GetMostNum(arr){
                GetMostTimeNum(arr)
                let maxtime1=maxtime;
                let max1=max
                arr.splice(maxIndex,maxtime);//将最大次数的数删除
                GetMostTimeNum(arr);
                let maxtime2=maxtime;
                let max2=max;
                if(maxtime1===maxtime2){
                    console.log(`此数组中出现次数最多两个数字的数字为${max1},${max2},出现次数为${maxtime+1}次`);
                }else{
                    console.log(`此数组中出现次数最多两个数字的数字为：\n${max1},出现次数为${maxtime1+1}次\n${max2},出现次数为${maxtime2+1}次`);
                }
            }
            let arr1=[1,2,2,3,3,3,3,4,4,4,4]
            let arr2=[1,2,2,3,3,3,4,4,4,4]
            let maxtime;
            let max;
            let indexArr;
            let maxIndex;
            GetMostNum(arr1);
            GetMostNum(arr2);
        </script>
    </body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/1001425