新手小白js练习题第一天

无敌暴暴龙（超级无敌版）

已于 2023-11-29 17:52:44 修改

阅读量430

点赞数 7

文章标签：学习 vue.js 前端 javascript

于 2023-11-28 11:48:13 首次发布

本文链接：https://blog.csdn.net/weixin_52692705/article/details/134660782

版权

1.点击切换按钮的案例-体验html+css+js实现交互效果(这个放在第一题可能有点难，可以先看看，以后再回来看)

<!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>
        .pink {
            background: pink;
        }
    </style>
</head>
<body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</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>
</html>

2.请用外部和内部两种 JavaScript 书写方式，页面弹出：努力，奋斗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="index.js"></script>
    <script>
        alert('努力，奋斗')
    </script>
</body>
</html>

在index.js文件中

alert('努力，奋斗1')

3.输入输出练习

浏览器中弹出对话框：你好 JS~
页面中打印输出： JavaScript 我来了!
页面控制台输出：它~会魔法吧~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <script>
        alert('你好 js')
        document.write('JavaScript我来了')
        console.log('它~会魔法吧~')
    </script>
</body>
</html>

4.变量练习

1. 声明一个变量，用于存放用户购买的商品数量 ( num ) 为 20 件
2. 声明一个变量，用于存放用户的姓名 ( uname ) 为 ’张三’
3. 依次控制台打印输出两个变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <script>
      let num = 20
      let uname = '张三'
      console.log(num)
      console.log(uname)
    </script>
</body>
</html>

5.变量练习

浏览器中弹出对话框：请输入姓名，页面中输出：刚才输入的姓名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <script>
     let name = prompt('请输入姓名')
     document.write(name)
    </script>
</body>
</html>

6.变量练习-交换变量的

有2个变量： num1 里面放的是 10， num2 里面放的是20 ，最后变为 num1 里面放的是 20 ， num2 里面放的是 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <script>
   let num1 = 10
   let num2 = 20
   num = num1
   num1 = num2
   num2 = num
   console.log(num2,'num2')
   console.log(num1,'num1')

    </script>
</body>
</html>

7.变量练习-输出用户信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
<script>
  let name = prompt('请输入你的名字')
  let age = prompt('请输入你的年龄')
  let sex = prompt('请输入你的性别')
  document.write('您的名字，年龄，性别分别是：' +name+age+sex)
    </script>
</body>
</html>

8.数组取值练习

定义一个数组，里面存放星期一、星期二…… 直到星期日（共7天），在控制台输出：星期日

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
<script>
    let arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
    console.log(arr[6])
</script>
</body>
</html>

9.计算圆的面积

对话框中输入圆的半径，算出圆的面积并显示到页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
<script>
    //prompt传入的是字符串，但是通过相乘直接隐型转换为数字
    let r = prompt('请输入圆的半径')
    let area = r*r*3.14
    document.write(area)
</script>
</body>
</html>

9.页面输出用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
<script>
   let name = prompt('请输入你的名字')
   let age = prompt('请输入你的年龄')
   document.write(`大家好，我叫${name},今年${age}岁了`)
</script>
</body>
</html>

10.输入2个数，计算两者的和，打印到页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
<script>
   let num1 = Number(prompt('请输入第一个数字'))
   let num2 = Number(prompt('请输入第二个数字'))
   document.write(num1+num2)
</script>
</body>
</html>

11.用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

<!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 {
      /* 合并相邻边框 */
      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>
   
<script>
   let price = prompt('请输入商品价格')
   let num = prompt('请输入商品数量')
   let address = prompt('请输入商品地址')
    document.write(`
    <table>
    <tr>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>商品地址</th>
    </tr>
    <tr>
        <td>${price}</td>
        <td>${num}</td>
        <td>${address}</td>
    </tr>
   </table>
    `)
</script>
</body>
</html>