   窗口的screen属性就会引用Screen对象，它包含有关客户端显示屏的信息，并且每个  浏览器的Screen对象都包含不同的属性。常用的Screen对象属性如表所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6642d7b03a966df6cb34d9ff9e77a788.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/78f3fd37598ae5dd527ad40034306532.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1e951e01b895e4bcb86271057add244d.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6b187d11ae9834490ee68231a3809c3a.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示屏幕分辨率</title>
</head>
<body>
    <p><a href="javascript:getScreen()">显示屏幕信息</a></p>
    <script>
        function getScreen(){
            document.write(`屏幕信息：\n
            分辨率：${screen.width}*${screen.height} \n
            可用区域 ${screen.availWidth}*${screen.availHeight} \n
            `)
        }
    </script>
</body>
</html>
```

7.2 使用Screen对象

- 2024年广东省大学生计算机设计大赛
- 暨第17届中国大学生计算机设计大赛粤港澳大湾区赛
面向粤港澳大湾区高校师生（本专科均可参赛）
主办：广东省教育厅

教育厅举办的计算机类比赛


浏览器对象模型（Browser Object Model，BOM）主要用于访问和操纵浏览器窗口。BOM主要是由一系列的浏览器对象组成的。这一系列的浏览器对象被称为BOM对象体系如图7-2所示。BOM主要包括Window、Document、History、Location、Navigator、Screen等对象，主要用于操纵浏览器窗口的行为和特征。本任务将详细介绍BOM对象。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/0ca6e7171ae7d03dbbc0f5fefc57bce0.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e21deece640da1c09c62fb187b1dfd59.image.webp)

在BOM对象体系中，Window位于顶层，可以使用标识符window直接访问下层对象，如下代码所示。
window.document.write(“hello!”);
因为Window是顶层对象，在平时写代码时，window是可以省略的，如上述代码可以直接写成如下语句。
document.write(“hello!”);

Window对象用来表示浏览器中一个打开的窗口。Window对象的属性如表所示。



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/93e928bf22b48f18c2022aeff35e9665.image.webp)

Window对象的方法如表所示：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/12241a39b93e63d172576995abeb273d.image.webp)
setInterval() 方法指按照指定的周期（以ms计）来循环调用函数或计算表达式。
定时器的语法格式如下。
setInterval(code/function, milliseconds);
其中code/function是指要执行一段JavaScript代码或者一个函数；milliseconds是指 周期性执行或调用code/function的时间间隔，以ms计。

执行一段JavaScript代码实现定时的代码如下。
setInterval(“alert(‘hello’)”,2000);
这表示每隔2s弹出“hello”，这里通过代码字符串的方式实现，也可以通过自定义函数的方式实现，具体如下。
   function FunHello(){
        alert("hello");
    }
setInterval(FunHello,2000);
  
通过执行自定义函数的方式来设置定时器时，函数可以带参数，然后将参数输出。定时器在调用带参数的函数时，需要使用JavaScript代码字符串来调用 。
       function alertFunc(str) {
            alert(str);     }
    setInterval("alertFunc('hello')", 2000);
如果想要在定时器启动后取消它，我们可以将setInterval()方法的返回值传递给clearInterval()方法，具体如下。
var timerId = setInterval(FunHello, 2000);
        clearInterval(timerId);

  
延时器setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

延时器的语法格式如下。
      setTimeout(code/function, milliseconds);
    其中code/function是指要执行一段JavaScript代码或者一个函数，milliseconds是指延迟的时间，以ms计。

  
执行一段JavaScript代码实现延时的代码如下。
    setTimeout(“alert(‘hello’)”,2000);
    这段代码是指2s后弹出“hello”，这里通过代码字符串的方式实现，也可以通过自定义函数的方式实现，具体如下。
   function FunHello(){
        alert("hello");
    }
  setTimeout(FunHello,2000);

  
通过执行自定义函数的方式来设置延时器时，函数可以带参数，然后将参数输出。延时器在调用带参数的函数时，需要使用JavaScript代码字符串来调用。
       function alertFunc(str) {
            alert(str);
        }
setTimeout("alertFunc('hello')", 2000);
如果想取消延时器，我们可以将setTimeout()方法的返回值传递给clearTimeout()方法，具体如下。
        var timerId = setTimeout(FunHello, 2000);
        clearTimeout(timerId);


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/12953277151c3218dd0837670b94e8bb.image.webp)
  

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3c7dd6e208972e695118902b90c5e8d7.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1"><a href="javascript:startShow()">显示时钟</a></p>
    <p><a href="javascript:stopShow()">取消时钟</a></p>
    <script type="text/javascript">
        var timerID;
        function showTime(){
            var now = new Date();
            var p1 = document.querySelector("#p1");
            p1.innerHTML = now.toLocaleTimeString();
            console.log(now);
            console.log(now.toLocaleTimeString());
        }
        function startShow(){
            timerID = setInterval(showTime,1000);
        }
        function stopShow(){
            clearInterval(timerID);
        }
    </script>
</body>
</html>
```


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/31ab0ef13659c490e19e348ccd018958.image.webp)

