console.log 、 alert 、 prompt 、 confirm 、 location.href 、 setinterval 、 settimeout 、addEventListener
常用操作
console log
1console.log('hello world');
定时
内置函数 setinterval()、settimeout()
每秒钟打印一次hello world
1var timer = setInterval(function(){
2 console.log('hello world');
3},1000);
4
5//停止打印
6clearInterval(timer);
3秒钟后打印hello world
1setTimeout(function(){
2 console.log('hello world');
3},3000);
弹窗等
1alert('hello world'); //弹窗
2confirm('hello world'); //弹窗,点击确定返回true,点击取消返回false
3prompt('hello world'); //弹窗,输入框
重定向
location 对象用于获得当前页面的地址(URL)并把浏览器重定向到新的页面。
1location.href //返回当前页面的URL
2location.href = 'https://cornradio.github.io'//重定向到新的页面
3location.reload() //重新加载当前文档
通过js绑定onclick事件
给btn绑定onclick事件,点击btn时打印 hello world
1//js 风格
2var btn = document.getElementById('btn');
3btn.onclick = function(){
4 console.log('hello world');
5}
6//老派java风格
7btn.addEventListener('click',function(){
8 console.log('hello world');
9})
10//执行
11btn.click();
注意需要将script标签放在body标签的最后面,否则会找不到元素。或者可以使用等待加载listener。
1//等待加载dom元素后再执行(较快速)
2document.addEventListener("DOMContentLoaded", function() {
3 const button = document.querySelector('button');
4 button.onclick = function(){
5 console.log('hello world');
6 }
7});
8
9//等待将图片加载后再执行(较好写)
10window.onload = function(){
11 const button = document.querySelector('button');
12 button.onclick = function(){
13 console.log('hello world');
14 }
15}