web前端day06

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量30 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eternity_wsx/article/details/131709415
版权

01-函数

<body>
    <script>
        // parseInt('200px')
        // getSum(20, 30)


        function sayHi() {
            console.log('hello,function!')
        }


        // 函数必须进行调用，才会执行
        sayHi()
        let age = 21

        // 函数要有返回值，一定要添加return关键字，否则返回值为undefined
        function getSum() {
            // console.log(a + b)
            // return a + b
            // arguments  接收所有实参，并保存到arguements数组里
            console.log(arguments)
            let sum = 0
            console.log(age)
            for (let i in arguments) {
                sum += arguments[i]
            }
            return sum
        }
        let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5)

        console.log(e)

    </script>
</body>

 02-匿名函数

<body>
    <script>
        // function sayHi(fn) {
        //     fn()
        //     console.log('nihao')
        // }
        // function () {
        //     console.log('jiangjia')
        // }
        // sayHi(sayHello)


        // function sayHi()

        setInterval(function () {
            console.log('你真傻')
        }, 1000)

    </script>
</body>

03-函数表达式

<body>
    <script>
        // let a = function getSum() {
        //     console.log('jiangjia')
        // }
        // a()


        // 立即执行函数
        (function () { console.log('liqingyu') })()
        //    (function () { console.log('jiangjia') }())
    </script>
</body>

04-值传递、引用传递

<body>
    <script>
        // 值传递
        let a = 10
        let b = 20
        function change(x, y) {
            x = 30;
            y = 50;
        }
        change(a, b);
        alert(a + "--" + b)


        let arr = [1, 3, 4, 5]
        // 引用传递    传地址，发生改变
        function change2(a) {
            a.push(1000)
        }
        change2(arr)
        alert(arr)
    </script>
</body>

05-默认参数值

<body>
    <script>
        function getCir(r, PI = 3.14) {
            return PI * r * r
        }
        let a = getCir(3)
        console.log(a)
    </script>
</body>

06-箭头函数

<body>
    <script>
        // setInterval(function () {
        //     console.log('i love you')
        // }, 1000)
        setInterval(() => {
            console.log('i hate you')
        }, 1000)
    </script>

</body>

07-递归

<body>
    <script>
        // 9!  
        // 9*8!
        function jiecheng(n) {
            if (n === 1) {
                return 1
            } else {
                return n * jiecheng(n - 1)
            }
        }
        let a = jiecheng(10086)



        alert(a)



        // 练习：递归求1~n的和
        // 100+1~99的和 

        function he(n) {
            if (n == 1) {
                return 1
            } else {
                return n + he(n - 1)
            }
        }

        alert(he(5))
    </script>
</body>

08-数组遍历

<body>
    <script>
        let arr = ['a', 2, 3, 4, 5, 6]
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i])
        }
    </script>
</body>

09-字符串的常见方法

<body>
    <script>
        let str = new String()
        // let str = '你是who'
        console.log(str.split('w'))
        console.log(str.substring(2, 4))
        console.log(str.startsWith('你'))
        console.log(str.endsWith('你'))
        console.log(str.includes('w'))



    </script>
</body>

10-对象

<body>
    <script>
        // let arr = [160, 160]
        // 对象：无序的数据集合
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // console.log(obj)

        // 查找对象元素
        console.log(obj.uname)
        console.log(obj['age'])

        // let obj2 = new Object()

        let obj2 = {
            uname: '刘德华',
            age: 60,
            sing: function () {
                console.log('我要唱歌了')
            }
        }
        obj2.sing()




    </script>
</body>

11-对象的增删改查

<body>
    <script>
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // obj.uname
        // obj['age']

        // 改：对象.属性名
        obj.uname = 'GGBond'

        // 增加  对象.新属性名
        obj.sing = function () {
            console.log('sing~')
        }
        // delete 对象.属性名
        delete obj.gender
        console.log(obj)

    </script>
</body>

12-对象的遍历

