html中延缓背景变色速度,作业背景变色.html

Document

body,

html {

margin: 0;

}

body {

height: 100%;

}

var nav = document.createElement('nav')

document.body.appendChild(nav)

// 默认背景红色

document.body.style.backgroundColor = 'red'

nav.style.width = '100%'

nav.style.height = '40px'

nav.style.backgroundColor = 'black'

nav.style.position = 'relative'

var button1 = document.createElement('input')

document.body.appendChild(button1);

button1.style.backgroundColor = 'red'

button1.style.width = '20px'

button1.style.height = '20px'

button1.style.position = 'absolute'

button1.style.top = '10px'

button1.style.left = '3px'

button1.type = 'button'

// button1.style.border = 'none'

button1.onclick = function (event) {

event.preventDefault()

document.body.style.backgroundColor = 'red'

}

var button2 = document.createElement('input')

document.body.appendChild(button2);

button2.style.backgroundColor = 'blue'

button2.style.width = '20px'

button2.style.height = '20px'

button2.style.position = 'absolute'

button2.style.top = '10px'

button2.style.left = '30px'

button2.type = 'button'

// button2.style.border = 'none'

button2.onclick = function (event) {

event.preventDefault()

document.body.style.backgroundColor = 'blue'

}

var button3 = document.createElement('input')

document.body.appendChild(button3);

button3.style.backgroundColor = 'green'

button3.style.width = '20px'

button3.style.height = '20px'

button3.style.position = 'absolute'

button3.style.top = '10px'

button3.style.left = '58px'

button3.type = 'button'

// button3.style.border = 'none'

button3.onclick = function (event) {

event.preventDefault()

document.body.style.backgroundColor = 'green'

}

var button4 = document.createElement('input')

document.body.appendChild(button4);

button4.style.backgroundColor = 'yellow'

button4.style.width = '20px'

button4.style.height = '20px'

button4.style.position = 'absolute'

button4.style.top = '10px'

button4.style.left = '87px'

button4.type = 'button'

// button4.style.border = 'none'

button4.onclick = function (event) {

event.preventDefault()

document.body.style.backgroundColor = 'yellow'

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史