事件小案例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46673313/article/details/108773672

打字机

<body>
    <div id="app"></div>
    <script>
        let app = document.querySelector('#app')

        let str = '大家好，我叫***，我是一个单身的程序猿，我很惨，我没有女朋友,大家救救我吧'
        let i = 0
        setInterval(() => {
            if (i < str.length) {
                app.innerHTML += str[i] //依次拼接每个字符
                i++
            }
        }, 200)
        console.log(app.outerHTML); //包含标签本身


        app.style.color = 'red'//设置行内样式
        app.style.fontSize = '30px'
        app.style.background='#ccc'

        app.classList.add('active')
        app.classList.add('item')
        app.classList.remove('item')

         app.id='zzz'
         app.setAttribute('age',20)//添加自定义属性
         console.log(app.getAttribute('age'));//获取属性
    </script>
</body>

轮播图

<body>
    <img src="http://p1.music.126.net/zmeAvWkaPlp16k1wpnHH3A==/109951165322713805.jpg?imageView&quality=89" alt="">
    <script>
        let img = document.querySelector('img')
        let imgs = [
            'http://p1.music.126.net/zmeAvWkaPlp16k1wpnHH3A==/109951165322713805.jpg?imageView&quality=89',
            'http://p1.music.126.net/f9iDsREE1Q7MTadOAPNZgw==/109951165323528110.jpg?imageView&quality=89',
            'http://p1.music.126.net/Io5ltq3c4u_taOgpmD18Yw==/109951165322805815.jpg?imageView&quality=89',
            'http://p1.music.126.net/-nvT2M33VFx2BFYXX2cpTg==/109951165322728977.jpg?imageView&quality=89',
            'http://p1.music.126.net/y1Vy5_1BSnwmIfmMGSISzg==/109951165322718980.jpg?imageView&quality=89'
        ]
        let i = 0

        setInterval(() => {
            i++
            if (i === 5) i = 0
            img.src = imgs[i]

        }, 2000)
    </script>
</body>