<body>
    <script>
        let obj = {
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        for (let k in obj) {
            console.log(k)
            console.log(obj[k])
        }

    </script>
</body>

13-数组对象

<body>
    <script>
        let arrObj =
            [
                {
                    uname: 'zs',
                    age: 21
                },
                {
                    uname: 'jiangjia',
                    age: 33
                },
                {
                    uname: 'lisi',
                    age: 12
                }
            ]
        console.log(arrObj)
        // arrObj[1]['uname']
        for (let i = 0; i < arrObj.length; i++) {
            for (let k in arrObj[i]) {
                console.log(arrObj[i][k])
            }
        }
    </script>
</body>

14-Math的内置对象

<body>
    <script>
        console.log(Math.E)
        console.log(Math.PI)
        // Math.ceil向上取整

        console.log(Math.ceil(3.1415))
        // Math.floor向下取整
        console.log(Math.floor(3.1415))
        // Math.abs   绝对值
        console.log(Math.abs(-3.12))
        // pow 
        console.log(Math.pow(3.12, 10))
        // 开平方根
        console.log(Math.sqrt(9))

        // 随机数  
        // console.log(Math.floor(Math.random() * 11) + 2)
        let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2
        console.log(random)








    </script>
</body>

15-日期的内置对象

<body>
    <script>
        let date = new Date()
        // alert(date)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()

        let hh = date.getHours()
        let mm = date.getMinutes()
        let ss = date.getSeconds()


        let gg = date.getDay()
        alert(gg)

        document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)




        let a = 3.234364
        alert(a.toFixed(4))


    </script>
</body>

16-dom

<body>
    <button>提交</button>
    <script>
        const btn = document.querySelector('button')
        // console.dir(btn)
        console.log(typeof (btn))

    </script>
</body>

17-获取元素的方法

<body>
    <div>盒子</div>
    <ul>
        <li>1</li>
        <li class="two">2</li>
        <li>3</li>
        <li id="four">4</li>
    </ul>
    <script>
        // 1、通过css选择器获取             ('字符串')    :狂（嘎嘎）推荐
        const li2 = document.querySelector('.two')
        console.log(li2)
        const li = document.querySelector('li')
        console.log(li)
        // document.querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组
        const lis = document.querySelectorAll('li')
        console.log(lis)
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i])
        }

        const li3 = document.querySelector('ul li:nth-child(3)')
        console.log(li3)


        // 其他
        console.log(document.getElementsByTagName('div'))
        console.log(document.getElementById('four'))
        console.log(document.getElementsByClassName('two'))








    </script>
</body>

18-修改元素内容

<body>
    <div class="one">我是一个即将被更改的盒子</div>
    <div class="two">我是一个即将被更改的盒子</div>
    <script>
        // 1、获取元素
        const box1 = document.querySelector('.one')
        const box2 = document.querySelector('.two')
        console.log(box1)
        console.log(box2)
        // 2、操作
        box1.innerText = `<h1>jiangjia</h1>`
        box2.innerHTML = `<h1>chensongjie</h1>`

    </script>



</body>

19-随机点名案例

<body>
    <div>jiangjia</div>
    <script>

        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
        // 1、获取元素
        const box = document.querySelector('div')
        // 2、获取随机数   n-0    m---arr.length-1 
        let random = Math.floor(Math.random() * arr.length)
        // 3、改内容
        box.innerHTML = `${arr[random]}`

    </script>
</body>

20-修改元素属性

<body>
    <img src="../images/1.webp" alt="刘德华" title="刘德华">
    <input type="text" placeholder="wedjed" readonly>
    <button disabled>同意该协议</button>
    <script>
        // 1、获取元素
        const img = document.querySelector('img')
        const ipt = document.querySelector('input')
        const btn = document.querySelector('button')
        // 改元素属性   对象.属性=值
        img.src = "../images/2.webp"
        img.title = "我是个大帅哥"

        ipt.type = "password"
        ipt.placeholder = "请输入用户名"
        ipt.readOnly = false
        btn.disabled = false

    </script>
</body>

21-修改元素样式属性

<style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: rgb(207, 39, 67);
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="box1">1111</div>
    <div class="box2 box1"></div>
    <script>
        // 1、获取元素
        const box2 = document.querySelector('.box2')
        const div = document.querySelector('.box1')
        // 2、通过style修改样式
        div.style.width = '500px'
        div.style.fontSize = '16px'
        div.style.backgroundColor = 'pink'
        // 3、通过添加类名 calssName会将原来的类名删除掉，不建议使用

        // box2.className = 'box1'

        // classlist.add（'类名'）追加
        box2.classList.add('box1')
        // box2.classList.remove('box1')    移除
        box2.classList.toggle('box1')        //切换：有则删除，没有则添加





    </script>
