js BOM对象 练习题

js BOM对象 练习题

在屏幕上显示系统时间,每秒更新。

 <h1></h1>
    <script>
        //在屏幕上显示系统时间,每秒更新。
        var hh=document.querySelector('h1');//得到页面上的h1标签
        setInterval(function(){//间隔函数 每过1秒得到当前时间,写在页面上
         var date=new Date();//得到当前系统时间
         var y=date.getFullYear();//年
         var Month=date.getMonth()+1;//月
         var d=date.getDate();//日
         var h=date.getHours();//时
         var m=date.getMinutes();//分
         var s=date.getSeconds();//秒
         var time=y+'年'+Month+'月'+d+'日 '+h+':'+m+':'+s//显示格式
         hh.innerHTML=time//将时间写在h1里
        },1000)
    </script>

anli1

在页面中有一个button和一个文本输入框,要求:点击button后,在百度搜索文本输入框内的内容

//在页面中有一个button和一个文本输入框,要求:点击button后,在百度搜索文本输入框内的内容
    <input type="text">
    <button>搜索</button>
    <script>
        document.querySelector('button').onclick=function(){//页面上button的点击事件
            var shuru=document.querySelector('input').value;//得到输入框的值
            location.assign('https://www.baidu.com/s?wd='+shuru);//去百度搜索
            //location.href='https://www.baidu.com/s?wd=' + shuru;
        }
    </script>

anli2
js BOM对象 练习题_第1张图片

广告弹出自动关闭(效果见页面)

//广告弹出自动关闭(效果见页面)
<div style="width: 500px;height:500px;background: brown;display: none; font-size: 30px;text-align: center;line-height: 500px">
    </div>
    <script>
        var div = document.querySelector('div');//得到页面上的div
        window.onload = function () {//当页面加载完之后执行此函数
            setTimeout(function () {//延时函数 1s之后执行
                div.style.display = 'block'//显示div
            }, 1000)
            var i = 5;
            var id = setInterval(function () {//间隔函数,每过1秒执行一次
                if (i === 0) {//判断秒数
                    clearInterval(id);//退出间隔函数
                    div.style.display = 'none'//隐藏页面上的div
                }
                div.innerHTML = ('自动关闭倒计时' + i);//在页面的div显示内容
                i--;
            }, 1000)

        }
    </script>

js BOM对象 练习题_第2张图片

返回顶部

<body style="height: 5000px">//出现滚动条
    <div style="position: fixed;right:30px;bottom:30px;background: chocolate;width: 200px;height: 200px;display: none">
    </div>
    <script>
        //返回顶部
        var div = document.querySelector('div');//得到页面上的div

        window.onscroll = function () {//滚动函数  需要滚动条
            var scrollTop = document.body.scrollTop ?
                document.body.scrollTop :
                document.documentElement.scrollTop//scrollTop为窗口滚动的位置。
                //由于窗口滚动的位置存放在body、html中的其中一个值中,但不知是那个值
                //所以用三木运算符判断
            if (scrollTop > 1000) {//判断如果大于1000显示div
                div.style.display = 'block'
            } else {
                div.style.display = 'none'//否则隐藏
            }
        }
        var id
        div.onclick = function () {//div的点击事件
            // document.body.scrollTop=0;
            // document.documentElement.scrollTop=0;
            id = setInterval(function () {//间隔函数 用来显示出过度的效果
                var scrollTop = document.body.scrollTop ?
                    document.body.scrollTop :
                    document.documentElement.scrollTop//同上一样
                if (scrollTop === 0) {//如果为0 删除间隔函数
                    clearInterval(id);
                }
                document.body.scrollTop = scrollTop - 200;//每一次减200 这里是改窗口位置的所以不能用
                //scrollTop-=200
                document.documentElement.scrollTop = scrollTop - 200;//每一次减200
                //上面两个值是因为,还是不知道那个里有值
            }, 50)
        }
        window.onmousewheel = function () {//鼠标滚轮事件
            clearInterval(id);//鼠标滚轮滚动时删除间隔函数
        }
    </script>
</body>

你可能感兴趣的:(js,学习笔记)