1.计算银行卡余额
遇到的问题，使用 border-collapse: collapse; 解决table边框塌陷问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消费支出打印</title>
<style>
h2{
text-align: center;
}
table{
margin: 50px auto;
width: 700px;
height: 50px;
}
table,
td,
th{
text-align: center;
border-collapse: collapse;
border: 2px solid #000;
}
</style>
</head>
<body>
<h2>2020年12月消费支出</h2>
<script>
let yue,shuifei,dianfei,wangfei,shengyu
yue=prompt('请输入你银行卡余额')
shuifei=prompt('请输入水费')
dianfei=prompt('请输入电费')
wangfei=prompt('请输入王菲')
/* yue=Number(yue)
shuifei=Number(shuifei)
dianfei=Number(dianfei)
wangfei=Number(wangfei) */
shengyu=yue-shuifei-dianfei-wangfei
document.write(`<table>
<tr>
<th>银行卡余额</th>
<th>水费</th>
<th>电费</th>
<th>网费</th>
<th>银行卡余额</th>
</tr>
<tr>
<td>${yue}</td>
<td>${shuifei}</td>
<td>${dianfei}</td>
<td>${wangfei}</td>
<td>${shengyu}</td>
</tr>
</table>`)
</script>
</body>
</html>
2.银行atm机存取钱
遇到的问题：加法记得转变数据类型。
<script>
//a 本金 b存取款额
let a,b,c
a=5000
while(true){
let d=prompt(`请选择您的操作：
1.取款
2.存款
3.查看余额
4.退出`)
if(d==4){
break
}
switch(d){
case '1':
b=prompt('请输入您取款的金额')
a -=b
break
case '2':
b=prompt('请输入您存款的金额')
b=Number(b)
a +=b
break
case '3':
alert(`您的余额为${a}`)
break
}
}
</script>
3.课后作业-语句
<script>
//1.
/* let i=0
while(i<=20){
console.log(i)
i++
} */
//2.
/* let i=1
let sum=0
while (i<=1000){
sum += i
i++
}
console.log(sum) */
//3
/* let i=1
let sum=0
let a=prompt('请输入一个数字')
a=Number(a)
while(i<=a){
sum +=i
i++
}
document.write(sum) */
//4
/*
while(true){
let a=prompt('请输入账号')
let b=prompt('请输入密码')
if(a==='admin'&&b==='123456'){
alert('登陆成功')
break
}else{
alert('请输入正确的账号和密码')
continue
}
} */
//5
/* let a=prompt('请输入你的分数领取对应的奖品')
// a=Number(a)
if(a<60){
alert('得打你一顿了')
}else if(a<80){
alert('大兄弟，送你奥托一辆')
}else if(a<90){
alert('奥迪属于你')
}else{
alert('永远的神，给你法拉利')
} */
//7
/* let i=1
let num=0
while(i<=100){
if(i%10 !==3){
num += i
}
i++
}
console.log(num)
*/
</script>
4.js写表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>001实验品</title>
<style>
body{
text-align: center;
}
caption{
margin-bottom: 10px;
}
table{
width: 500px;
margin: 0 auto;
}
table,
th,
td{
border: 1px solid gray;
border-collapse: collapse;
}
tr{
height: 40px;
cursor: pointer;
}
tr:first-child{
background-color: rgb(180, 180, 180);
}
tr:not(:first-child):hover{
background-color: rgb(150,150,150);
}
</style>
</head>
<body>
<h3>学生信息</h3>
<p>将数组中存储的学生信息，以表格的形式输出到网页中</p>
<script>
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
document.write(`
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
`)
for(let i=0;i<students.length;i++){
document.write(`
<tr>
<td>${i+1}</td>
<td>${students[i].name}</td>
<td>${students[i].age}</td>
<td>${students[i].gender}</td>
<td>${students[i].hometown}</td>
</tr>
`)
}
document.write(`
</table>
`)
</script>
</body>
</html>
5.随机点名----------猜数字小游戏
//随机点名
/* function getName(min,max){
return Math.floor(Math.random()*(max-min+1))+min
}
let arr=['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
let name=getName(0,arr.length-1)
document.write(arr[name])
arr.splice(name,1)
console.log(arr)
*/
//猜数字小游戏
/* function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min
}
let random=getRandom(1,100)
while(true){
let num=prompt('请输入一个数')
if(num<random){
alert('数字有点小哦')
}else if(num>random){
alert('数字有点大呀')
}else{
alert('恭喜你，猜对了')
break
}
}
console.log(random) */
6.QQ音乐轮播图，自动换字加图
6.1效果
6.2代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ音乐10屏轮播图</title>
<style>
.img-box {
width: 700px;
height: 320px;
margin: 50px auto 0;
background: #000;
position: relative;
}
.img-box .tip {
width: 700px;
height: 53px;
line-height: 53px;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}
.img-box .tip h3 {
width: 82%;
margin: 0;
margin-right: 20px;
padding-left: 20px;
color: #98E404;
font-size: 28px;
float: left;
font-weight: 500;
font-family: "Microsoft Yahei", Tahoma, Geneva;
}
</style>
</head>
<body>
<div class="img-box">
<img class="pic" src="images/b01.jpg" alt="第1张图的描述信息">
<div class="tip">
<h3 class="text">挑战云歌单，欢迎你来</h3>
</div>
</div>
<script>
let data = [
{
imgSrc: 'images/b01.jpg',
title: '挑战云歌单，欢迎你来'
},
{
imgSrc: 'images/b02.jpg',
title: '田园日记，上演上京记'
},
{
imgSrc: 'images/b03.jpg',
title: '甜蜜攻势再次回归'
},
{
imgSrc: 'images/b04.jpg',
title: '我为歌狂，生为歌王'
},
{
imgSrc: 'images/b05.jpg',
title: '年度校园主题活动'
},
{
imgSrc: 'images/b06.jpg',
title: 'pink老师新歌发布，5月10号正式推出'
},
{
imgSrc: 'images/b07.jpg',
title: '动力火车来到西安'
},
{
imgSrc: 'images/b08.jpg',
title: '钢铁侠3，英雄镇东风'
},
{
imgSrc: 'images/b09.jpg',
title: '我用整颗心来等你'
},
]
//先提取pic tip数据
let pic=document.querySelector('.pic')
let text=document.querySelector('.text')
let i=0
//定时器 修改数据 并输出
setInterval(function(){
i++
pic.src=data[i].imgSrc
text.innerHTML=data[i].title
if(i===data.length-1){
i=-1
}
},1000)
</script>
</body>
</html>
7.定时器-阅读条款等待时间
7.1成品
7.2代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(6)</button>
<script>
//获取元素btn
let btn=document.querySelector('.btn')
//定时器，设置初始值，各个阶段显示画面，最终显示画面
let i=6
let timer=setInterval(function(){
i--
btn.innerHTML=`我已经阅读用户协议(${i})`
if(i===0){
btn.disabled=false
clearInterval(timer)
btn.innerHTML='我同意'
}
},1000)
</script>
</body>
</html>
8.小米搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: relative;
width: 223px;
margin: 100px auto;
}
.mi input {
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
}
.mi .search {
border: 1px solid #ff6700;
}
.result-list {
display: none;
position: absolute;
left: 0;
top: 48px;
width: 223px;
border: 1px solid #ff6700;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本">
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
let search=document.querySelector('input')
let result_list=document.querySelector('.result-list')
let mi=document.querySelector('mi')
search.addEventListener('focus',function(){
//下面三行代码作用一样
/* search.style.border='1px solid #ff6700'
search.classList.add('search')
this.classList.add('search') */
this.classList.add('search')
result_list.style.display='block'
})
search.addEventListener('blur',function(){
this.classList.remove('search')
result_list.style.display='none'
})
</script>
</body>
</html>
扫一扫
1876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