</body>

22-定时器

<body>
    <script>
        // setTimeout\setInterval   定时器
        // setTimeout  :某段代码或者函数在多久后执行
        // setTimeout(code||function,time(ms))
        // 返回值是一个整数，代表定时器编码
        // let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)
        // console.log(timer)
        // let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 1000)
        // console.log(timer2)
        //    传的是函数名 
        // let timer3 = setTimeout(
        // fn, 3000)
        // function fn() {
        //     console.log('6666666')
        // }

        // setTimeout(函数或一段代码，延迟时间，实参……)
        // let timer4 = setTimeout(function (a, b) {
        //     console.log(a + b)
        // }, 2000, 1, 4)

        let obj = {
            uname: 'gouxin',
            a: 3,
            b: 4,
            sum: function () {
                console.log(this)
                console.log(this.a)

            }
        }
        obj.sum()
        // setTimeout(obj.sum, 1000)
        // 定时器的第一个参数如果是对象方法，this不再指向对象，指向全局环境
        // setTimeout(function () { obj.sum() }, 1000)

        let a = setTimeout(obj.sum.bind(obj), 1000)
        clearTimeout(a)



        // setInterval  间隔一段时间，将代码或者函数执行一次
        let timer = setInterval(' console.log(\'6666666\')', 1000)
        clearInterval(timer)
        let timer2 = setInterval(function (a, b) {
            console.log(a + b)
        }, 1000, 2, 3)
        clearInterval(timer2)
    </script>
</body>

23-随机抽奖案例

<style>
        .wrapper {
            width: 840px;
            height: 420px;
            background: url(./images/bg01.jpg) no-repeat center / cover;
            padding: 100px 250px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <strong>年会抽奖</strong>
        <h1>一等奖：<span id="one">???</span></h1>
        <h3>二等奖：<span id="two">???</span></h3>
        <h5>三等奖：<span id="three">???</span></h5>
    </div>

    <script>
        let arr = ['缑欣', 'jiangjia', 'everyone', 'zhangsan']
        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N
        }
        let random = getRandom(1, 5)
        alert(random)
    </script>



</body>

作业：

代码：

<!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>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br/>
    <button class="btn" disabled>我已经阅读用户协议(5)</button>
    <script>
        const btn = document.querySelector('.btn')
        let i = 5
        let n =setInterval(function()
        {
            i--
            btn.innerHTML=`我已经阅读用户协议(${i})`
            if(i===0){
                clearInterval(n)
                btn.disabled = false
                btn.innerHTML ='同意'
            }
        },1000)
    </script>
</body>
</html>

结果：

 

