javaScript复习(day01) 课后作业

已于 2023-05-12 16:32:41 修改
阅读量540 收藏 3
点赞数
分类专栏： javaScript 文章标签： javascript 前端 html5 chrome
于 2023-05-10 16:58:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_62922379/article/details/130604597
版权 
<!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>
</head>

<body>
    <!-- 复习的初衷，在与对基础的巩固 -->

    给按钮绑定点击事件 这是我们在后面学习vue所做的事件，了解即可
    <button onclick="alert('逗你玩呢~')">点击我月薪过万</button>


</body>

</html>

JS基础复习2

<!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>
        .box {
            margin: 200px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        button {
            margin-right: 5px;
        }

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

<body>
    <div class="box">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>
</body>
<script>

    // 点击按钮 添加背景颜色，里面利用了排他思想
    var btns = document.querySelectorAll('button');
    console.log(btns);
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = "";
            }
            this.style.backgroundColor = 'pink';
        }
    }
</script>

</html>

JS基础复习03

<!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>
</head>

<body>
    <script>
        // 需求：时间：5分钟
        // 浏览器中弹出对话框： 你好 JS~  页面中打印输出： JavaScript 我来了!
        // 页面控制台输出： 它~会魔法吧~

        alert('你好 js~')
        document.write('JavaScript 我来了');
        console.log('它~会魔法吧');

        //实现两个变量之间的变换
        let num = 14
        let num1 = 20
        let num3


        num3 = num
        num = num1
        num1 = num3
        console.log(num, num1);
    </script>
</body>

</html>

JS用户信息案例-4

<!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>
</head>

<body>
    <script>
        //需求：让用户输入自己的名字、年龄、性别，再输出到网页
        //分析：
        // ①：弹出 输入 框（prompt）： 请输入您的姓名(uname)： 用变量保存起来。 
        // ②：弹出输入框（prompt） ： 请输入您的年龄(age)： 用变量保存起来。
        // ③：弹出输入框（prompt） ： 请输入您的性别(gender)： 用变量保存起来。
        // ④：页面分别 输出(document.write) 刚才的 3 个变量。

        let uname = prompt('请输入您的姓名')
        let age = prompt('请输入您的年龄')
        let gender = prompt('请输入您的性别')

        document.write('姓名：' + uname + '\t' + '年龄：' + age + '\t' + '性别：' + gender)
    </script>
</body>

</html>

JS数组取值-5

<!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>
</head>

<body>
    <script>
        // 数组取值案例
        // 需求：定义一个数组，里面存放星期一、星期二…… 直到星期日（共7天），在控制台输出：星期日

        let days = ['星期一', '星期二', '星期三', '星期四', '星期四', '星期五', '星期六', '星期日']
        // 控制台打印输出
        console.log(days[7]);
    </script>
</body>

</html>

JS综合案例-6

<!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>
    <script>
        // 需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
        // 分析：
        //     ①：需要输入3个数据，所以需要3个变量来存储 price num address
        //     ②：需要计算总的价格 total
        //     ③：页面打印生成表格，里面填充数据即可
        //     ④：记得最好使用模板字符串
        // 需要输入3个数据
        let price = prompt('请输入价格：')
        let num = prompt('请输入数量：')
        let address = prompt('请输入地址：')
        // 计算总的价格
        let total = price * num
        // 页面打印生成表格
        document.write(`
            <table>
                <tr>
                    <th>商品名称</th>    
                    <th>商品价格</th>    
                    <th>商品数量</th>    
                    <th>总价</th>    
                    <th>收货地址</th>    
                </tr>    
                <tr>
                    <th>华为P60pro</th>    
                    <th>${price}</th>    
                    <th>${num}</th>    
                    <th>${price}</th>    
                    <th>${address}</th>    
                </tr>    
            </table>
        `)
        console.log(NaN + 1);
    </script>
</body>

</html>

JS获取信息案例-7

<!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>
</head>

<body>
    <script>
        // 题目描述
        //   依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。
        // 题目提示
        //   通过prompt来弹出提示框，收集用户信息
        //   通过变量保存数据

        let uname = prompt('请输入用户的姓名：')
        let age = prompt('请输入用户的年龄：')
        let gender = prompt('请输入用的性别：')
        // 使用模板字符号输出信息
        console.log(`姓名： ${uname}  年龄：  ${age} 性别：  ${gender}`);
        // 使用字符串拼接输出信息
        console.log('姓名：' + uname + '年龄：' + age + '性别：' + gender);

    </script>
