ZG前端学习第一天2020-10-29

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>

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页