## 打开和关闭窗口
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口，具体语法格式：        window.open(URL,name,specs)
其中URL是指要打开的指定页面的URL，如果没有指定URL，则打开一个新的空白窗   口；name是指target属性或窗口的名称；specs是指窗口的特征列表，通过逗号分隔，具体如表所示。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e1eaf661b6137d41a856276cdf5de25e.image.webp)

close() 方法用于关闭浏览器窗口，除了关闭主窗口外，还可以关闭新创建的窗口，具体用法如下：
window.close();
myWindow.close();
myWindow.close()表示关闭myWindow窗口，而myWindow是通过open()方法创建的窗口，也就是前面open()的返回值。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b2de17d0342262e6e833439b903b2781.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/45b629c0410d9a828921851316743656.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/1d45a5a36ee68faea5cfec2caf3e3a66.image.webp)
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><a href="javascript:openWin()">打开新窗口</a></p>
    <p><a href="javascript:closeWin()">关闭新窗口</a></p>
    <p><a href="javascript:open()">关闭窗口</a></p>
    <script>
        var newWin = null;
        function openWin(){
            newWin = open("http://www.liufeisheng.cn","newWin",
                "width=400,height=200,left=120,top=110");
        }
        function closeWin(){
            if(newWin!=null){
                newWin.close();
                newWin=null;
            }else{
                alert("没有要关闭的窗口");
            }
        }
    </script>
</body>
</html>
```

在演示代码中，openWin()函数中的open()的参数分别为要打开窗口的URL，新窗口的名字，新窗口的宽度、高度，左边距和上边距等。javascript:openWin()是通过超链接调用函数的方法。closeWin()方法通过使用openWin()方法的返回值来调用。




![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5f35b53929b386681378f6a8f966a1f3.image.webp)

## 改变窗口大小

 resizeTo(x,y)方法用来改变窗口的大小，x和y代表改变后的宽度和高度，单位是px；而resizeBy(x,y)方法也用来改变窗口的大小，但是x和y代表在原来的基础上扩大或者缩小的数值，为正数表示扩大，为负数表示缩小，具体用法如下所示：
window.resizeTo(400,400);//窗口大小调整为400*400
window.resizeBy(-500,-500);//窗口大小在原来基础上各缩小500



所有主要浏览器都支持 resizeTo() 方法，但是从火狐浏览器7开始，不能改变浏览器窗口的大小了，要依据下面的规则。
	不能设置那些不是通过window.open()创建的窗口大小。
	当一个窗口里面含有一个以上的 Tab 时，无法设置窗口的大小。
除此之外，如果我们想获取浏览器窗口本身的大小，可以通过outerWidth和outerHeight属性来获取，还可以通过innerWidth和innerHeight属性来获取浏览器窗口减去浏览器自身边框及菜单栏、地址栏、状态栏等的宽度/高度。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/5291fb1beccacf7e8ce40ddc565ec34e.image.webp)



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/fd4049811c1910f47e1660a591d4dfd7.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更改窗口大小</title>
</head>
<body>
    <p><a href="javascript:openWin()">打开新窗口</a></p>
    <p><a href="javascript:resizeWin()">改变窗口大小</a></p>
    <p><a href="javascript:resizeX()">水平缩小100px</a></p>
    <p><a href="javascript:showSize()">显示目前大小</a></p>
    <script>
        var newWin = null;
        function openWin(){
            newWin = open("","","width=400,height=100,left=120,top=110");
            newWin.document.write(`初始大小:<br/>
            outerWidth:${newWin.outerWidth}\n outerHeight:${newWin.outerHeight}<br />
            innerWidth:${newWin.innerWidth}\n innerHeight:${newWin.innerHeight}<br />`);
        }
        function resizeWin(){
            newWin.resizeTo(600,300);
            newWin.focus();
            newWin.document.write(`第一次改变大小:<br/>
            outerWidth:${newWin.outerWidth}\n outerHeight:${newWin.outerHeight}<br />
            innerWidth:${newWin.innerWidth}\n innerHeight:${newWin.innerHeight}<br />`);
        }
        function resizeX(){
            newWin.resizeBy(-100,0);
            newWin.focus();
            newWin.document.write(`第二次改变大小:<br/>
            outerWidth:${newWin.outerWidth}\n outerHeight:${newWin.outerHeight}<br />
            innerWidth:${newWin.innerWidth}\n innerHeight:${newWin.innerHeight}<br />`);
        }
        function showSize(){            
            alert(`
            outerWidth:${newWin.outerWidth}\n outerHeight:${newWin.outerHeight}<br />
            innerWidth:${newWin.innerWidth}\n innerHeight:${newWin.innerHeight}<br />`);
            newWin.focus();
        }
    </script>
</body>
</html>
```




