JavaScript基础总结（3）

总结一下最近学习的内容。
一、bom对象
bom指的是浏览器对象模型。
1、window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

window.screen.availWidth - 可用的屏幕宽度
window.screen.availHeight - 可用的屏幕高度
ocation.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

history.back() - 后退
history.forward() - 前进
history.go(1)-前进
history.go(-1)-后退

这些都是window对象的操作语句。

2、弹窗
弹框经常用于确保用户可以得到某些信息。当弹框出现后，用户需要点击确定按钮才能继续进行操作
例如：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    alert("你好");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="显示弹框">
</body>
</html>

在这里插入图片描述
3、计时事件

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

setInterval()中的第一个参数是函数，第二个参数是间隔的毫秒数。
例如：setInterval(“countDown()”,1000);
停止运行setInterval()的方法为：clearInterval() ；

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。第二个参数指示从当前起多少毫秒后执行第一个参数。
例如：myVar=setTimeout(function(){alert(“Hello”)},3000);
停止方法为：clearTimeout() ；

二、拖拽事件
ondrag ：该事件在元素正在拖动时触发
ondragend ：该事件在用户完成元素的拖动时触发
ondragenter ：该事件在拖动的元素进入放置目标时触发
ondragleave ：该事件在拖动元素离开放置目标时触发
ondragover ：该事件在拖动元素在放置目标上时触发
ondragstart ：该事件在用户开始拖动元素时触发
ondrop ：该事件在拖动元素放置在目标区域时触发

注意：在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。
拖拽应用小例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .block {
            width: 400px;
            height: 200px;
            border: 2px solid #650000;
            position: absolute;
        }
        #info {
            width: 200px;
            height: 100px;
            border: 1px solid #000;
            position: absolute;
        }
    </style>
</head>
<body>
<img id="info" style="left:40%;top: 10%;" src="./img/bd_logo1.png" draggable="true" alt=""/>

<div class="block" style="left:10px;bottom:10px">

</div>
<div class="block" style="left:550px;bottom:10px">

</div>
<div class="block" style="right:10px;bottom:10px">

</div>
<script>
    document.ondragstart = function (e) {
        console.log("开始拖动：" + e.target.id);
        e.dataTransfer.setData("key", e.target.id);
    }
    document.ondrag = function (e) {
    }
    document.ondragend = function (e) {
        console.log("拖动完成：" + e.target);
    }
    document.ondragenter = function (e) {
        e.target.style.border="1px dashed red";
    }
    document.ondragover = function (e) {
        e.preventDefault();
    }
    document.ondragleave=function (e){
        e.target.style.border="";
    }
    document.addEventListener("drop", function (e) {
        var id = e.dataTransfer.getData("key");
        e.target.appendChild(document.querySelector("#" + id));
        e.target.style.border="";
    });
</script>
</body>
</html>

三、总结
这几天进行的是逻辑训练，做一些小游戏来锻炼逻辑，主要还是对JavaScript的记忆和运用，这是一个瓶颈期，坚持住了，后面就能轻松一些了。

Always_Love

发布了29 篇原创文章 · 获赞 1 · 访问量 575

私信关注

JavaScript基础总结（3）

猜你喜欢