Javascript 入门-常用操作

目录

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}

Python_beautiful_soup
Javascript 入门-DOM