发表于： 2023-02-09 20:34:39
0 266
今天复习了一些js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pink {
background-color: pink;
}
</style>
</head>
<body>
<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
let bts = document.querySelectorAll('button');
for(let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click',function() {
document.querySelector('.pink').className = '';
this.className = 'pink';
})
}
// alert('你好 js');
// let a = prompt('请打印')
// document.write(a);
// console.log('他会魔法吧');
// let uname = prompt('输入名字')
// let age = prompt('输入年龄')
// let gender = prompt('输入性别')
// document.write(uname,age,gender)
//页面弹出输入框
// let r = prompt('请输入圆的半径:')
// //计算圆的面积
// let re = 3.14 * r * r
// //页面输出结果
// document.write(re)
//隐式转换
console.log('11' - 11) //0
console.log('1' * 1) //1
console.log(typeof '123') //string
console.log(typeof + '123') //number
console.log(+'11' + 11) //22
//得到的是字符串类型 需要转换为数字型 最简单的是 添加一个+
let a = +prompt('请输入第一个数字:')
let b = +prompt('请输入第二个数字:')
let c = a + b
alert(c)
</script>
</body>
</html>
学习了了一个新的知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// let age = 18
// //模板字符串 外面用反引号``包含 里面使用 ${变量名}
// document.write(`我今年${age}岁了`)
//弹出输入框
//输入姓名
let uname = prompt('请输入姓名:')
//输入年龄
let age = prompt('请输入年龄:')
document.write(`大家好，我叫${uname},今年${age}岁了`)
</script>
</body>
</html>
做了一个小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
text-align: center;
}
table {
border-collapse: collapse; /*合并相邻边框*/
height: 80px;
margin: 0 auto;
}
th {
padding: 5px 20px;
}
table,
th,
td {
border: 1px solid #3333;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
let tr = document.querySelector('tr')
let th = document.querySelectorAll('th')
//用户输入
let price = +prompt('请输入商品价格:')
let num = +prompt('请输入商品的数量:')
let address = prompt('请输入收获地址:')
//计算价格
let a = price * num
//页面打印
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收获地址</th>
</tr>
<tr>
<th>小米5</th>
<th>${price}元</th>
<th>${num}</th>
<th>${a}元</th>
<th>${address}</th>
</tr>
</table>
`)
</script>
</body>
</html>
返回列表
评论