1.基础的元素获取
<input type="text" id="int1">
<button id="btn1">获取</button>
<div class="box">1</div>
<div class="box">2</div>
<script>
1.根据id名获取元素
//获取input输入框
var inp = document.getElementById('int1');
// 获取button标签
var btn = document.getElementById('btn1');
console.log(inp);
console.log(btn);
2.根据class名获取元素
// 根据 class 获取元素
var box = document.getElementsByClassName('box');
// 获取到的是一个 伪数组
// 这个伪数组 有 length属性 有数组的特性
// 但是 不能使用 数组的操作方法
//要想获取到class的内容加:最后加[0]
比如：var box = document.getElementsByClassName('box')[0];
</script>
2.绑定点击事件
<input type="text" id="int1">
<button id="btn1">获取</button>
<script>
//获取input输入框
var inp = document.getElementById('int1');
// 获取button标签
var btn = document.getElementById('btn1');
console.log(inp);
console.log(btn);
给button绑定点击事件
btn.onclick = function() {
// 获取 input 输入框中的内容
console.log(inp.value);
// *1 将input输入框中的内容变成数值类型
console.log(inp.value * 1);
}
练习 在输入框中 随意输入一个总价
// 点击按钮后 计算最少需要多少张 100 10人民币
var inp2 = document.getElementById('int2');
var btn2 = document.getElementById('btn2');
btn2.onclick = function (){
var price = inp2.value*1;
var x=price%100,//计算100的余数，余数等于总价-100张数后剩余的钱数
y=x%10,
z=y%1;
var bai,shi,yi;
bai = (price-x)/100;
shi = (x-y)/10;
yi = (y-z)/1;
console.log("总价"+price+"元");
console.log("需要100元"+ bai +"张");
console.log("需要10元"+ shi +"张");
console.log("需要1元"+ yi +"张");
}
</script>
