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">
总价 : ¥
<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>