## 改变窗口位置
MoveTo(x,y)方法用来移动窗口，x和y代表距离屏幕左上角的水平和垂直距离，单位是px；而MoveBy(x,y)方法也用来移动窗口，但是x代表在原来的基础上向左移动（x<0）或者向右移动（x>0）的距离，具体用法如下所示：
window.moveTo(100,100);//窗口移动到(100,100)
window.moveBy(10,-50);//窗口在水平方向上向右移动10像素，向上移动50像素

除此之外，如果我们想获取窗口当前位置，可以通过screenLeft和screenTop属性来获取，这表示窗口相对于屏幕左边和上边的位置。screenX和screenY属性也提供相同的位置。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/59329938f8b169429e8b3e2110bc67c8.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d40b6c13496db00e88e9ded2e073c388.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p><a href="javascript:openWin()">打开新窗口</a></p>
    <p><a href="javascript:moveWin()">改变窗口位置</a></p>
    <p><a href="javascript:moveY()">向上移动100px</a></p>
    <p><a href="javascript:showPos()">显示目前位置</a></p>
    <script>
        var newWin = null;
        function openWin(){
            newWin = open("","","width=400,height=100,left=120,top=110");
            newWin.document.write(`初始位置:<br/>
            Left:${newWin.screenLeft}\n Top:${newWin.screenTop}<br />`);
        }
        function moveWin(){
            newWin.moveTo(100,100);
            newWin.focus();
            newWin.document.write(`第一次改变位置:<br/>
            Left:${newWin.screenLeft}\n Top:${newWin.screenTop}<br />`);
        }
        function moveY(){
            newWin.moveBy(0,-100);
            newWin.focus();
            newWin.document.write(`第二次改变位置:<br/>
            Left:${newWin.screenLeft}\n Top:${newWin.screenTop}<br />`);
        }
        function showPos(){
            alert(`当前位置:<br/>
            Left:${newWin.screenLeft}\n Top:${newWin.screenTop}<br />`);
        }
        

    </script>
