[JS]-08

2021/6/13 10:26:29

编程Tag： js let input img div flag 08 hour

本文主要是介绍[JS]-08，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

0x01--分时问候案例

<img style="width: 200px;" src="images/w.gif" alt="">
<div>主人,晚上好!</div>
<script>
  //1.需要日期内置对象
  //2.利用多分枝语句设置不同的图片
  //3.需要一个图片,根据时间修改图片,就需要元素操作src属性
  //4.需要一个div元素,显示不同的问候语
  let img = document.querySelector('img')
  let div = document.querySelector('div')
  let date = new Date()
  let hour = date.getHours()
  //hour = 8/16/19 //人为改动hour值查看程序效果
  if (hour > 0 && hour < 12) {
    img.src = 'images/s.gif'
    div.innerHTML = '主人,上午好!'
  } else if (hour > 0 && hour < 18) {
    img.src = 'images/x.gif'
    div.innerHTML = '主人,中午好!'
  } else if (hour > 0 && hour <= 24) {
    img.src = 'images/w.gif'
    div.innerHTML = '主人,晚上好!'
  } else {}
</script>

0x02--表单元素的属性操作

利用DOM可以操作如下表单元素的属性:

1、type
2、value
3、checked
4、selected
5、disabled

  <button>按钮</button><input type="text" value="输入内容">
  <script>
    //1.获取元素
    let btn = document.querySelector('button')
    let inp = document.querySelector('input')
    //2.注册时间,处理程序
    btn.onclick = () => {
      //inp.innerHTML = '点击了' //这个操作的是div盒子里的内容,不是input里的内容
      inp.value = '点击了' //正确
      btn.disabled = true
    }
  </script>

0x03--仿京东实现显示隐藏明文密码

核心思路:

1、点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码

2、一个按钮两个状态、点击一次、切换为文本、继续点击切换为password

3、算法: 创建一个flag变量默认为false;如果true就切换文本false就切换密码,flag值设置fasle;

<!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>仿京东显示隐藏密码</title>
    <style>
      .box {
        position: relative;
        width: 400px;
        border: 1px solid red;
        margin: 100px auto;
      }

      .box input {
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
      }

      .box img {
        position: absolute;
        width: 24px;
        top: 3px;
        right: 3px;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <label for="">
        <img src="images/close.png" alt="">
      </label>
      <input type="password" name="" id="">
    </div>
    <script>
      /* 1、点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码

      2、一个按钮两个状态、点击一次、切换为文本、继续点击切换为password

      3、算法: 创建一个flag变量默认为false; 如果true就切换文本false就切换密码, flag值设置fasle; 
    */
      //1.获取元素
      eye = document.querySelector('img')
      input = document.querySelector('input')
      flag = false
      //2.注册事件,编写程序
      eye.onclick = () => {
        flag = !flag
        if (flag == true) {
          input.type = 'text'
          //睁开眼睛
          eye.src = 'images/open.png'
        } else {
          input.type = 'password'
          //闭上眼睛
          eye.src = 'images/close.png'
        }
      }
    </script>
  </body>

</html>

效果:

jd_input

0x04--gif-for-mac-软件

Kap for mac 百度搜索

这篇关于[JS]-08的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

[JS]-08

0x01--分时问候案例

0x02--表单元素的属性操作

0x03--仿京东实现显示隐藏明文密码

0x04--gif-for-mac-软件

相关编程文章