找回密码
当前位置：前端开发者 > JavaScript > 正文

javascript经典实例（三）

2018-12-25 分类：JavaScript 阅读(832) 评论(0)
web前端开发必备框架
ios的前端页面开发框架
app开发的前端框架有哪些问题

1.进度条
html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>进度条</title>
        <style type=”text/css”>
            #main {
                width: 100px;
                height: 30px;
                background: #ddd;
                overflow: hidden;
            }
            #progress {
                width: 1%;
                height: 30px;
                background: #aaf;
            }
        </style>
    </head>
    <body>
        <div id=”main”><div id=”progress”></div></div>
        <button id=”bid”>start</button>
        <script type=”text/javascript”>
            var bid = document.getElementById(‘bid’)
            var progress = document.getElementById(‘progress’)
            bid.onclick = function() {
                pro = 0
                speed = 1 //速度
                sobj = setInterval(function() {
                    pro += speed
                    if (pro >= 50) {
                        speed = 5 //进度大于50%的时候加快速度
                    }
                    if (pro >= 100) {
                        clearInterval(sobj)
                    }
                    progress.style.width = pro + ‘%’
                }, 100)
            }
        </script>
    </body>
</html>

2.网页中的弹力球特效
html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>弹力球广告特效</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
                border: 0;
            }
            #main {
                position: absolute;
                top: 0;
                left: 0;
                cursor: pointer;
            }
            #img {
                width: 100px;
                height: 120px;
                background: #faa;
            }
        </style>
    </head>
    <body>
        <div id=”main”><div id=”img”></div></div>
        <script type=”text/javascript”>
            var main = document.getElementById(‘main’)
            sy = 0 //y轴
            speedy = 2 //y轴速度
            sx = 0 //x轴
            speedx = 2 //x轴速度
            imgh = 120 //img高度
            imgw = 100 //img宽度
            winh = document.documentElement.clientHeight //可视区域高度
            winw = document.documentElement.clientWidth //可视区域的宽度
            function start() {
                sobj = setInterval(function() {
                    sy += speedy
                    sx += speedx
                    //y轴运动
                    if (sy <= 0) {
                        speedy = -speedy
                        console.log(‘2:’ + speedy)
                    }
                    if (sy >= winh – imgh) {
                        speedy = -speedy
                        console.log(‘1:’ + speedy)
                        sy = winh – imgh
                    }
                    //x轴运动
                    if (sx <= 0) {
                        speedx = -speedx
                        console.log(‘4:’ + speedx)
                    }
                    if (sx >= winw – imgw) {
                        speedx = -speedx
                        console.log(‘3:’ + speedx)
                        sx = winw – imgw
                    }
                    main.style.top = sy + ‘px’
                    main.style.left = sx + ‘px’
                }, 10)
            }
            start()
            main.onmouseenter = function() {
                clearInterval(sobj)
            }
            main.onmouseleave = function() {
                start()
            }
        </script>
    </body>
</html>

3.Screen对象（获取设备分辨率调用样式）
html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>Screen对象</title>
        <link rel=”stylesheet” type=”text/css” href=”” id=”cssid” />
    </head>
    <body>
        <div id=”main”>
            <h1>01</h1>
            <h1>02</h1>
            <h1>03</h1>
            <h1>04</h1>
            <h1>05</h1>
        </div>
        <script>
            cssid = document.getElementById(‘cssid’)
            x = screen.width
            y = screen.height
            console.log(x + ‘*’ + y)
            switch (x) {
                case 320: //当分辨率为320px时
                    cssid.href = ‘320.css’
                    break
                case 375: //当分辨率为375px时
                    cssid.href = ‘375.css’
                    break
            }
        </script>
    </body>
</html>

//注：这边需要测试的朋友自己写2个样式检验
4.判断浏览器类型
html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>判断浏览器类型</title>
    </head>
    <body>
        <script type=”text/javascript”>
            info = navigator.userAgent
            pos = info.search(/firefox/i)
            if (info.search(/firefox/i) >= 0) {
                type = ‘firefox’ //火狐
            } else if (info.search(/msie/i) >= 0) {
                type = ‘ie’ //IE
            } else if (info.search(/chrome/i) >= 0) {
                type = ‘chrome’ //谷歌
            }
            alert(type)
        </script>
    </body>
</html>
网站前端 快速开发框架下载
移动前端开发框架有哪些
前端开发框架react怎么用
赞(0)
前端开发者 » javascript经典实例（三）
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论