学习Js-day10
BOM和DOM的练习
<body>
<input type="text" placeholder="姓名" id="username"><input type="text" placeholder="年龄" name="age"><br>
<input type="text" placeholder="学历"><input type="text" placeholder="专业"><br>
<button>保存</button>
</body>
</html>
<script>
var username = document.getElementById('username')
var age = document.getElementsByName('age')[0]
var degree = document.getElementsByTagName('input')[2]
// 支持选择器
/* var magor = document.querySelector('input:nth-of-type(4)')
document.getElementsByTagName('button')[0].onclick = function(){
console.log(`姓名:${username.value} 年龄:${age.value} 学历:${degree.value} 专业:${magor.value}`);
} */
</script> 
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
<head>
<style>
div{
width: 600px;
height: 500px;
background-color: purple;
margin: 0 auto;
color: green;
}
</style>
</head>
</head>
<body>
<div>
看我72变
</div>
<script>
// 2, 写一个定时器, 每隔0.1秒修改一次div内文字颜色和文字大小. 最开始这个文字是默认大小, 开启定时器后文字大小开始增大, 当增大了6次以后, 文字大小开始缩小, 缩小6次, 文字再开始增大…效果如下图:
function randomColor(){
var r = parseInt(Math.random()*255)
var g = parseInt(Math.random()*255)
var b = parseInt(Math.random()*255)
return `rgb(${r},${g},${b})`
}
// 获取div
// 改大小
var defaultSize = 16
var i=0
var div = document.querySelector('div')
// 定时器
setInterval(function(){
div.style.color = randomColor()
// 每一次去加4
i++
if(Math.ceil(i/6)%2==0){//--
defaultSize-=10
}else{//++
defaultSize+=10
}
div.style.fontSize = defaultSize+'px'
},100)
</script>
</body>
<html>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
<head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-repeat: no-repeat;
background-size: 100%;
}
#box{
width: 600px;
height: 400px;
margin:0 auto;
border: 1px solid red;
}
</style>
</head>
</head>
<body>
<div id="box">
<button onclick="fn()">皮肤1<tton>
<button onclick="fn1()">皮肤2<tton>
</div>
<script>
// 3, 网页换肤, 点击皮肤1, 切换到第一张图的效果, 点击皮肤2切换到第二张图的效果
var box= document.getElementById('box')
function fn(){
box.style.backgroundColor = 'pink'
var father = box.parentElement
father.style.backgroundImage="url(./1.webp)"
}
function fn1(){
box.style.backgroundColor = 'gold'
var father = box.parentElement
father.style.backgroundImage="url(./2.webp)"
}
</script>
</body>
<html>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script>
var lis = document.querySelectorAll('li')
for(var i=1;i<lis.length;i++){
var color = 'red'
if(i%2==0){
color = 'blue'
}
lis[i-1].style.backgroundColor = color
}
document.querySelector('ul')
</script>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
<style>
table img{
width: 300px;
height: 300px;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<table>
<tr>
<td><img src="./img/微信图片_20220704142638.jpg" alt=""></td>
<td><img src="./img/微信图片_20220628184804.jpg" alt=""></td>
<td><img src="./img/微信图片_20220628184750.jpg" alt=""></td>
</tr>
</table>
<img src="" alt="">
</body>
</html>
<script>
var imgs = document.querySelectorAll('img')
var show = imgs[3]
show.src = imgs[0].src
for(var i = 0;i<imgs.length-1;i++){
imgs[i].onclick = function(){
show.src = this.src
}
}
</script>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
<style>
div{
width: 300px;
padding: 5px;
}
p{
background-color: grey;
height: 50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
<script>
var child = document.querySelector('p')
function createButton(){
for(var i =0;i<12;i++){
var btn = document.createElement('button')
btn.innerHTML = i+1
btn.style.height = '50px'
btn.style.width = '100px'
document.querySelector('div').insertBefore(btn,child)
}
}
createButton()
var btns = document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
child.innerHTML = this.innerHTML + '月份好'
}
}
</script>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href=''>
<style>
.box{
width: 200px;
height: 300px;
border: 1px solid #000;
}
a{
display: inline-block;
width: 60px;
height: 30px;
}
.content {
position: relative;
}
.content div{
position: absolute;
left: 0;
top: 0;
background-color: pink;
}
.top{
background-color: gray;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<span>探索</span>
<span>科技</span>
</div>
<div class="content">
<div>探索探索探索探索</div>
<div>科技科技科技科技</div>
</div>
</div>
</body>
</html>
<script>
var btns = document.querySelectorAll('.top>span')
var contents = document.querySelectorAll('.content>div')
for(var i=0;i<btns.length;i++){
btns[i].setAttribute('index',i)
btns[i].onclick = function(){
for(var j=0;j<this.parentElement.children.length;j++){
this.parentElement.children[j].style.backgroundColor = ''
}
var index = this.getAttribute('index')
this.style.backgroundColor = 'skyblue'
setNone()
contents[index].style.display = 'block'
}
}
function setNone(){
var array = Array.from(contents)
array.forEach(function(el){
el.style.display = 'none'
})
}
</script>
浙公网安备 33010602011771号