ZG前端学习第一天
下午进班
老师讲解内容(出认识js的写法):
几个小案例:
- 开关灯
效果展示:
通过开关按钮进行控制 小灯和背景颜色 以达成效果展示。
思路:
变化的效果有小灯 开关 背景这3个进行变化 ,所以通过js获取对三者进行控制 用到点击(onclick)动态交互。
代码展示:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
body{background: #000;}
.light{width: 100px;height: 100px;border-radius: 50%;background: #ff0000;margin-left: 50px;}
.rect{height: 100px;width: 10px;background:#3fc1c3;margin-left: 95px;}
.otoggle{width: 50px;height: 50px;background:#8e8e66;margin-left: 75px;text-align: center;line-height: 50px;font-size: 12px;color: #ffffff;}
</style>
</head>
<body>
<div class="light"></div>
<div class="rect"></div>
<div class="otoggle">开灯</div>
<script>
var otoggle = document.getElementsByClassName('otoggle')[0];
var light = document.getElementsByClassName('light')[0];
var body = document.querySelector('body');
// console.log(otoggle);
otoggle.onclick = function(){
if(otoggle.innerText == '开灯'){
body.style.backgroundColor = '#fff';
light.style.backgroundColor = '#a7d320'
otoggle.innerText = '关灯' ;
}else{
body.style.backgroundColor = '#000000';
light.style.backgroundColor = '#3fc1c3'
otoggle.innerText = '开灯' ;
}
}
</script>
</body>
</html>
- 点击切换背景图
效果展示:
通过在表单中输入预存的img图片 点击按钮来进行js交互 从而实现背景图的切换
思路:
变化的效果有 input表单 button按钮 和body的背景图片 所以需要获取的元素有3个 而且按钮点击 input的value值进行匹配 来切换背景颜色,注意:因为不断的切换所输入的背景图所以要注意变量的拼接!
代码展示:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.title{width: 100%;height: 50px;border-bottom: #000000 1px solid;}
.buttom{padding-top: 10px;}
</style>
</head>
<body>
<div class="title">
<h2>点击按钮切换背景</h2>
</div>
<div class="buttom">
<input type="text" placeholder="输入格式1.jpg">
<button>按钮</button>
</div>
<script>
var inputText = document.querySelector('input');
var buttom = document.querySelector('button');
var body = document.querySelector('body');
buttom.onclick = function(){
body.style.backgroundImage = "url("+inputText.value+")"
}
</script>
</body>
</html>
- 点击换图
效果展示 :
通过点击上一张 和下一张按钮进行进行图片的切换
思路 :变化的效果有 上一张和下一张按钮的点击 图片的变化 以及图片下面文字的改变 用到了onclick点击效果 同时注意变量i来控制图片的效果 。
代码展示:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.imgBox{width: 250px;height: 350px;background: #cacbcb;}
.imgBox img{width:200px;height: 300px;display: block;margin: auto;}
.imgBox p{text-align: center;}
</style>
</head>
<body>
<div class="imgBox">
<img src="baby.png" alt="">
<p>这是第一张图片</p>
</div>
<div>
<button type="button" >上一张</button>
<button >下一张</button>
</div>
<script type="text/javascript">
var img = document.querySelector('img');
console.log(img);
var topButton = document.getElementsByTagName('button')[0];
var underButton = document.getElementsByTagName('button')[1];
// console.log(topButton);
// console.log(underButton);
var text = document.querySelector('p');
var arrImg = ['baby','wangzulan','zhengkai'];
var arrNum =['一','二','三'];
var i=1;
underButton.onclick = function() {
img.src = ""+arrImg[i]+".png";
text.innerText = "这是第"+arrNum[i]+"张图片";
i++;
if(i>=3){i=0;}
}
topButton.onclick = function() {
i--;
if(i<0){i=2;}
img.src = ""+arrImg[i]+".png";
text.innerText = "这是第"+arrNum[i]+"张图片";
}
</script>
</body>
</html>