History对象<html lang="en">
<head>
<meta charset="UTF-8">
<title>History对象</title>
</head>
<body>
<a href="Demo40.html">Demo40</a>
<button onclick="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 onclick="show()">五秒后显示HelloWord</button>
<button onclick="cancelShow()">取消显示HelloWord</button>
<button onclick="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>
结果图：
DOM部分
getElement系列方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElement系列方法</title>
</head>
<body>
<p id="jereh">杰瑞集团</p>
<p name="jredu">杰瑞教育</p>
<p name="jredu">杰瑞教育</p>
<button onclick="change()">变！！</button>
<button onclick="change2()">变！！</button>
<button onclick="change3()">全部字体变大！！</button>
</body>
<script>
/*getElementById 通过ID查找元素，只会返回一个匹配的元素*/
function change() {
document.getElementById("jereh").style.color = "red";
}
/*getElementByClassName 通过class查找元素，返回一个匹配的元素数组
getElementByName 通过name属性查找元素，返回一个匹配的元素数组*/
function change2() {
// var result = document.getElementsByClassName("jredu");
var result = document.getElementsByName("jredu");
for (var i = 0; i <= result.length; i++) {
result[i].style.fontSize = "30px";
}
}
/*getElementByTagName 通过标签查找元素，只会返回一个匹配的元素数组*/
function change3() {
var result = document.getElementsByTagName("p");
for (var i = 0; i <= result.length; i++) {
result[i].style.fontSize = "50px";
}
}
</script>
</html>
结果图：
Attribute<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
</head>
<body>
<img src="../../img/tu.png" alt="" id="img"><br>
<button onclick="getUrl()">获取图片路径信息</button>
<button onclick="changeUrl()">改变图片</button>
</body>
<script>
var img = document.getElementById("img");
function getUrl() {
/*var src = img.src;*//*绝对路径*/
var src = img.alt="图片不显示";
var src = img.getAttribute("src");/*相对路径*/
console.log("src");
}
function changeUrl() {
img.setAttribute("src","../../img/tu2.png");
// img.src="../../img/tu2.png";
}
</script>
</html>
结果图：
点符号<head>
<meta charset="UTF-8">
<style>
.lzw {
text-align: center;
font-size: 30px;
color: red;
}
.yut{
margin-top: 300px;
}
</style>
<title>点符号</title>
</head>
<body>
<p id="school">青岛理工大学！</p>
<button onclick="change()">改变字体</button>
</body>
<script>
var p = document.getElementById("school");
function change() {
/*1:.style方法，逐个去给元素添加样式，速度慢！*/
/*p.style.textAlign = "center";
p.style.color = "red";
p.style.fontSize = "50px";*/
/*2:className方法，直接给元素添加一个样式类，速度快
* 前提是样式类已经存在 * 元素已存在默认类的时候，再次添加元素需要使用+=”（空格）类名称“*/
// p.className +=" yut";
/*3:cssText 可以一次吧多个样式写在样文本中*/
p.style.cssText = "color:red;font-size:40px;text-align:center";
}
</script>
</html>
结果图：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p id="jredu">杰瑞教育</p>
</body>
<script>
var p = document.getElementById("jredu");
var value = p.innerHTML;
p.onclick = function () {
alert(value)
}
</script>
</html>
结果图：
行内样式的获取<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#yut {
color: red;
}
</style>
<title>行内样式的获取</title>
</head>
<body>
<p id="yut" style="font-size: 40px; ">青岛理工大学</p>
</body>
<script>
var p = document.getElementById("yut");
// var style = p.style;/*.style 获取的全部为行内样式*/
/*浏览器种类的区分不适用浏览器对象，
* 常使用的方法为判断浏览器特有的属性和方法*/
if (p.currentStyle) {
var style = p.currentStyle;
/*IE 获取元素的所有样式*/
}
else {
var style = window.getComputedStyle(p);
/* W3C 获取元素的所有样式*/
}
console.log(style.fontSize);
console.log(style.color);
</script>
</html>
结果图：
时间： 2024-10-14 18:13:54