JavaScript 基础案例笔记

按钮点击切换变色

图示

代码

  <style>
    .pink {
      background-color: pink;
    }
  </style>
</head>

<body>
  <button class="pink">按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    let bts = document.querySelectorAll('button')
    for (let i = 0; i < bts.length; i++) {
      bts[i].addEventListener('click', function () {
        document.querySelector('.pink').className = ''
        this.className = 'pink'
      })
    }
  </script>
</body>

解析

let bts = document.querySelectorAll('button'): 这行代码声明了一个变量 bts，并使用 document.querySelectorAll 方法来选择文档中所有的按钮元素。'button' 是一个CSS选择器，它选取所有的按钮元素。querySelectorAll 返回一个NodeList对象，其中包含所有匹配指定CSS选择器的元素。

for (let i = 0; i < bts.length; i++): 这是一个for循环，初始化一个计数器变量 i 为0，只要 i 小于 bts 的长度就会继续执行循环体。bts.length 是NodeList中元素的数量，即页面上按钮的数量。

bts[i].addEventListener('click', function () {...}): 在循环内部，为每个按钮（bts[i]）添加一个点击事件监听器。当按钮被点击时，会调用一个匿名函数（也就是没有名字的函数）。

document.querySelector('.pink').className = '': 在匿名函数内部，首先使用 document.querySelector 方法查找文档中类名为 'pink' 的第一个元素。找到后，将其 className 属性设置为空字符串，这将移除该元素的 'pink' 类名。

this.className = 'pink': 然后，关键字 this 在这里代表被点击的按钮元素。将这个按钮的 className 设置为 'pink'，即将 'pink' 类名赋予当前按钮。

整体来说，这段代码使得当你点击任何一个按钮时，之前标记为 'pink' 的按钮会失去这个类名，而你新点击的这个按钮会获得 'pink' 类名。通常，这样的逻辑用于使用户界面中的按钮可以互相切换选中状态。

弹出警告框

图解

代码

<body>
  <!-- 内部js -->
  <script>
    // 页面弹出警示框
    alert('你好，js~')
  </script>
</body>

  <!-- 外部js -->
<body>
  <script src="./js/my.js">
    // 中间不要写内容
  </script>
</body>

解析

alert(message) : 浏览器弹出对话框方法

输入输出

图解

代码

<body>
  <script>
    // 1. 文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题</h1>')
    // 2. 控制台打印输出 给 程序员
    console.log('看看对不对')
    console.log('日志')
    // 3. 输入语句
    prompt('请输入您的年龄：')
  </script>
</body>

解析

使用document.write()方法将文本内容输出到HTML文档中。这里输出了两个字符串，一个是"我是div标签"，另一个是HTML标签<h1>我是标题</h1>。

使用console.log()方法将文本内容输出到浏览器的控制台。这里输出了两个字符串，分别是"看看对不对"和"日志"。

使用prompt()函数弹出一个对话框，提示用户输入年龄。用户可以在对话框中输入年龄，然后点击确定或取消。

弹出输入框并在页面打印

图解

代码

<script>		
    let name = prompt('请输入您的姓名（name）:')
	let age = prompt('请输入你的年龄（age）:')
	let gender = prompt('请输入你的性别（gender）:')
	document.write(name,age,gender)
</script>

解析

弹出三个输入框，让用户输入信息，然后在页面打印出用户输入的信息

数组取值

图解

代码

<script>
// 定义一个数组
let days = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']		
// 在控制台输出星期天		
console.log(days[6])		
</script>

模板字符串

图解

代码

let name = prompt('请输入你的姓名：')
let age = prompt('请输入你的年龄：')
document.write(`大家好，我叫${name},今年${age}岁了`)

解析

模板字符串通过 ${ 变量 } 来进行拼接，注意外层是斜引号 (` `)

输入两个数计算两者和

图解

代码

let num1 = +prompt('请输入第一个数字：')
let num2 = +prompt('请输入第一个数字：')
// document.write(num1 + num2)
// alert(`这两个数相加为${num1}+${num2}`)  错误
alert(`这两个数相加为${num1 + num2}`)

解析