</body>
</html>
```

7.1 认识BOM

# 代码绘图工具

在工作中经常会遇到一些绘图的情况，手绘效率差，可以借助一些代码编程来实现。

比如python代码通过matplotlib绘制各种数据分析图形。

也能用DOT语句来绘制流程图之类。

还有D3.js库，可以用来创建各种类型的数据可视化，包括但不限于标准的图表和图形。



具体信息如下：

## 1.D3.js

D3.js库，JavaScript库，专门用于基于数据生成动态可视化图形。它允许开发者直接在Web浏览器中使用HTML、SVG和CSS来操作数据。D3.js 强调了可视化的灵活性和深度定制，是现代Web数据可视化的首选工具之一。可以用来创建各种类型的数据可视化，包括但不限于标准的图表和图形。

- **条形图**：使用矩形的高度或长度表示数据大小。

- **折线图**：通过折线连接各个数据点，展示数据随时间或顺序的变化趋势。

- **饼图**：用扇形的角度大小表示数据的比例。

- **散点图**：在坐标系中用点表示两个变量之间的关系。

- **力导向图**：用于展示节点间的网络关系，节点之间的物理距离表示它们的关系密切程度。

- **树形图和矩阵树图**：用于展示层次数据或树形结构。

- **地图**：D3 可以通过地理数据生成地图，显示地理位置信息。

- **热力图**：通过颜色变化表示数据的大小，适用于展示密度、频率等信息。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/787573dc6f346625b025b34fdf379406.image.webp)

总之，D3.js 是一款功能强大、灵活性极高的库，能够帮助开发者构建复杂且交互性强的数据可视化图形，广泛应用于科学研究、商业分析、新闻报道等多种场景。

## 2.DOT语句

Dot 语言是 Graphviz 软件包中的一种图形描述语言，专用于描述图的结构，尤其是有向图（directed graphs）和无向图（undirected graphs）。它非常适合用来表示节点（node）和边（edge）之间关系的图形。

使用 Dot 语言，可以绘制多种类型的图形，包括但不限于：

1. **有向图**：节点通过有方向的边连接，适合展示从一个节点到另一个节点的流程或依赖关系，例如状态机、类继承图、项目流程图等。
2. **无向图**：节点之间的边没有方向，适合表示双向关系或没有固定方向的网络，比如社交网络、无向网络拓扑等。
3. **层次图**：自动布局为层次结构，通常用于展示组织结构图、决策树等。
4. **集群图**：可以在图中定义子图（clusters），用于分组节点并且通常用不同的颜色或样式来区分，非常适合显示高层次的分组信息，比如在网络中的子网。
5. **复合图**：可以创建包含节点和子图的图形，允许在更大的图形结构中嵌入小的子图，适合展示有层次或有分组的复杂结构。
6. **有约束的图**：可以使用 Dot 语言指定节点的排列顺序或层次，以及边的形状（比如曲线或直线）。
7. **定制化的图形**：Dot 语言允许用户自定义节点形状、边样式、颜色、标签等，以及图形的布局参数，从而创建各种定制化的图形。

Graphviz 和 Dot 提供了强大的自动布局功能，可以处理复杂的图形结构，并自动优化布局以减少边的交叉和重叠，使得图形更易于理解。虽然它并不是专为美观的信息图形设计，但在许多需要展示复杂关系和结构的技术领域中非常有用。

## 3.matplotlib python库

Matplotlib 是 Python 中一个非常受欢迎的 2D 绘图库，能够生成高质量的图形。使用 Matplotlib，可以创建多种数据可视化类型，其中包括但不限于：

1. **折线图**（Line plots）：用于展示数据点如何随时间或其他连续变量变化。
2. **条形图**（Bar charts）：用矩形条展示不同类别的数量比较，可以是垂直或水平的。
3. **散点图**（Scatter plots）：在坐标系中用点来表示两个变量之间的关系。
4. **饼图**（Pie charts）：用扇形的角度大小表示数据的比例分布。
5. **直方图**（Histograms）：展示连续变量的频率分布。
6. **箱线图**（Box plots）：用于展示数据的分布情况，包括中位数、四分位数及异常值。
7. **热力图**（Heatmaps）：通过颜色编码表示矩阵或2D数据网格中的值大小。
8. **等高线图**（Contour plots）：用线条表示函数的等值线，常用于显示三维数据的二维投影。
9. **3D 图形**（3D plots）：尽管 Matplotlib 是一个 2D 绘图库，但它的 mplot3d 工具包能够创建简单的三维图形。
10. **极坐标图**（Polar plots）：在极坐标系中表示数据。
11. **误差条形图**（Error bars）：用于表示数据的不确定性。
12. **堆叠图**（Stack plots）：用于显示不同组分随时间的累积贡献。
13. **面积图**（Area plots）：类似于堆叠图，但通常是单一数据集的累积面积。
14. **棉棒图**（Stem plots）：用于显示离散数据序列，类似于散点图，但每个点有一根从基线到点的直线。

Matplotlib 还支持许多高级的图形和定制选项，如网格线、标签、图例、颜色地图等，同时也支持交互式特性，如放大、缩小和移动图表。此外，Matplotlib 的样式和布局高度可定制，可以用于创建出版质量的图表。它被广泛用于科学计算、数据分析、人工智能模型的可视化、学术出版物，以及任何需要数据可视化的场合。

## 4.其他

**Seaborn**：基于Matplotlib的Python数据可视化库，提供了更多的高级接口，专注于统计图表，如热力图、时间序列图等

**Highcharts**：一个用JavaScript编写的图表库，可以在Web中创建多种交互式图表

**Echarts**：一个由百度推出的开源数据可视化工具库，支持丰富的图表类型，并且具有良好的交互性。

**Processing**：一个灵活的软件草图本和编程语言，适合在图形艺术和视觉设计项目中创建图像、动画和互动。

代码绘图工具

昨天睡前，调整好了CNN模型，将这几天处理好的数据导入进行模型训练。结果，没想到，今早起来，电脑却还在训练模型，加上数据的词向量表征，共运算了十余个小时。

直到写这篇记录时，才算是正常运行完。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ed3a4ff6fbe3042b39439afa1dcd7d97.image.webp)


![1713745676696.jpg](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f12b3f57fdbd162e14f7322811f3f4e2.1713745676696.webp)

运行期间，对CPU、内存、硬盘的要求极高，CPU大多数时间是100%占用运行。在数据处理过程中，因为需要保存大量数据，内存也经常达到100%，SSD固态硬盘读取速度达到最高。在模型训练阶段，主要是读取数据，内存达到约70%，但CPU却是满配运行。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/7a5d26a4ef2db96270a83b8ca41b5cef.image.webp)

半个月前刚组装的新电脑，虽然配置满满，但拿来运行机器学习、深度学习却还是捉襟见肘。

[新配电脑配置](/post/30)，如果商务电脑要买到这个配置，应该得8千多。

周末2天，又是沉浸于各种编程、实验之中，反复折腾，才算有了点思路。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/26363d8ba7b0a3bf6c6ae6a064597e63.image.webp)