window对象
一个浏览器窗口就是一个window对象；
window对象是最核心的对象，document对象、history对象等都是window对象的子对象。
-
window对象方法
方法 说明 open()、close() 打开窗口、关闭窗口 resizeBy()、resizeTo() 改变窗口大小 moveBy()、moveTo() 移动窗口 setTimeout()、clearTimeout() 设置或取消“一次性”执行的定时器 setInterval()、clearInterval() 设置或取消“重复性”执行的定时器 -
定时器
什么叫定时器？我们可以看到很多网站首页有一个“图片轮播”特效，每隔2s图片变换一次，这里就用到了定时 器。定时器用途非常广，在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西，很大可能都是跟定时器有关。
-
语法：
let 变量名 = setTimeout(code , time);说明：
参数code可以是一段代码，也可以是一个调用的函数名；
参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。 -
语法：
let 变量名 = setInterval (code , time);说明：
参数code可以是一段代码，也可以是一个调用的函数名；
参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。
对象框
- alert();
alert()：仅有提示文字，没有返回值；
- confirm();
confirm()：具有提示文字，返回“布尔值”（true或false）；
js const isOk = confirm("确认要删除该记录吗?"); if(isOk){ alert("删除成功!"); }else{ alert("取消删除!"); } - prompt()；
prompt()：具有提示文字，返回“字符串”；
const message = prompt("请输入内容"); console.log(`你输入的内容是${message}`);
location对象
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
例子：
<script>
/*鲜花详情*/
function flowdetail() {
location.href = "06flow.html";
}
/* 重新加载页面*/
function reload() {
location.reload
}
</script>
<img src="images/flow.jpg" alt="鲜花">
<div>
<p onclick="flowdetail()">鲜花详情</p>
<a href="#" >鲜花详情</a>
<a href="javascript:reload()">刷新页面</a>
</div>
history对象
document对象
- 获取html标签元素
const pobj = document.getElementById("p1"); //获取id=p1的html元素
const userObjs = document.getElementsByName("username");
const pobjs = document.getElementsByTagName("p");
const sobjs = document.getElementsByClassName("s1");
- 改变元素内容
p.innerHtml="<h1>Html内容</h1>";
p.innerText="纯文本内容";
p.value = "表单内容";
- 改变元素样式
pobj.style.color = "red"; //改变样式 字体颜色为red
pobj.style.fontSize = "20px";
例子：
<article>
<img src="image/book.jpg" alt="">
<div>
<span id="bookname">图书</span>
<button onclick="changeName1()">换回名字</button>
<div class="siji">
<span>四季:</span>
<input type="text" value="春" name="jijie">
<input type="text" value="夏" name="jijie">
<input type="text" value="秋" name="jijie">
<input type="text" value="冬" name="jijie">
</div>
<div>
<button onclick="getValuesiji()">input内容</button>
<button onclick="changeName()">换换名字</button>
<button onclick="clearAll()">清空内容</button>
</div>
<span id="sjname"></span>
</div>
</article>
<script>
function changeName() {
const needChangeName = document.getElementById("bookname");
const needChangeName1 = document.getElementById("bookname1");
needChangeName.innerHTML = "热销";
}
function changeName1() {
const needChangeName = document.getElementById("bookname");
needChangeName.innerHTML = "图书";
}
function getValuesiji() {
const sijival = document.getElementsByName("jijie");
const sjn = document.getElementById("sjname");
let arr = "";
let n = 0;
for (const item in sijival) {
n++;
arr += sijival[item].value;
if (n == sijival.length) {
sjn.innerHTML = arr;
}
}
}
function clearAll() {
document.write("");
}
</script>
