js基础

渲染

*{

}
font-size:200px; < 字体大小
text-align: center; < 字体左右居中
line-height: 400px; < 字体上下居中/垂直居中(要和盒子高度一样!)
color: red; < 颜色
background-color: red; < 背景颜色
width: 800px; < 宽度
height: 400px; < 高度
margin: auto; < 外边距上 右 左 下 auto > 自动
margin-left: 12px; <依次向右的边距
border-radius: 7px; <修圆角
float: left; <像右边浮动
list-style-type: none; < 取消列表的小圆点
text-decoration: nine; <去掉a标签下划线
border:1px solid #000000; < div边框

选择器

document.getElementById('标识') ---> HTMLElement [!]
document.getElementsByTagName('标签名') ---> NodeList
document.getElementsByClassName('类名') ---> NodeList
document.querySelector('样式表选择器') ---> HTMLElement [!]
document.querySelectorAll('样式表选择器') ---> NodeList [!]
firstChild / lastChild / children --- 获取子节点
parentNode --- 获取父节点
previousSibling / nextSibling --- 获取兄弟

在标签上显示指定内容

span.textContent = counter
 ^在它上显示^          ^他的内容

浏览器

location对象代表了浏览器的地址栏
location.href = 'http://www.baidu.com'
跳转指定网页^

按钮


<button onclick="ting()">停止</button>
^<按钮   ^按钮事件  ^函数名

随机数

let i = parseInt(Math.random() * 30+1)
           ^<取随机数并转换成整数

定时器

let time1 = setInterval(yaohao, 1000)
^一直变量名    ^<固定      ^函数名  ^隔多少时间执行一次
function ting(){
            clearInterval(time1)
                ^停止执行    ^一直执行的变量名    
            }
---------------------------------------------------
let aaa = setTimeout(q1, 3000)
                函数名^   ^ 等多少时间执行
clearTimeout(aaa)
  ^停止执行    ^一直执行的变量名

显示指定内容

<div id="clock"></div>
const clockDiv = document.getElementById('clock')
常量              ^            ^拿到盒子的id  ^  
clockDiv.textContent = n
   ^常量名 ^在盒子上显示 n 的值

事件监听器

advImage.addEventListener('mouseover',() => {clearInterval(time1)})
      鼠标移上去执行函数
advImage.addEventListener('mouseout', () => {time1= setInterval(lunhuan, 1000)})
     鼠标移开执行函数
advImage.addEventListener('keypress',() => {clearInterval(time1)})
      键盘按键操作 (需要判断哪个键按下)

推荐阅读更多精彩内容