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

最新推荐文章于 2024-07-19 15:50:46 发布

短腿小萝卜

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量144

点赞数

文章标签： css javascript

本文链接：https://blog.csdn.net/weixin_43707498/article/details/109372530

版权

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>

短腿小萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ZG前端学习第一天2020-10-29

ZG前端学习第一天下午进班老师讲解内容（出认识js的写法):几个小案例：开关灯效果展示：通过开关按钮进行控制小灯和背景颜色以达成效果展示。思路：变化的效果有小灯开关背景这3个进行变化，所以通过js获取对三者进行控制用到点击(onclick)动态交互。代码展示：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="v
复制链接

扫一扫