Web 前端 Day 6

这篇具有很好参考价值的文章主要介绍了Web 前端 Day 6。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

函数

Web 前端 Day 6,javascript,前端,vue.js

<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]  将arguments中的实参求和加到一起
​
    }  return sum
      }
    let e = getSum(1,2,3,4,5)
    // let e = getSum(1,2,3,4,5)   getSum求和函数
    console.log(e)
   </script>

 文章来源地址https://www.toymoban.com/news/detail-558730.html

匿名函数

<body>
    <script>
        // function sayHi(fn) {
        //     fn()
        //     console.log('nihao')
        // }
        // function () {
        //     console.log('jiangjia')
        // }
        // sayHi(sayHello)
​
​
        // function sayHi()
​
        setInterval(function () {
            console.log('你真傻')
        }, 1000)
​
    </script>
</body>

函数表达式

<body>
   <script>
    let a = function getSum() {
        // console.log('jiangaji')  打印到了控制台
    }
    a()
    // 立即执行函数
    (function()   {console.log('bjzdjsj')})()
    (function(){console.log('jiangji')})()
   </script>
</body>

值传递、引用传递

<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>

默认值函数

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

箭头函数

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

递归

<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>

数据遍历

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

字符串的常见方法

<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>

对象

<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>

对象的增删改查

<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>

随机抽奖案例

<title>年会抽奖</title>
    <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>

对象的遍历

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

    </script>
</body>

数组对象

<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>

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>

日期内置对象

<script>
  let date = new 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}`)


   </script>
</body>

dom

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

    </script>
</body>

获取元素的方法

<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>

修改元素内容

<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>

随机点名案例

<body>
    <div>jaingjai</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>

修改元素属性

<body>
   <img src="./images/images/周迅.webp" alt="周迅">
   <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('btn')
    // 2.改元素属性
    img.src = "./images/images/周迅.webp"
    img.title = "我按尽可能竞选"
   
    ipt.type = "password"
    ipt.placeholder = "请输入用户名"
    ipt.readOnly= false  
    btn.disabled= false

   </script>
  
</body>

Web 前端 Day 6,javascript,前端,vue.js

 

Web 前端 Day 6,javascript,前端,vue.js

 

修改元素样式属性

<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>

定时器

<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>

到了这里,关于Web 前端 Day 6的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端JavaScript入门-day08-正则表达式

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 介绍 语法  元字符  边界符  量词  字符类: 修饰符 正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象,通常用

    2024年02月13日
    浏览(60)
  • 跟着pink老师前端入门教程(JavaScript)-day02

    1、什么是变量 白话:变量就是一个装东西的盒子 通俗:变量是用于存储数据的‘ 容器 ’,通过 变量名 获取数据,甚至数据可以修改 注意: 变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。 2、变量在内存中的存储 本质

    2024年02月20日
    浏览(42)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(60)
  • Web前端-JavaScript

    目录 1 概述 2 HTML嵌入JS代码三种方式 2.1 第一种方式 2.2 第二种方式 2.3 第三种方式 3 变量 4 数据类型 4.1 概述 4.2 Number数据类型  4.3 几个值得注意的函数 4.4 Boolean数据类型  4.5 String数据类型 4.6 关于Object类型 4.7 NaN、undefined、null的区别 4 函数 5 事件 5.1 JS中有哪些常用的事件

    2024年02月09日
    浏览(60)
  • Web 前端 Day 6

         

    2024年02月15日
    浏览(27)
  • web 前端 Day 3

    例如 效果图   效果图   效果图   效果图   基础选择器 基本选择器 选中指定标签进行一些效果上的修改 标签选择器 类选择器 ID选择器 #box1 #后加id名 通配符选择器 包含选择器 复合选择器 属性选择器 效果图  

    2024年02月13日
    浏览(27)
  • Web前端 Day 5

    使得代码可以具有某些行为 效果图   变量不能重复声明 js是弱数据类型语言 模版字符串    

    2024年02月16日
    浏览(26)
  • Web前端 Day 2

    块元素 独占一行 宽、高、内外边距可以设置 eg. div 行内元素 一行可以存在多个 eg. span 行内块元素 一行可以存在多个 宽、高、内外边距可以设置 是否独占一行 跨行 rowspan 跨列 colspan   详情标签 效果图   让本不能tab遍历获取焦点的元素可以获取 表单的基本结构 网页交互区

    2024年02月13日
    浏览(31)
  • Web前端 Javascript笔记3

     内存中的生命周期         1、内存分配         2、内存使用(读写)         3、内存回收,使用完毕之后,垃圾回收器完成         内存泄漏:该回收的,由于某些未知因素,未释放,叫做内存泄漏 栈:数据存在其中会自动释放 堆:对象,根据程序员的操作来决定释

    2024年04月15日
    浏览(46)
  • web前端框架Javascript之JavaScript 异步编程史

    早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总

    2024年02月14日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包