</body>

</html>

JS增加年龄案例-8

<!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>
</head>

<body>
    <script>
        // - 题目描述

        // 1、询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁

        // 2、增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了”

        //         - 题目提示
        //         - 通过prompt来弹出提示框，收集用户信息
        //         - 通过变量保存数据
        //         - 转换数据类型(需要预习第二天的数据类型转换哟)

        let age = prompt("请输入用户的年龄：")
        let newAge = Number(age) + 5
        alert(`据我统计，五年后，你可能${newAge}岁了`)
    </script>
</body>

</html>

JS综合案例2-计算银行卡余额-9

<!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 {
            width: 700px;
            height: 90px;
            margin: 0 auto;
        }

        table,
        th,
        td {
            border: 1px solid #333;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>2020年12月消费支出</h2>
    <script>

        // - 题目描述

        //   1、用户输入总的银行卡金额，依次输入本月花费的电费，水费，网费。

        //   2、页面打印一个表格，计算出本月银行卡还剩下的余额。

        // - 题目提示

        //   - 思路：

        //     1.我们需要5个变量：银行卡总额、水费、电费、网费、银行卡余额

        //     2.银行卡余额= 银行卡总额 – 水费 –电费  - 网费  

        //     3.第一步准备5个变量接受输入的数据

        //     4.第二步计算银行卡余额 

        //     5.第三步页面打印生成表格，里面填充数据即可。

        //     6.当然可以提前把html页面搭好。


        let totalPrice = parseInt(prompt('请输入银行卡余额：'))
        let waterBil = parseInt(prompt('请输入水费：'))
        let dianBil = parseInt(prompt('请输入电费：'))
        let netBil = parseInt(prompt('请输入网费'))
        let restPrice = totalPrice - waterBil - dianBil - netBil


        document.write(`<table>
                <tr>
                    <th>银行卡余额</th>
                    <th>水费</th>
                    <th>电费</th>
                    <th>网费</th>
                    <th>银行卡剩余-余额</th>
                </tr>
                <tr>
                    <td>${totalPrice}</td>    
                    <td>${waterBil}</td>    
                    <td>${dianBil}</td>    
                    <td>${netBil}</td>    
                    <td>${restPrice}</td>    
                </tr>
            </table>`)

    </script>
</body>

</html>

每日作业-JavaScript第01天
qq_62089165的博客
07-27 3127
每日JavaScript作业练习。
用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息 分析：
KXJ
04-23 2328
①：需要输入3个数据，所以需要3个变量来存储 price num address ②：需要计算总的价格 total ③：页面打印生成表格，里面填充数据即可 ④：记得最好使用模板字符串 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <m
JS进阶 --- day1
qq_63961708的博客
07-17 169
一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域.闭包作用: 封闭数据,提供操作,外部也可以访问函数内部的变量.:用简短的函数写法并且不绑定this,一般用于需要匿名的地方.语法: 赋值运算符 = 左侧的[] 用于批量声明变量."的,内存在不使用的时候就会被垃圾回收机制自动回收.3. 内存回收(局部变量的值, 不用会被自动回收掉)... 是语法符号,置于最末函数形参之前,用于获取。: 使用多余的参数. 在函数内使用。: 可以展开数组 , 在数组中使用。注意: 存在闭包, 将有些。
js基础-批量生成标签 100个小方框
姗姗的博客
07-08 2020
<!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-Co...
1.8 JavaScript 数组练习，输出星期天
小脆筒style的博客
04-22 1715
数组练习 定义一个数组，里面存放星期一，星期二…直到星期日（共7天）。请输出星期日！ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>输出星期日</title> </head> <body> <script> // 定义星期一到星期日 var a = ['星期一', '星期二', '星期三'
day13-节后复习1.zip
最新发布
02-20
3. **课堂练习+作业.txt**：这是一个纯文本文件，通常用于记录课堂上的练习题目或者课后作业。它可能包含了编程问题、逻辑思维题或者是对所学知识的应用挑战，帮助学生巩固在JavaScript和C语言课程中学到的知识。 ...
JavaScript课堂作业实践指南与技巧
同时，也应当在课后进行复习和总结，巩固当天学到的知识点。 由于文件信息中并未提供具体的编程代码或详细的技术内容，上述知识点的阐述更多是一种围绕“JavaScript”标签及“课堂作业和作业”描述的学习路径推测。...
web-day4.rar
03-30
【标题】"Web-Day4"通常指的是一个关于Web技术的培训课程或研讨会的第四天内容，可能涵盖了Web开发中的高级主题或特定技术的深入探讨...通过这个压缩包，学员可以在课后复习，进一步消化和巩固在Web-Day4中学到的知识。
FE21 JavaScript 第二天：Vendula 和 Bettina 的精彩演讲
资源摘要信息:"FE21-JS-DAY02-Vendula-Bettina" 文件相关知识点涵盖了在JavaScript学习或培训的第二天...在学习过程中，建议学生积极参与课堂讨论，完成所有的实践练习，并在课后进行复习和总结，以达到最佳学习效果。
基于Spring Cloud和Vue构建完整视频播放站教程
**Day15: 知识点串讲及课后作业** - 知识点复习：对整个课程的知识点进行总结和回顾。 - 课后作业：通过实际操作加深对知识点的理解。 通过以上内容的学习，学员将能够搭建一个功能完备的视频播放站，并掌握在实际...
自动化 打印送货单 自动计算金额 自动生成日期 订单号
03-22
目前所实现的功能为： 1、格式化需要打印的送货单 2、送货日期：自动显示系统当前日期 3、订单号：自动生成送货单序号[No.2011030001]，格式为["No."+"年"+"月"+"当月第N次打印"]，每次打开时后四位的值自动递增1，月初自动归0 4、客户名称：可从下拉列表中选择（需要按格式维护好客户信息表） 5、客户地址：根据客户名称自动填充（需按格式维护好客户信息表） 6、商品名称：可从下拉列表中选择或手动输入（需要按格式维护好商品信息表） 7、商品规格：可以从下拉列表中选择或手动输入（需要按格式维护好商品信息表） 8、商品金额：根据商品数量与单价自动填充 9、总金额大写及小写：根据所有商品金额自动填充
js综合案例
03-22
js综合案例 包含了一些简单常用的页面特效实现的方法。
零基础JavaScript入门（第四天）
程序研博客
02-18 1758
一、JavaScript 数组 1.数组的概念 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。 // 普通变量一次只能存储一个值 var num = 10; // 数组一次可以存储多个值 var arr = [1,2,3,4,5]; 2.创建数组 1.数组的创建方式 JS 中创建数组有两种方式： 利用 new 创建数组 利用数组字面量创建数组 2.利用 new 创建数组 var 数....
JS01 作业
m0_45270741的博客
11-29 1490
JS基础作业练习 依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。 增加年龄 - 题目描述 询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁 增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了” var age = parseInt(prompt('请输入用户年龄')); //prompt 取过来的值是字符型（默认） age += 5; alert('据我估计， 五年后， 你可能' + age + '岁了') ...
[JS]学习第一天
LYY
10-06 1189
作业一 依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。 作业二 1、询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁 2、增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了” 一、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
JavaScript笔记01
weixin_43599321的博客
11-10 931
JavaScript基础知识
JS 练习1
hzw的博客
09-07 1152
1 - 获取用户信息 题目描述： 依次询问并获取用户的姓名、年龄、性别，收集数据之后在控制台依次打印出来。 代码显示： <script> var username = prompt('请输入您的姓名：'); var sex = prompt('请输入您的性别：'); var age = prompt('请输入您的年龄：'); console.log('用户的姓名：' + username); console.log('用户的性别：' + sex); console.log('用户的年
JavaScript练习题
Wanan_J的博客
01-13 1701
JavaScript练习题：用于初学者练习的小作业。
JS:依次询问并获取用户的姓名、年龄、性别，并打印用户信息
qq_45975032的博客
08-01 4084
代码如下： <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>作业</title> <script> var myname = prompt('请输入你的姓名'); var age = prompt('请输入你的年龄'); var sex = prompt('请输入你的性别');
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值