本文展示了如何使用HTML、CSS和JavaScript实现简单的网页互动，如点击颜色块改变背景色，并介绍了JavaScript中的全局变量、函数和事件处理。此外，还涉及到DOM操作、定时器以及浏览器历史记录的控制。
<!DOCTYPE html>
<html>
<head>
<title>小项目</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#canvas{
height: 500px;
}
li{
float: left;
width: 100px;
height: 30px;
border-radius: 10px;
background: #333;
text-align: center;
line-height: 30px;
color:#fff;
}
ul li:nth-child(1){
background:red;
}
ul li:nth-child(2){
background:black;
}
ul li:nth-child(3){
background:blue;
}
ul li:nth-child(4){
background:yellow;
}
ul li:nth-child(5){
background:green;
}
</style>
</head>
<body>
<div id="canvas"></div>
<ul id="ul">
<li>红色</li>
<li>黑色</li>
<li>蓝色</li>
<li>黄色</li>
<li>绿色</li>
</ul>
<script type="text/javascript">
var ul = document.getElementById('ul');
var canvas = document.getElementById('canvas');
ul.addEventListener('click', function(e){
var that = e.target;
console.log(e);
if(that.innerHTML == "红色"){
canvas.style.background = "red";
}else if(that.innerHTML == "黑色"){
canvas.style.background = "black";
}else if(that.innerHTML == "蓝色"){
canvas.style.background = "blue";
}else if(that.innerHTML == "黄色"){
canvas.style.background = "yellow";
}else{
canvas.style.background = "green";
}
});
</script>
</body>
</html>这段代码实现了一个简单的界面互动效果，在一个DIV元素中显示不同颜色的区块，并且通过单击每个颜色方块来改变DIV元素的背景色。
首先，CSS样式设置了所有元素的边界和列表样式外观。通过CSS中的`{margin: 0; padding: 0; list-style: none;}`这些全局样式来消除元素之间的差异，使UI看起来更加整齐清爽。然后使用了`float`属性让每一个颜色块（li）水平布局，满足我们所期待的列的效果。特别地，`ul li:nth-child(n)` 选择器用于给每个颜色方块赋予不同的背景色，以便单击任意一个方块时改变页面的背景颜色。
在代码的最后，使用JavaScript监听颜色方块的单击事件，当任意一个方块被点击时，将触发回调方法，保存单击的目标元素，通过这个元素的innerHTML属性来检查所单击的是哪个颜色方块，并通过 `canvas.style.background` 属性来相应地改变页面背景色的值。
这段代码为什么条件语句使用that.innerHTML?innerHTML是否是获取字符串时才使用？
`innerHTML` 是用于访问和修改 HTML内容的属性。 在这个特定的代码中，是用 `that.innerHTML` 来读取颜色方块(li)内的文本内容,以便根据该文本内容判断用户点击的颜色块是哪个，来执行相应操作。
因为该操作通过 `ul.addEventListener('click', function(e){...});` 非常简洁地实现了单击交互效果，当您单击任意颜色方块时，事件处理程序将在事件参数 `e` 中获取事件相关的信息，并将点击的目标（即颜色方块）保存在`e.target`属性中，用 `that` 变量来引用这个目标元素。由于 `innerHTML` 是这个元素的属性，所以在条件语句中使用 `that.innerHTML` 即相当于读取 HTML 节点的内容。
var age=15;
function sayAge(){
alert('我'+window.age);
}
// 声明一个全局变量
window.username="marry"; // var username="marry";
// 声明一个全局方法
window.sayName=function(){
alert("我是"+this.username);
}
sayAge();
window.sayName(); 这段代码的作用如下：
1. 声明了一个变量`age`(年龄)的值为15。
2. 声明了一个函数`sayAge()`，该函数的作用是弹出一个对话框，显示“我+ age”的字符串，其中`age`是全局变量。
3. 声明了一个全局变量`username`，其值为“marry”。
4. 声明了一个全局方法`sayName()`，该方法的作用是弹出一个对话框，显示“我是+ username”的字符串，其中`username`是全局变量。
5. 在函数外调用了`sayAge()`与`sayName()`函数。
因此，代码执行时会依次弹出“我15”和“我是marry”的对话框。
在JavaScript中，`window`是一个全局对象，是浏览器提供给JavaScript的宿主对象之一。它代表了整个浏览器窗口，并提供了许多方法和属性，可以通过`window`对象访问或设置这些方法和属性。
在这段代码中，使用`window`关键字来声明了一个全局变量`username`和一个全局函数`sayName()`，实际上使用`window`关键字来声明全局变量或函数是可选的，因为脚本的所有全局对象都是`window`对象的属性、方法或事件。但是，在某些情况下，使用`window`关键字可以提高代码的可读性和代码的易读性。
因此，在上述代码中，使用`window`关键字声明全局变量和函数可以让它们更容易被追溯和查找，并且在这个案例中，使用`window`对象来访问全局变量和函数也能实现相同的效果。
在JavaScript中，语句会按照它们出现的顺序执行。在兄弟节点之间，代码执行的顺序是从上到下的。但是，当我们涉及父节点和子节点时，就会有一种行为叫做事件冒泡，这也是DOM事件的一个特性。
在DOM结构中，如果一个元素发生了事件，通常情况下，该事件会“向上传递”到父级节点，直到到达DOM树的顶端或直至某个事件处理程序捕获并处理该事件。因此，从子节点到父节点逐步向上传递和处理事件的过程就是DOM事件冒泡。
但是，需要注意的是，JavaScript代码执行顺序和DOM事件的执行顺序是两个不同的概念，它们之间没有必然关系。即使是在事件冒泡的情况下，JavaScript的代码执行顺序仍然按照它们在代码中出现的顺序执行。
不使用window的代码：
``javascript
var age = 15;
function sayAge() {
alert('我' + age);
}
// 声明一个全局变量
username = 'marry'; // var username = 'marry';
// 声明一个全局方法
function sayName() {
alert('我是' + username);
}
sayAge();
sayName();在JavaScript中，函数可以被声明和定义在调用它们之前，但是函数的定义只是一段代码，只有当函数被调用时才会执行函数内的代码。
因此，在这个案例中，虽然`sayAge()`函数是在调用它之前声明和定义的，但是它的代码会在函数被调用时执行。具体地说，先执行`sayAge()`函数，其中`alert('我'+age)`会输出“我15”，然后执行`sayName()`函数，它的`alert('我是'+this.username)`会输出“我是marry”。
script放在靠前位置是否会有影响？
<script>`标签放在文档的`<body>`中，代表浏览器在加载HTML文档时，先解析文档结构，然后再一行一行地执行JavaScript代码，因此浏览器在加载`<script>`标签时，会依次执行其中的代码，但不会在`<script>`标签的位置中断HTML的解析。
即使在执行`<script>`标签中的JavaScript之前，浏览器也会首先解析HTML并创建DOM结构，读取CSS并应用样式，然后才会执行JavaScript。
因此，即使将`<script>`标签放在靠前的位置，JavaScript代码也不会在HTML未被解析之前执行，而是在浏览器解析完所有的HTML之后，按照代码在`<script>`标签中出现的顺序执行。
btn.onclick=function(){
// 弹出确认对话框
var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
if(result){
document.getElementById("box").style.display="none";
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open</title>
</head>
<body>
<input type="button" value="退 出" id="quit">
<script>
window.onload = function(){
// 打开子窗口，显示newwindow.html
window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
var quit = document.getElementById("quit");
// 点击关闭当前窗口
quit.onclick = function(){
window.close("newwindow.html");
}
}
</script>
</body>
</html>这段代码是一段 HTML 和 JavaScript 代码，主要功能是在浏览器中打开一个子窗口 `newwindow.html`，并给该子窗口设置了一些属性，比如宽度、高度、位置等。同时，该代码还对窗口进行了一些操作，比如在主窗口中添加了一个按钮，点击该按钮可以关闭当前窗口
在页面加载完成后，通过 `window.open` 方法打开一个新的窗口。`window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no")` 中：
- `"newwindow.html"`：新窗口要显示的页面地址；
- `"newwindow"`：新窗口的名称，可以被后续的 JavaScript 代码使用；
- `"width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no"`：新窗口的一些属性，比如宽度、高度、位置等。
- 在主窗口中获取到了 `id` 为 `quit` 的按钮，并将其保存到变量 `quit` 中，以便后面对其进行操作。
```js
var quit = document.getElementById("quit");
```
- 当点击该按钮时，通过 `window.close()` 方法关闭当前窗口（即子窗口）。
```js
quit.onclick = function(){
window.close("newwindow.html");
}
```
window.close(关闭）
// 使用超时调用实现
function inCreamentNum(){
console.log(num); // 1 2 3 10
num++;
if(num<=max){
setTimeout(inCreamentNum,1000);
}else{
clearTimeout(timer);
}
}
timer=setTimeout(inCreamentNum,1000);使用 `setTimeout()` 函数来定时执行 `inCreamentNum()` 函数，实现了每隔 1 秒钟将 `num` 的值增加 1，直到 `num` 增加到了 `max` 的值。
这里使用了 `if(num<=max)` 来判断是否已经达到了 `max` 的值，如果是，则不再调用 `setTimeout()` 再次启动计时器。否则，将再次调用 `setTimeout()` 以便继续执行下一轮计时。
history方法：
body>
<p> 这是index11.html</p>
<p>
<a href="index12.html">这是index12.html</a>
</p>
<p><input type="button" value="后退" id="btn"></p>
<p><input type="button" value="前进" id="btn2"></p>
<p><input type="button" value="前进2" id="btn3"></p>
<script>
var btn = document.getElementById("btn");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
// 点击btn按钮时回到历史记录的上一步
btn.onclick = function() {
// history.back();
history.go(-2);
}
// 点击btn2按钮时回到历史记录的上一步
btn2.onclick = function() {
// history.forward();
history.go(1);
}
btn3.onclick = function() {
// history.forward();
history.go(2);
}
</script>
.dots {
position: absolute;
bottom: 24px;
right: 0;
text-align: right;
padding-right: 24px;
line-height: 12px;
}
.dots span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
background-color: rgba(7, 17, 27, 0.4);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}这是CSS代码，用于创建一组圆点，通常用于页面轮播图指示器。其中，父元素的 class 为 `.dots`，它是绝对定位的，位于底部右侧，右侧有 24px 的填充，文字右对齐，行高为 12px。
同时，它含有多个用于表示状态的圆点，每个圆点用一个 span 元素来表示，它们具有以下特点：
`display: inline-block;` 表示将圆点元素设置为行内块级元素，以实现水平排列。
width: 12px; height: 12px;` 表示圆点的宽度和高度均为 12px，使得它们形成圆形。
- `border-radius: 50%;` 表示将圆点设置为50%的圆角，从而实现圆形。
- `margin-left: 8px;` 表示每个圆点之间的间距为 8px。
background-color: rgba(7, 17, 27, 0.4);` 表示圆点的背景色为半透明的深灰色。
- `cursor: pointer;` 表示鼠标放上去时指针显示为手型，表示可点击。
`box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;` 表示每个圆点具有2px的白边框，用于增加对比度。同时，使用 `inset` 关键字表示阴影为内阴影（边框在圆点内部），而不是常规的外阴影（边框在圆点外部）。
代码练习：
将一个数组全部填为0的代码：
Arrays.fill(arr, 0);
还可通过循环遍历来写
Arrays.sort(nums);
`Arrays.sort(nums)` 是Java排序数组的函数。它使用一种名为TimSort的改进型排序算法，将数组中的元素按升序排序。时间复杂度为 O(nlogn)，其中n是数组的大小。
TimSort是一种结合了合并排序和插入排序的混合排序算法。它利用了数据本来就局部有序和插入排序的优越性，从而在已经有了一定排序好的子列时可以得到在数据上的加速。此外，该算法还有其他优点，例如在最坏情况下的时间复杂度依然是O(nlogn），稳定性。
在实践中，TimSort非常快且在数据量小、有序性高等情况下表现尤其突出。因此，sort方法是Java开发中最常用的排序方式之一。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
