前端开发学习Day17

169 阅读1分钟

第17天,尝试用学到的函数相关知识做东西。原本准备做一个计算器的,后来觉得这个有点困难,于是从最基础的做吧!
第一个例子做的是图片轮播效果,结果出来还是满意的,虽然做的比较慢,更多的是胆怯,害怕自己做错,不敢写。我觉得自己现在有点畏畏缩缩的,没有初学的那几天胆子大了,我要反思一下这个问题。以下是图片轮播的代码:


<!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-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div style="width:600px;height:400px;border: 5px solid red;">
        <img style="width: 100%;height: 100%;" src="1.jpg" id="img">
    </div>
    <button onclick="changeImg()">点击更换</button>
    <script>
        var i = 2
        function changeImg() {
            document.getElementById("img").src = i + '.jpg'

            if (i == 10) {
                i = 1
                return
            }
            i++
        }

        setInterval(changeImg, 2000)
    </script>
</body>

</html>

第二个例子是做关闭网页弹出窗口的,写了一晚上也没想出来怎么写JS部分,有点难过,而且我发现自己把CSS的内容忘了……这对我来说,简直就是个晴天霹雳,于是我又花时间把它找回来,唉!由此可见,做开发的,不能懒,尤其是我这种初学者,深刻反思中。明天继续做……