6.18 js学习笔记

2023-11-28 08:38

文章标签 学习笔记 js 6.18

本文主要是介绍6.18 js学习笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

js浏览器对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><button id="btn" onclick="stopTime()">按钮</button><p id="ptime"></p>
<script>var mytime =setInterval(function () {getTime();},1000);function getTime() {var d=new Date();var t=d.toLocaleTimeString();document.getElementById("ptime").innerHTML=t;}function stopTime() {clearInterval(mytime)}
</script>
</body>
</html>

在这里插入图片描述

按下按钮后时间停止

在这里插入图片描述
样例

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body onload="myWin()"><button id="btn" onclick="stopWin()">按钮</button><p id="ptime"></p>
<script>var win;function myWin() {alert("hello");win=setTimeout(function () {myWin();},3000);}//3秒调用一次function stopWin() {clearTimeout(win);}</script>
</body>
</html>

在这里插入图片描述

每三秒弹一次，按下按钮后停止执行

history对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form><input type="text" id="username"></form><button id="btn" onclick="safe()">按钮</button><script>function safe() {var name=document.getElementById("username").value;if(name=="hello"){history.go(-1);//返回上个页面}else {alert("输入错误");}}</script>
</body>
</html>

ceshi代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="js%20history对象.html">跳转</a>
</body>
</html>

在ceshi界面点击跳转后输入hello 可跳转回ceshi 否则弹出输入错误

在这里插入图片描述

否则

在这里插入图片描述

location对象

在这里插入图片描述

样例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>location对象</title>
</head>
<body>
<button id="btn" onclick="getLoc()">按钮</button>
<p id="ptime"></p><script>function getLoc() {// document.getElementById("ptime").innerHTML = window.location.hostname;// document.getElementById("ptime").innerHTML = window.location.pathname;// document.getElementById("ptime").innerHTML = window.location.href;location.assign("写一个网址来跳转")；}</script>
</body>
</html>

Screen对象

在这里插入图片描述

样例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Screen</title>
</head>
<body><button id="btn" onclick="">按钮</button><p id="ptime"></p><script>document.write("可用高度"+screen.availHeight+" 可用宽度"+screen.availWidth);document.write("高度"+screen.height+" 宽度"+screen.width);</script>
</body>
</html>