+号将输入的字符串型转换为数字类型，也可以用number（）

订单案例

图解

代码

<!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>
  <style>
    h2 {
      text-align: center;
    }

    table {
      /* 合并相邻边框 */
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <h2>订单确认</h2>
  <script>
    // 1 用户输入
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量：')
    let address = prompt('请输入收获地址：')
    // 2.计算总额
    let total = price * num
    // 3.页面打印渲染
    document.write(`
      <table>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
          </tr>
          <tr>
            <td>小米SU7</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
          </tr>
        </table>
    `)
  </script>
</body>

解析

将table里面的内容都放到<script></script>里面

用户登录案例

图解

代码

    let name = prompt('请输入你的用户名：')
    let password = prompt('请输入你的密码：')
    if (name === '小陈' && password === '123456') {
      alert('登录成功！')
    }
    else {
      alertxiao('登录失败！')
    }

解析

条件判断

判断闰年

图解

代码

    let year = +prompt('请输入一个年份：')
    if (year % 4 === 0 || year % 100 !== 0 && year % 400 === 0) {
      alert(`${year}年是闰年！`)
    }
    else {
      alert(`${year}年是平年！`)
    }

解析

能被4整除但不能被100整除，或者能被400整除

成绩评估案例

图解

代码

    let grade = +prompt('请输入你的成绩：')
    if (grade > 90) {
      alert('你的成绩是优秀！')
    }
    else if (grade > 70) {
      alert('你的成绩是良好！')
    }
    else if (grade > 60) {
      alert('你的成绩是及格！')
    }
    else {
      alert('你的成绩是不及格！')
    }

解析

if ==> else if ==> else

三目运算判断最大值

图解

代码

    let num1 = +prompt('请输入第一个数：')
    let num2 = +prompt('请输入第二个数：')
    // console.log(`${num1} > ${num2} ? ${num1} : ${num2}`)  错误
    console.log(`${num1 > num2 ? num1 : num2}`)
    num1 > num2 ? alert(`最大值是${num1}`) : alert(`最大值是${num2}`)

解析

三目运算符条件？ture :flase

数字补0案例

图解

代码

    let num = prompt('请输入一个数：')
    num < 10 ? 0 + num : num
    alert(num)

解析

小于十则在数字前面拼接一个0

switch计算器

图解

代码

    let num1 = +prompt('请输入第一个数字：')
    let op = prompt('请输入你的操作（+ - * /）:')
    let num2 = +prompt('请输入第二个数字：')
    switch (op) {
      case '+':
        alert(`${num1 + num2}`)
        break
      case '-':
        alert(`${num1 - num2}`)
        break
      case '*':
        alert(`${num1 * num2}`)
        break
      case '/':
        alert(`${num1 / num2}`)
        break
      default:
        alert('what are you doing?')
    }

解析

通过switch等值判断计算机执行哪项操作

while练习

图解

代码

    let i = 1
    let sum = 0
    let onum = 0
    while (i <= 100) {
      document.write(`${i}&nbsp&nbsp&nbsp&nbsp`)
      sum = sum + i
      if (i % 10 === 0) {
        document.write('</br>')
      }
      if (i % 2 === 0) {
        onum = onum + i
      }
      i++
    }
    document.write(`1到100的总和为${sum}</br>`)
    document.write(`1到100的偶数和为${onum}`)

恋爱脑页面弹框

图解

代码

  <script>
    while (true) {
      let str = prompt('你爱我吗')
      // 退出条件 爱
      if (str === '爱') {
        break
      }
    }
  </script>

解析

弹窗在循环中反复弹出，直至你说爱~

ATM取款机

图解

代码

    let money = 100
    while (true) {
      let op = prompt('请你选择操作：1、存钱 2、取钱 3、查看余额 4、退出')
      switch (op) {
        case '1':
          let cunmoney = +prompt('请输入你的存钱数目：')
          money = money + cunmoney
          alert('存钱成功')
          continue
        case '2':
          let qumoney = +prompt('请输入你的存钱数目：')
          money = money - qumoney
          alert('取钱成功')
          continue
        case '3':
          alert(`你的余额为${money}`)
          continue
        case '4':
          bleak
      }
    }

打印矩形

图解

代码

    let row = +prompt('请输入行数：')
    let col = +prompt('请输入列数：')
    for (let i = 1; i <= row; i++) {
      for (let j = 1; j <= col; j++) {
        document.write('⭐')
      }
      document.write('</br>')
    }

打印倒三角形

图解

代码

    let row = +prompt('请输入行数：')
    for (let i = 1; i <= row; i++) {
      for (let j = 1; j <= i; j++) {
        document.write('⭐')
      }
      document.write('</br>')
    }

九九乘法表

图解

代码

  <style>
    span {
      display: inline-block;
      width: 100px;
      padding: 5px 10px;
      border: 1px solid pink;
      margin: 2px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
      background-color: rgba(255, 192, 203, .1);
      text-align: center;
      color: hotpink;
    }
  </style>   

    let row = +prompt('请输入行数：')
    for (let i = 1; i <= row; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${j} x ${i} = ${i * j}</span>`)
      }
      document.write('</br>')
    }

数组求和

图解

代码

    let arry = [2, 6, 1, 7, 4]
    let pnum = 0
    let sum = 0
    for (i = 0; i < arry.length; i++) {
      sum += arry[i]
    }
    pnum = sum / arry.length
    document.write(`${sum}</br>${pnum}`)

求数组最值

图解

代码

    let arry = [2, 6, 1, 77, 52, 25, 7]
    let max = arry[0]
    let min = arry[0]
    for (let i = 1; i < arry.length; i++) {
      max > arry[i] ? max : max = arry[i]
      min < arry[i] ? min : min = arry[i]
    }
    document.write(`${max}</br>`)
    document.write(`${min}`)

数组筛选

图解

代码

    let arry = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newarry = []
    for (let i = 0; i < arry.length; i++) {
      if (arry[i] >= 10) {
        newarry.push(arry[i])
      }
    }
    console.log(newarry);

数据生成柱形图

图解

代码

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {

            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>
<body>
    <script>
        // 1. 四次弹框效果
        // 声明一个新的数组
        let arr = []
        for (let i = 1; i <= 4; i++) {
            // let num = prompt(`请输入第${i}季度的数据:`)
            // arr.push(num)
            arr.push(prompt(`请输入第${i}季度的数据:`))
            // push记得加小括号，不是等号赋值的形式
        }
        // console.log(arr)  ['123','135','345','234']
        // 盒子开头
        document.write(` <div class="box">`)

        // 盒子中间 利用循环的形式  跟数组有关系
        for (let i = 0; i < arr.length; i++) {
            document.write(`
              <div style="height: ${arr[i]}px;">
                <span>${arr[i]}</span>
                <h4>第${i + 1}季度</h4>
              </div>          
            `)
        }
        // 盒子结尾
        document.write(` </div>`)
    </script>
</body>

</html>

转换时间

图解

代码

    let second = +prompt('请输入秒数:')
    // 2.封装函数
    function getTime(t) {
      // console.log(t)  // 总的秒数
      // 3. 转换
      // 小时：  h = parseInt(总秒数 / 60 / 60 % 24)
      // 分钟：  m = parseInt(总秒数 / 60 % 60)
      // 秒数: s = parseInt(总秒数 % 60) 
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s)
      return `转换完毕之后是${h}小时${m}分${s}秒`
    }
    let str = getTime(second)
    document.write(str)
    console.log(h)

遍历数组对象

图解

代码

    let students = [
      { uname: '小明', age: 18, gender: '男', hometown: '河北省' },
      { uname: '小华', age: 28, gender: '女', hometown: '北京市' },
      { uname: '小东', age: 38, gender: '女', hometown: '河南省' },
      { uname: '小朱', age: 48, gender: '男', hometown: '湖北省' },
    ]
    for (let i = 0; i < students.length; i++) {
      for (let key in students[i]) {
        console.log(students[i][key])
        document.write(`${students[i][key]}`)
      }
      document.write(`</br>`)
    }

解析

数组中套对象，两层循环

渲染学生信息表

图解

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
            height: 40px;
            cursor: pointer;
        }

        table tr:nth-child(1) {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>

    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <!-- script写到这里 -->
        <script>
            // 1. 数据准备
            let students = [
                { name: '小明', age: 18, gender: '男', hometown: '河北省' },
                { name: '小红', age: 19, gender: '女', hometown: '河南省' },
                { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
                { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
                { name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
            ]
            // 2. 渲染页面
            for (let i = 0; i < students.length; i++) {
                document.write(`
                <tr>
                    <td>${i + 1}</td>
                    <td>${students[i].name}</td>
                    <td>${students[i].age}</td>
                    <td>${students[i].gender}</td>
                    <td>${students[i].hometown}</td>
                </tr>
                `)
            }
        </script>
    </table>

</body>


</html>

猜数字游戏

图解

代码

    function getnum(N, M) {
      return Math.floor(Math.random() * (M - N + 1) + N)
    }
    let num = getnum(1, 10)
    let opportunity = 3
    console.log(num);
    let unum = +prompt('请猜一个数字:')
    opportunity -= 1
    while (opportunity--) {
      if (unum > num) {
        unum = +prompt(`数字猜大了,继续猜,还有${opportunity + 1}次机会:`)
      }
      else if (unum < num) {
        unum = +prompt(`数字猜小了,继续猜,还有${opportunity + 1}次机会:`)
      }
      else {
        alert('猜对了!')
        break
      }
    }
    alert('你三次机会用完了')

生成随机颜色

图解

代码

    // 1. 自定义一个随机颜色函数
    function getRandomColor(flag = true) {
      if (flag) {
        // 3. 如果是true 则返回 #ffffff
        let str = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        // 利用for循环随机抽6次 累加到 str里面
        for (let i = 1; i <= 6; i++) {
          // 每次要随机从数组里面抽取一个  
          // random 是数组的索引号 是随机的
          let random = Math.floor(Math.random() * arr.length)
          // str = str + arr[random]
          str += arr[random]
        }
        return str

      } else {
        // 4. 否则是 false 则返回 rgb(255,255,255)
        let r = Math.floor(Math.random() * 256)  // 55
        let g = Math.floor(Math.random() * 256)  // 89
        let b = Math.floor(Math.random() * 256)  // 255
        return `rgb(${r},${g},${b})`
      }

    }
    // 2. 调用函数 getRandomColor(布尔值)
    console.log(getRandomColor(false))
    console.log(getRandomColor(true))
    console.log(getRandomColor())

图解

代码

<!DOCTYPE html>
<html lang="en">

<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>
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <!-- <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li> -->
                <script>
                    let data = [
                        {
                            src: 'images/course01.png',
                            title: 'Think PHP 5.0 博客系统实战项目演练',
                            num: 1125
                        },
                        {
                            src: 'images/course02.png',
                            title: 'Android 网络动态图片加载实战',
                            num: 357
                        },
                        {
                            src: 'images/course03.png',
                            title: 'Angular2大前端商城实战项目演练',
                            num: 22250
                        },
                        {
                            src: 'images/course04.png',
                            title: 'AndroidAPP实战项目演练',
                            num: 389
                        },
                        {
                            src: 'images/course05.png',
                            title: 'UGUI源码深度分析案例',
                            num: 124
                        },
                        {
                            src: 'images/course06.png',
                            title: 'Kami2首页界面切换效果实战演练',
                            num: 432
                        },
                        {
                            src: 'images/course07.png',
                            title: 'UNITY 从入门到精通实战案例',
                            num: 888
                        },
                        {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                        {
                            src: 'images/course04.png',
                            title: '自动添加的模块',
                            num: 1000
                        }
                    ]

                    for (let i = 0; i < data.length; i++) {
                        document.write(`
                        <li>
                            <a href="#">
                                <img src=${data[i].src} title="${data[i].title}">
                                <h4>
                                   ${data[i].title}
                                </h4>
                                <div class="info">
                                    <span>高级</span> • <span>${data[i].num}</span>人在学习
                                </div>
                            </a>
                        </li>
                      `)
                    }
                </script>
            </ul>
        </div>
    </div>

</body>

</html>