1.点击切换按钮的案例-体验html+css+js实现交互效果(这个放在第一题可能有点难,可以先看看,以后再回来看)
<!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>
.pink {
background: pink;
}
</style>
</head>
<body>
<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</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'
})
}
</script>
</body>
</html>
2.请用外部和内部两种 JavaScript 书写方式,页面弹出: 努力,奋斗
<!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>
<script src="index.js"></script>
<script>
alert('努力,奋斗')
</script>
</body>
</html>
在index.js文件中
alert('努力,奋斗1')
3.输入输出练习
- 浏览器中弹出对话框: 你好 JS~
- 页面中打印输出: JavaScript 我来了!
- 页面控制台输出: 它~会魔法吧~
<!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>
<script>
alert('你好 js')
document.write('JavaScript我来了')
console.log('它~会魔法吧~')
</script>
</body>
</html>
4.变量练习
- 1. 声明一个变量,用于存放用户购买的商品 数量 ( num ) 为 20 件
- 2. 声明一个变量,用于存放用户的 姓名 ( uname ) 为 ’张三’
- 3. 依次控制台打印输出两个变量
<!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>
<script>
let num = 20
let uname = '张三'
console.log(num)
console.log(uname)
</script>
</body>
</html>
5.变量练习
浏览器中弹出对话框: 请输入姓名, 页面中输出:刚才输入的姓名
<!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>
<script>
let name = prompt('请输入姓名')
document.write(name)
</script>
</body>
</html>
6.变量练习-交换变量的
有2个变量: num1 里面放的是 10, num2 里面放的是20 ,最后变为 num1 里面放的是 20 , num2 里面放的是 10
<!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>
<script>
let num1 = 10
let num2 = 20
num = num1
num1 = num2
num2 = num
console.log(num2,'num2')
console.log(num1,'num1')
</script>
</body>
</html>
7.变量练习-输出用户信息
<!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>
<script>
let name = prompt('请输入你的名字')
let age = prompt('请输入你的年龄')
let sex = prompt('请输入你的性别')
document.write('您的名字,年龄,性别分别是:' +name+age+sex)
</script>
</body>
</html>
8.数组取值练习
定义一个数组,里面存放星期一、星期二…… 直到星期日(共7天),在控制台输出:星期日
<!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>
<script>
let arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
console.log(arr[6])
</script>
</body>
</html>
9.计算圆的面积
对话框中输入圆的半径,算出圆的面积并显示到页面
<!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>
<script>
//prompt传入的是字符串,但是通过相乘直接隐型转换为数字
let r = prompt('请输入圆的半径')
let area = r*r*3.14
document.write(area)
</script>
</body>
</html>
9.页面输出用户信息案例
需求:
页面弹出对话框,输入名字和年龄,页面显示: 大家好,我叫xxx,今年xx岁了
<!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>
<script>
let name = prompt('请输入你的名字')
let age = prompt('请输入你的年龄')
document.write(`大家好,我叫${name},今年${age}岁了`)
</script>
</body>
</html>
10.输入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>
<script>
let num1 = Number(prompt('请输入第一个数字'))
let num2 = Number(prompt('请输入第二个数字'))
document.write(num1+num2)
</script>
</body>
</html>
11.用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息
<!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>
table {
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<script>
let price = prompt('请输入商品价格')
let num = prompt('请输入商品数量')
let address = prompt('请输入商品地址')
document.write(`
<table>
<tr>
<th>商品价格</th>
<th>商品数量</th>
<th>商品地址</th>
</tr>
<tr>
<td>${price}</td>
<td>${num}</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>