JS学习记录（BOM部分）

BOOM部分

Screen

<html lang="en">
<head><meta charset="UTF-8"><title>Screen</title>
</head>
<body></body>
<script>console.log(screen.width);console.log(screen.height);console.log(screen.availWidth);console.log(screen.availHeight);</script>
</html>

结果图：

Location

<html lang="en">
<head><meta charset="UTF-8"><title>Location</title>
</head>
<body>
<button οnclick="assign()">加载新页面</button>
<button οnclick="replace()">替换页面</button>
<button οnclick="reload1()">刷新当前页面</button>
<button οnclick="reload2()">彻底刷新当前页面</button>
</body>
<script>function assign() {/*可以返回老页面*/location.assign("http://www.baidu.com");}function replace() {/*不能返回老页面*/location.replace("http://www.baidu.com");}function reload1() {location.reload();}function reload2() {location.reload(true);}</script>
<!--<script>console.log(location.href);/*完整的url*/console.log(location.protocol);/*协议*/console.log(location.port);/*端口号*/console.log(location.hostname);/*主机名称*/console.log(location.pathname);/*路径名称*/console.log(location.search);/*？后的数据部分*/
</script>-->
</html>

结果图：

History对象<html lang="en">
<head><meta charset="UTF-8"><title>History对象</title>
</head>
<body>
<a href="Demo40.html">Demo40</a><button οnclick="forward()">下一个页面</button>
</body>
<script src="../../js/history.js"></script>
</html>

结果图：

Navigator对象<html lang="en">
<head><meta charset="UTF-8"><title>Navigator</title>
</head>
<body></body>
<script>console.log(navigator.appName);console.log(navigator.appVersion);console.log(navigator.userAgent);console.log(navigator.platform);
</script>
</html>

定时器<html lang="en">
<head><meta charset="UTF-8"><title>定时器</title>
</head>
<body>
<button οnclick="show()">五秒后显示HelloWord</button>
<button οnclick="cancelShow()">取消显示HelloWord</button>
<button οnclick="cancelShow2()">停止显示HelloWord</button>
</body>
<script>//     setTimeout  默认情况下，只会执行一次。var hello;function show() {hello = setTimeout(function () {alert("HelloWord!");}, 500);}function cancelShow() {clearTimeout(hello);}
</script>
<!--<script>//    setInterval 根据指定的时间，循环执行。var hello2 = setInterval(function () {console.log("HelloWord!"); }, 1000); function cancelShow2() { clearTimeout(hello2); } </script>--> </html>

结果图：

confirm(对话框中显示的纯文本)

<html lang="en">
<head><meta charset="UTF-8"><title>confirm(对话框中显示的纯文本)</title>
</head>
<body></body>
<script>var flag=confirm("确认样删除此信息吗？");if(flag){alert("删除成功");}else {alert("你取消了删除");}/*注意confirm与prompt和alert的区别*/
</script>
</html>

结果图：

转载于:https://www.cnblogs.com/lizuowei/p/7282678.html

JS学习记录（BOM部分）相关推荐

Cytoscape.js学习记录
记录学习Cytoscape.js的过程官方教程 https://js.cytoscape.org/ 另有一篇别人的博文分享:cytoscape.js基础篇https://blog.csdn.net/ ...
我的three.js学习记录（一）
在之前因为项目需要使用WebGL技术做网页应用,但是苦于自己没有接触,只是使用过OpenGL.然后接触到了thre.js这个第三方库之后我突然心情很愉快,这将节省我很多时间. 过了这个项目之后,就再也 ...
require.js学习记录
1.简介官方对requirejs的描述: RequireJS is a JavaScript file and module loader. It is optimized for in-brows ...
JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
Auto.js学习记录
软件选择:通过在CSDN的查找发现了几款手机自动化脚本软件,例如:按键精灵.Auto.js等等.最后我选择了Auto.js .Auto.js共有三个版本:4.1.1版本.7.0.0版本和8.0.0版本 ...
mock.js学习记录
mock介绍为什么要使用mock.js呢?在系统的开发中,做前端的同学经在工作中常常面临一个问题:因为后端的接口迟迟不能做好而无法进行页面的调试,尤其在根据后端的数据做数据的动态展示的时候,这种情况 ...
Node.JS 学习记录(02)
Node.js EventEmitter Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js 里面的许多对象都会分发事件:一个 net.Server 对象会在 ...
JS学习之BOM | client | scroll
元素可视区Client系列 client就是客户端,使用client系列的相关属性来获取元素可视区的相关信息,通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等 client系列 ...
【学习记录2】数组里的字符串转换成数字或者把数字转换成字符串
js学习记录之数组里纯数字和纯字符串之间的转换 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(String); //结果: ['1', '2', '3' ...

JS学习记录（BOM部分）

JS学习记录（BOM部分）相关推荐

最新文章

热门文章