Eternity_wsx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HY的Web前端周记 Day1
qq_51167539的博客
03-14 2399
HY的Web前端开发周记 Day1 引子 2021.3.04，信息管理创新实践课程开始学习。主要了解了关于HTML、CSS、JavaScript 的基本概念及其用途，并对html基础元素、属性有了一定的了解。运用了HBuilder作为开发环境，在Hbulider上面实践了我们的第一个专属网页：个人自我介绍页。以下是我对本次课程学习的总结。 提示：以下是本篇文章正文内容，下面案例可供参考 一、HTML、CSS、JavaScript HTML 超文本标记语言（英语：HyperText Markup Langu
Web前端基础day04.zip
08-19
在Web前端开发中，布局和定位是至关重要的概念，它们决定了网页元素的排列方式和位置。今天我们将深入探讨五个主要的定位技术：静态定位、相对定位、绝对定位、固定定位以及浮动定位。这些定位方法都是CSS（层叠样式...
快速学习web前端day1
javfen的博客
02-03 93
自主学习web前端
web前端day01
ClearDream__的博客
04-27 1270
Web前端-HTML HTML作用： 负责搭建页面结构和内容 （盖房子） 学习HTML主要学习的就是有哪些标签 文本相关标签 h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗 p 段落标签, 特点: 独占一行,自带上下间距 hr 水平分割线 br 换行 b 加粗 i 斜体 u 下划线 s 删除线 列表标签 无序列表: ul和li 组合 unordered list list item 列表项 有序列表: ol和li 组合 ordered list 列表嵌套: ...
web前端day05
ClearDream__的博客
04-27 1060
DOM文档对象模型 包含和页面元素相关的内容 通过选择器获取页面中的元素对象 let 元素对象 = document.querySelector("选择器") 获取和修改元素的文本内容 元素对象.innerText = "xxx"; 修改文本内容 元素对象.innerText 获取文本内容 获取和修改input控件的值 控件对象.value="xxx"; 修改 控件对象.value 获取 创建元素对象 let 元素对象 = document.createElement("标签名"); 添加..
web前端期末大作业（附有源码）
m0_74087268的博客
12-28 9386
这里使用的是Visual Studio Code（VSCode）设计的Web前端作业，包括了HTML、CSS和JavaScript。选用VSCode作为开发环境和工具来说有诸多优势之处，也给设计前端时带来了诸多益处。首先，是VSCode智能代码提示和补全。VSCode具备强大的代码提示功能，能够根据输入和上下文提供智能建议，减少拼写错误和语法问题，提高编码效率。其次，VSCode拥有丰富的扩展生态系统。
web前端基础知识
qq_43375584的博客
02-28 6169
HTML&CSS基础经典版 HTML：结构（页面元素和内容） css：表现（网页元素的外观和位置等页面样式） 行为：JavaScript：行为（网页模型定义与页面交互） 排版标签 排版标签标题标签：h系列标签 重要程度依次递减 特点：独占一行、h1-h6文字逐渐减小 段落标签：p 特点：段落之间存在间隙、独占一行 换行标签： 水平分割线： 文本格式化标签 场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等 语义：突出重要
Day21 - Web前端概述
Laic Zhang的博客
05-04 2055
Day21 - Web前端概述 HTML简史 1991年10月：一个非正式CERN（欧洲核子研究中心）文件首次公开18个HTML标签，这个文件的作者是物理学家蒂姆·伯纳斯-李，因此他是万维网的发明者，也是万维网联盟的主席。 1995年11月：HTML 2.0标准发布（RFC 1866）。 1997年1月：HTML 3.2作为W3C推荐标准发布。 1997年12月：HTML 4.0作为W3C推荐标...
WEB前端开发练习代码
tiantianzs的博客
01-11 6101
<!DOCTYPE html> <!-- HTML5申明 --> <html lang="zh"> <!-- 表示本网站为中文网站 --> <!-- 头部，定义网页标题和字体样式等 --> <head> <meta charset="UTF-8"> <!-- 定义网页为UTF-8编码 --> <title>Web前端开发技术初步应用</title> &l.
web前端之文本
m0_75008371的博客
07-10 1471
文本，flex问题，float问题，2D，3D，动画
Web前端作业day1
elementqueen的博客
10-24 570
Web前端作业day1
Web前端基础day02.zip
08-12
CSS（Cascading Style Sheet）:层叠样式表,作用:是用于美化页面的 ... 内联样式:在标签的style属性中添加样式代码,不可以复用 使用较少 内部样式: 在head标签里面添加style标签 标签体内写样式代码，可以在当前页面复用...
Web前端基础day03.zip
08-19
在Web前端开发中，盒子模型（Box Model）是理解页面布局和元素尺寸计算的关键概念。这个模型描述了HTML元素如何占据空间，包括元素的内容区域、内边距、边框和外边距。让我们深入探讨一下这些组成部分以及它们如何...
Web前端基础day01.zip
08-09
CSS 学习如何美化页面 (装修) JavaScript 学习如何给页面添加动态效果 jQuery JS语言框架,简化原生JS开发 Bootstrap 前端框架对html/css/JavaScript/jQuery进行封装,目的是提高前端页面的开发效率
Web前端.DAY1.mp4
05-16
Web前端.DAY1.mp4
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 153
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 141
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 819
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 968
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
web前端实现制作课程表
06-09
{ name: '数学', day: 'tuesday', start: 3, end: 4, location: '教室B' }, // 其他课程的数据 ]; // 遍历数据，将课程信息填充到表格中 courses.forEach(course => { for (let i = course.start; i ; i++) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值