- 做计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器</title>
<style>
#id {
border: 1px solid;
}
</style>
</head>
<body>
<input id='id-shu1' type="text" value="">
<input id='id-op' type="text" value="">
<input id='id-shu2' type="text" value="">
<button id='id-dy'>=</button>
<input id='id-jg' type="text" value="">
<br>
<input type="text">
<button type="submit" value="提交">提交</button>
<script>
var jisuan = function (op, a, b) {
if(op == '+') {
return a + b
}else if (op == '-') {
return a - b
}else if (op == '*') {
return a * b
}else if (op == '/') {
return a / b
}else {
return '输入错误'
}
}
var e = function(self) {
return document.querySelector(self)
}
var dy = e('#id-dy')
dy.addEventListener('click', function(event) {
var a = e('#id-shu1')
var op = e('#id-op')
var b = e('#id-shu2')
var rt = e('#id-jg')
var value1 = a.value
var operator = op.value
var value2 = b.value
var resultValue = jisuan(operator, value1, value2)
rt.value = resultValue
})
// var input = e('#id-shu1')
// input.addEventListener('mouseout', function(event) {
// console.log('mouseout')
// })
// var body = e('body')
// body.addEventListener('mousemove', function(event) {
// console.log('mousemove')
// })
</script>
</body>
</html>
-制作三个按钮，点击时被点击按钮颜色改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>buttons</title>
<style>
.background {
background: lightblue;
}
</style>
</head>
<body>
<div>
<button id="id-button1" class="background">qwe</button>
<button id="id-button2" class="background">asd</button>
<button id="id-button3" class="">zxc</button>
</div>
<script>
let buttons = document.querySelectorAll('button')
for (let i = 0; i < buttons.length; i++) {
let button = buttons[i]
button.addEventListener('click', function (event) {
console.log('buttons', buttons)
remove()
let target = event.target
target.classList.remove('background')
})
}
let remove = function () {
for (let i = 0; i < buttons.length; i++) {
let a = buttons[i]
if (a.classList.contains('background')) {
a.classList.remove('background')
}
}
}
</script>
</body>
</html>
