讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose

php中文网
发布： 2016-06-21 08:51:41
原创
1664人浏览过

1、文档：DOM中的“D”

"D"代表document(文档)

2、对象：DOM中的“O”

“O”代表object(对象) 对象的分类

  • 用户定义对象(user-defined object)
  • 内建对象(native object)
  • 宿主对象(host object)

window对象window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（浏览器对象模型）BOM提供了window.open和window.blur等方法。以至于被滥用于各种弹出窗口和下拉菜单

3、模型：DOM中的“M”

“M”代表“Model”（模型）DOM把一份文档表示为一棵树（数学意义上的概念）示例代码

立即学习“Java免费学习笔记（深入）”；

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>    <body>  </html>代码中<html>相当于树根，即根元素。<head>和<body>属于下一个分支，位于同一层次且互不包含，属于兄弟关系。<head>元素有两个子元素<meta>和<title>(属于兄弟关系)<body>元素有三个子元素<p>、<h1>、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。
登录后复制

如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确

4、节点

节点（node）属于网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况，文档是由节点构成的集合。

  • 元素节点
  • 文本节点
  • 属性节点

4、1元素节点

DOM的原子是元素节点（element node）诸如

、

、之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是元素，它是我们的节点树的根元素。

4、2文本节点

在上述例子中，

元素包含着文本“don't forget to buy this stuff.”它就是一个文本节点（text node）。

4、3属性节点

属性节点是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，我们可以利用这个属性对包含在元素里的东西做出准确的描述：

<p title="a gentle reminder">Don't forget to buy this stuff.<p>
登录后复制

在DOM中title="a gentle reminder"是一个属性节点（attribute node），在前面的例子中无序清单元素

    有个id属性。有些清单元素
  • 有class属性。

    三者之间的关系.png

    Operator
    Operator

    OpenAI推出的AI智能体工具

    Operator 231
    查看详情 Operator

    4、4 CSS

    类似javascript脚本，我们也可以将CSS样式嵌在文档

    部分（style>标签之间）。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式： 
    <link type="text/css" href="file.css" rel="stylesheet">
    登录后复制

    继承（inheritance)是CSS技术中的一项强大功能。1)、 class属性

    <p class="special">This pargraph has the special class<p><h2 class="special">So dose this headline</h2>
    登录后复制

    在样式表里可以为上面的代码进行定义

    special{font-style: italic;}
    登录后复制

    还可以这样定义

    h2.special{text-transform: uppercase;}
    登录后复制

    2)、id属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符：

    <ul id="purchases">
    登录后复制

    样式表定义

    #purchases{border:1px solid white;background-color：#333;color：#ccc;padding:1em;}
    登录后复制
    #purchases li{font-weight:bold;}
    登录后复制

    4、5获取元素

    有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名和通过类名字来获取
    • getElementById
    • getElementsByTagName
    • getElementsByClassName

    1)getElementById

    此方法将返回一个与那个有着给定id属性值的元素节点对应的对象，在javascript里注意大小写。它是document对象特有的函数，在脚本代码里，函数名的后面必须跟有一对圆括号，这对圆括号包含这函数的参数。document.getElementById(id)在getElementById方法中只有一个参数：你想获得的那个元素的id属性的值，这个id属性必须放在单引号或双引号里。docment.getElementById("purchases")这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTLM id属性值是purchases

              Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         alert(typeof docment.getElementById("purchases"));     </script>    <body>  </html>//利用`typeof`操作符进行验证（typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。</pre><div class="contentsignin">登录后复制</div></div>   <p>验证可得是一个对象</p>   <h3>2)getElementsByTagName</h3>   <p>getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字：decument.getElementByTagName(tag)</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为：3</pre><div class="contentsignin">登录后复制</div></div>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         var items=document.getElementByTagName("li");         for (var i=0; i<items.length;i++){         alert(typeof items[i]);         }     </script>    <body>  </html>//代码运行结果显示三个alert对话框，显示的消息都是“object”。</pre><div class="contentsignin">登录后复制</div></div>   <p>getElementsByTagName允许把一个通配符作为它的参数，通配符（*）必须放在引号里</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点</pre><div class="contentsignin">登录后复制</div></div>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果，items数组将只包含id属性值是purshase的元素清单的元素</pre><div class="contentsignin">登录后复制</div></div>   <h3>3)getElementByClassName</h3>   <p>这个方法让我们能够通过class属性中的类名来访问元素，getElementByClassName也只接受一个参数，就是类名：</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">getElementByClassName(class)</pre><div class="contentsignin">登录后复制</div></div>   <p>这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组。</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">document.getElementsByClassName("sale")</pre><div class="contentsignin">登录后复制</div></div>   <p>利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByClassName("important sale").length);//对话框显示1，表示只有一个元素匹配。类名的顺序不重要，就算元素还带有更多类名也没有关系。</pre><div class="contentsignin">登录后复制</div></div>   <p>也可以和getElementById组合使用</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">     var shopping=document.getElementById("purchase");     var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。</pre><div class="contentsignin">登录后复制</div></div>   <p>getElementByClassName方法非常有用，但只有较新的浏览器才支持它。所以，需要使用已有的DOM方法来实现自己的getElementsByClassName。</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i<elems.length;i++){  if(elems[i].ClassName.indexof(classname)!= -1){results[results.length]=elems[i];          }      }return results；    }}</pre><div class="contentsignin">登录后复制</div></div>   <h4>5 获取和设置属性</h4>   <ul>
<li>
<strong>getAttribute方法</strong>(获取元素的属性)</li>    <li>
<strong>setAttribute方法</strong>(更改属性节点值)5、1getAttributegetAttribute是一个函数，它只有一个参数(你所要查询的属性的名称)</li>   </ul>
</li>
</ul>          
                </div>
                            </div>
                
            <!-- <div class="ask_line-container" >
                <div class="ask_line"></div>
                <button type="button" class="ask_text test-iframe-handle">
                没有解决问题？点击使用智能助手
                </button>
                <div class="ask_line"></div>
            </div> -->
                        <div class="community flexRow newcommunity">
                    <div class="comleft flexRow newcomlimg">
                        <a target="_blank"  class="newcomlimga" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/d15282cdb2c0" title="最佳 Windows 性能的顶级免费优化软件" >
                            <img src="https://img.php.cn/teacher/course/20240902/cc89be6a0150bc48ad7781bd49eed9bf.png" class="comlimg newcomlimg" alt="最佳 Windows 性能的顶级免费优化软件">
                        </a>
                        <div class="comldiv flexColumn newcomldiv">
                            <a target="_blank"  class="comldup newcomldup" target="_blank" rel="nofollow" title="最佳 Windows 性能的顶级免费优化软件" href="https://pan.quark.cn/s/d15282cdb2c0">最佳 Windows 性能的顶级免费优化软件</a>
                            <p class="comlddown newcomlddown">每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。</p>
                        </div>
                    </div>
                    <a target="_blank"  class="comright flexRow newcomright" target="_blank" rel="nofollow" href="https://pan.quark.cn/s/d15282cdb2c0" title="最佳 Windows 性能的顶级免费优化软件">
                        下载
                    </a>
                </div>
            
          
			
            <div  class="wzconlabels">
                
                                <div style="display: inline-flex;float: right; color:#333333;">来源：php中文网</div>
                            </div>


            <div class="wzconFx">
                <a target="_blank"  class="wzcf-sc articleICollection " data-id="235369">
                                            <img src="/static/lhimages/shoucang_2x.png">
                        <span>收藏</span>
                                    </a>

                <a target="_blank"   class="wzcf-dz articlegoodICollection " data-id="235369">
                                            <img src="/static/images/images/icon37.png">
                        <span>点赞</span>
                                    </a>
            </div>



            <div class="wzconOtherwz">
                                    <a target="_blank"  href="/faq/235368.html">
                        <span>上一篇：Viewport 单位: vw, vh, vmin, vmax_html/css_WEB-ITnose</span>
                    </a>
                                    <a target="_blank"  href="/faq/235376.html">
                        <span>下一篇：Bootstrap使用心得之文本_html/css_WEB-ITnose</span>
                    </a>
                            </div>
            <div class="wzconShengming">
                <img src="/static/images/images/benzhanshengming.png" />
                <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div>
            </div>

                       <!-- PC-文章底部 -->
                        <div class="wzconZzwz">
                <div class="wzconZzwztitle">最新问题</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863457.html"  target="_blank" title="下载html5视频技巧_浏览器开发者工具下载方法【教程】" class="wdcdcTitle">下载html5视频技巧_浏览器开发者工具下载方法【教程】</a>
                            <a target="_blank"  href="/faq/1863457.html" class="wdcdcCons">可通过浏览器开发者工具下载HTML5视频：一、用Network面板筛选Media类型捕获视频URL；二、在Elements面板搜索video/source标签提取src；三、用Console脚本批量获取媒体链接；四、对HLS/DASH流需用ffmpeg或yt-dlp解析清单文件。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-19 00:31:25</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">313</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863150.html"  target="_blank" title="html5如何添加暂停_HTML5媒体暂停控制与交互技巧【方法】" class="wdcdcTitle">html5如何添加暂停_HTML5媒体暂停控制与交互技巧【方法】</a>
                            <a target="_blank"  href="/faq/1863150.html" class="wdcdcCons">HTML5媒体暂停可通过五种方法实现：一、调用pause()方法；二、绑定按钮点击事件；三、监听play事件自动暂停其他媒体；四、启用controls原生控件；五、监听pause事件同步状态。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:13:02</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">678</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863142.html"  target="_blank" title="html如何混排_实现HTML文字与图片混排布局【布局】" class="wdcdcTitle">html如何混排_实现HTML文字与图片混排布局【布局】</a>
                            <a target="_blank"  href="/faq/1863142.html" class="wdcdcCons">实现HTML图文混排需用CSS技术：一、float实现环绕；二、Grid做网格布局；三、Flexbox流式排列；四、inline-block行内对齐；五、Shapes不规则环绕。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:11:02</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">604</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863140.html"  target="_blank" title="如何用html做配置_使用HTML编写简单配置界面【界面】" class="wdcdcTitle">如何用html做配置_使用HTML编写简单配置界面【界面】</a>
                            <a target="_blank"  href="/faq/1863140.html" class="wdcdcCons">HTML配置界面可通过五种方法实现：一、纯表单构建基础界面；二、data-*属性绑定元数据；三、CSS类名实现响应式与状态反馈；四、fieldset/legend组织逻辑分组；五、hiddeninput存储非交互配置字段。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:10:41</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">392</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863139.html"  target="_blank" title="html怎么运行原理_html运行机制与流程解析【解析】" class="wdcdcTitle">html怎么运行原理_html运行机制与流程解析【解析】</a>
                            <a target="_blank"  href="/faq/1863139.html" class="wdcdcCons">浏览器通过解析HTML构建DOM树，加载CSS与JavaScript等资源，执行脚本动态修改页面，最后进行布局、绘制和合成，将内容渲染到屏幕。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:10:02</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">182</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863134.html"  target="_blank" title="手机如何支持HTML5_手机支持HTML5页面优化与适配技巧【详解】" class="wdcdcTitle">手机如何支持HTML5_手机支持HTML5页面优化与适配技巧【详解】</a>
                            <a target="_blank"  href="/faq/1863134.html" class="wdcdcCons">手机HTML5页面需配置Viewport、响应式CSS、触摸事件优化、资源性能提升及API兼容性检测。具体包括设置viewport元标签、使用媒体查询和flex布局、绑定touchstart事件、启用async脚本和srcset图片、运行时检测Canvas/Geolocation等API支持情况。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:09:08</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">587</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863122.html"  target="_blank" title="html5如何标记注释_HTML5注释标记方法与代码注释技巧【指南】" class="wdcdcTitle">html5如何标记注释_HTML5注释标记方法与代码注释技巧【指南】</a>
                            <a target="_blank"  href="/faq/1863122.html" class="wdcdcCons">HTML5注释使用语法，不支持嵌套，需规避--和>，禁用条件注释，模板中应区分静态注释与动态指令，特殊字符须转义或空格分隔。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:05:45</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">462</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863118.html"  target="_blank" title="html5如何操作filelist_HTML5文件列表操作方法及操作步骤详解【指南】" class="wdcdcTitle">html5如何操作filelist_HTML5文件列表操作方法及操作步骤详解【指南】</a>
                            <a target="_blank"  href="/faq/1863118.html" class="wdcdcCons">FileList是HTML5中只读类数组对象，需转为数组后才能使用map/filter等方法；可遍历获取文件信息、按类型/大小筛选、用FileReader读取内容，并限制文件数量。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:04:48</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">138</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863116.html"  target="_blank" title="sublime怎么在浏览器运行html_sublime运html到浏览器方法【教程】" class="wdcdcTitle">sublime怎么在浏览器运行html_sublime运html到浏览器方法【教程】</a>
                            <a target="_blank"  href="/faq/1863116.html" class="wdcdcCons">SublimeText无法直接运行HTML，需通过浏览器预览。方法一：将保存的HTML文件拖拽至浏览器窗口即可查看；方法二：在文件资源管理器中右键文件，选择用浏览器打开并设为默认；方法三：安装OpenInBrowser插件，通过命令面板一键在浏览器中预览；方法四：自定义BuildSystem，配置Chrome启动命令，实现Ctrl+B快捷键打开。初学者推荐前两种方式，进阶用户可使用插件或构建系统提升效率。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:04:02</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">503</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a target="_blank"  href="/faq/1863106.html"  target="_blank" title="animate制作html5动画_时间轴与交互动画设计【指南】" class="wdcdcTitle">animate制作html5动画_时间轴与交互动画设计【指南】</a>
                            <a target="_blank"  href="/faq/1863106.html" class="wdcdcCons">AnimateHTML5Canvas动画异常的解决方法包括：一、修正帧标签与关键帧；二、正确绑定按钮事件监听器；三、用CreateJSTween替代传统补间；四、调试元素引用与作用域；五、禁用自动播放并手动控制。</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan">2025-12-18 22:01:02</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <a target="_blank"  class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png"  class="wdcdcirwatchi">435</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>
            <div class="wzconZt" >
                <div class="wzczt-title">
                    <div>相关专题</div>
                    <a target="_blank"  href="/faq/zt" target="_blank">更多>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/quxjg$csys"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202512/17/2025121717472540270.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/quxjg$csys" class="title-a-spanl"><span>^quxjg$c啥意思</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/dnxspbldszjyk"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202512/17/2025121717385189523.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/dnxspbldszjyk" class="title-a-spanl"><span>电脑显示屏不亮但是主机已开机</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/cadkjmljcdq"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202512/17/2025121716420040169.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/cadkjmljcdq" class="title-a-spanl"><span>cad快捷命令教程大全</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/xxtrkdq"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202512/17/2025121716365527780.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/xxtrkdq" class="title-a-spanl"><span>学习通入口大全</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/jmaigfwy"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/000/000/080/6941185a5deae369.png?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/jmaigfwy" class="title-a-spanl"><span>即梦AI官方网页 即梦AI官方正版登录入口</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/javafsjzydtdl"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202512/15/2025121510184676118.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/javafsjzydtdl" class="title-a-spanl"><span>Java 反射机制与动态代理</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/ppwkjyakf"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202512/15/2025121510132050080.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/ppwkjyakf" class="title-a-spanl"><span>Python Flask Web框架与API开发</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank"  target="_blank" href="/faq/ubuntuangolan"><img onerror="this.onerror=''; this.src='/static/images/default1.png'" src="https://img.php.cn/upload/subject/202512/13/2025121317412341772.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a>
                            <a target="_blank"  target="_blank" href="/faq/ubuntuangolan" class="title-a-spanl"><span>ubuntu安装golang</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
<div class="wzcongg"><script type="text/javascript" src="https://teacher.php.cn/php/NzIzNmE5NjBlOTgwNWZlNTMzN2E0MGEzNmU3NjM3NmI6Og==" ></script></div>
        </div>
    </div>
    <div class="phpwzright">
            <div class="wzrOne" style="margin-bottom:31px; padding:0px; width: 366px;">
        <script type="text/javascript" src="https://teacher.php.cn/php/N2Q0ODk3NTAwZTFmODQ1NGM4Y2VjYzQzZTVkOTI5NDk6Og==" ></script>
        <!-- <script type="text/javascript" smua="d=p&s=b&u=u2839468&w=366&h=270" src="https://www.nkscdn.com/smu/o.js"></script> -->
        </div>
		        <div class="wzrOne">
            <div class="wzroTitle">热门推荐</div>
            <div class="wzroList">
                <ul>
                    
                </ul>
            </div>
            
        </div>
        <div class="wzrTwo">
                    </div>
		<div class="wzrTwo">
                <div style="position: relative;"><a target="_blank"  class="" href="https://teacher.php.cn/jump/67" title="开源免费商场系统" rel="nofollow" target="_blank"><img style="width: 100%; " src="https://img.php.cn/teacher/course/20220930/8ef7a4a308a22ece023e77e5428c0e25.png" alt="开源免费商场系统"></a><span style="position: absolute;right: 5px;border: 1px solid #333;padding: 2px;color: #333;line-height: 14px;font-size: 12px;bottom: 5px;">广告</span></div>
        		
		</div>
        <div class="wzrThree">
            <div class="wzrthree-title">
                <div>热门教程</div>
                <a target="_blank"  target="_blank" href="https://www.php.cn/k.html">更多>
                </a>
            </div>
            <div class="wzrthreelist">
                <div class="wzrthreeTab">
                    <div class="check tabdiv" data-id="one">相关推荐 <div></div></div>
                    <div class="tabdiv" data-id="two">热门推荐<div></div></div>
                    <div class="tabdiv" data-id="three">最新课程<div></div></div>
                </div>
                <ul class="one">
                <script type="text/javascript" src="https://teacher.php.cn/php/MTJjOWU0YjVmMmE1MzI1OTgyNzRlYmJmYjE0MmZkNWY6Og==" ></script>
                                    </ul>
                <ul class="two" style="display: none;">
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >68704次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>
                                <div class="wzrthreerb">
                                    <div >1503458次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="812"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="phpStudy极速入门视频教程"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/639.html">phpStudy极速入门视频教程</a>
                                <div class="wzrthreerb">
                                    <div >532095次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="639"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/379.html" title="独孤九贱(4)_PHP视频教程" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="独孤九贱(4)_PHP视频教程"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/379.html">独孤九贱(4)_PHP视频教程</a>
                                <div class="wzrthreerb">
                                    <div >1257279次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="379"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="PHP实战天龙八部之仿爱奇艺电影网站"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/801.html">PHP实战天龙八部之仿爱奇艺电影网站</a>
                                <div class="wzrthreerb">
                                    <div >773464次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="801"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                    </ul>
                <ul class="three" style="display: none;">
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png" alt="最新Python教程 从入门到精通"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/1696.html">最新Python教程 从入门到精通</a>
                                <div class="wzrthreerb">
                                    <div >5200次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1696"><img src="/static/images/images/icon-small-collect.png" class="nofollow">取消收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >68704次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png" alt="PHP新手语法线上课程教学"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/1655.html">PHP新手语法线上课程教学</a>
                                <div class="wzrthreerb">
                                    <div >7785次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1655"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/1654.html" title="支付宝沙箱支付（个人也能用的支付）" class="wzrthreelaimg">
                                <img src="https://img.php.cn/teacher/course/20240819/172406094466c31510e008b.jpg" alt="支付宝沙箱支付（个人也能用的支付）"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/1654.html">支付宝沙箱支付（个人也能用的支付）</a>
                                <div class="wzrthreerb">
                                    <div >5005次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1654"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank"  target="_blank" href="/course/1650.html" title="麻省理工大佬Python课程" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/66592dcfeb1b4698.png" alt="麻省理工大佬Python课程"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank"  target="_blank" href="/course/1650.html">麻省理工大佬Python课程</a>
                                <div class="wzrthreerb">
                                    <div >46290次学习</div>
                                                                            <a target="_blank"  class="courseICollection" data-id="1650"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a>
                                                                    </div>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                $('.wzrthreeTab>div').click(function(e){
                    $('.wzrthreeTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrthreelist>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>


        <script>
                $(document).ready(function(){
                    var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                        speed:1000,
                        autoplay:{
                            delay:3500,
                            disableOnInteraction: false,
                        },
                        pagination:{
                            el:'.sjyx_banSwiperwz .swiper-pagination',
                            clickable :false,
                        },
                        loop:true
                    });
                    loading();
                    
                })


                function loading(reloading=false){
                    if(reloading){
                        $("#ai_doubao2_3_wait_right").show();
                        $("#ai_doubao2_3_wait_left").show();
                        $("#doubao_error_right").hide();
                        $("#doubao_error_left").hide();
                    }
                    $.ajax({
                        url:'/index.php/api/process?sign=&id=235369&time='+Date.now(),
                        dataType:'json',
                        async:true,
                        headers: {
                            "X-Requested-With": "XMLHttpRequest" // 标记为异步请求
                        },
                        type:'post',
                        success:function(result){
                            if(result.code!=1){
                                $("#doubao_error_right").show();
                                $("#ai_doubao2_3_wait_right").hide();
                                $("#doubao_error_left").show();
                                $("#ai_doubao2_3_wait_left").hide();
                            }else{
                                $("#ai_doubao2_3_wait_right").hide();
                                $("#ai_doubao2_3_wait_left").hide();
                                let doubao_answer = `<p>`+result.data.content+`</p>`;
                                $("#doubao_answer_right").html(doubao_answer);
                                $("#doubao_answer_left").html(doubao_answer);
                                let doubao_titles = '';
                                if(result.data.title){
                                    $.each(result.data.title,function(k,v){
                                        doubao_titles+=`<div class="ai_doubao2_2s"><a target="_blank"  rel="nofollow" target="_blank" href="https://doubao.com/chat/new-thread?flow_tracking_source=360_php&channel=360_php_abstract&source=360_db_php_abstract&keywordid=`+"235369"+`&query=参考https://www.php.cn`+"/faq/235369.html的内容，"+encodeURIComponent(v)+`" title="`+v+`"><p><img src="/static/images/doubao_yellowstar.png" alt=""> `+v+`</p></a></div>`;
                                    })
                                    
                                }

                                yigeyigezichulai(ai_doubao_titles_show,doubao_titles);
                            }
                        }
                    })
                }

                function ai_doubao_titles_show(str){
                    $("#ai_doubao_titles_right").html(str);
                    $("#ai_doubao_titles_left").html(str);
                }
                function yigeyigezichulai(callback,str){
                    const textElements = document.querySelectorAll('.yigeyigezichulai p');
                    textElements.forEach(textElement => {
                        const originalHTML = textElement.innerHTML; 
                        const tempDiv = document.createElement('div'); 
                        tempDiv.innerHTML = originalHTML;

                        const fragments = [];
                        Array.from(tempDiv.childNodes).forEach(node => {
                            if (node.nodeType === Node.TEXT_NODE) {
                                fragments.push(...node.textContent.split(''));
                            } else {
                                fragments.push(node.outerHTML);
                            }
                        });

                        textElement.innerHTML = ''; 
                        let index = 0;

                        const interval = setInterval(() => {
                            if (index < fragments.length) {
                                const fragment = fragments[index];
                                
                                
                                if (fragment.startsWith('<')) {
                                    textElement.innerHTML += fragment;
                                } else {
                                    textElement.innerHTML += fragment;
                                }
                            } else {
                                clearInterval(interval);
                                callback(str);
                            }
                            index++;
                        }, 25); // 每 100 毫秒显示一个片段
                    });
                }
                            

                // 豆包等待动画
                const containers = document.querySelectorAll('.ai_doubao2_3_wait') || [];
                    if (containers.length > 0) {
                        containers.forEach(container => {
                        if (container && container.firstElementChild) {
                            const intervalId = setInterval(() => {
                            if (!container || !container.firstElementChild) {
                                clearInterval(intervalId);
                                return;
                            }
                            const firstChild = container.firstElementChild;
                            container.appendChild(firstChild);
                            }, 300);
                        }
                        });
                    }
                    // AI总结相关功能
                    const aiZongjie = document.querySelector('.ai_zongjie');
                    const aiDoubao = document.querySelector('.ai_doubao');
                    const closeButton = document.querySelector('.ai_doubao1_R_img');
                    if (aiZongjie && aiDoubao && closeButton) {
                        aiZongjie.addEventListener('click', () => {
                        aiDoubao.style.display = 'block';
                        });
                        closeButton.addEventListener('click', () => {
                        aiDoubao.style.display = 'none';
                        });
                    }
                    // 文字动画效果
                    const textElements = document.querySelectorAll('.ai_doubao2_3s.ai_doubao2_3s_L p') || [];
                    if (textElements.length > 0) {
                        textElements.forEach(textElement => {
                        if (!textElement) return;
                        const originalHTML = textElement.innerHTML;
                        const tempDiv = document.createElement('div');
                        tempDiv.innerHTML = originalHTML;
                        const fragments = [];
                        Array.from(tempDiv.childNodes).forEach(node => {
                            if (!node) return;
                            if (node.nodeType === Node.TEXT_NODE) {
                            fragments.push(...(node.textContent || '').split(''));
                            } else {
                            fragments.push(node.outerHTML);
                            }
                        });
                        if (fragments.length === 0) return;
                        textElement.innerHTML = '';
                        let index = 0;
                        const interval = setInterval(() => {
                            if (!textElement || index >= fragments.length) {
                            clearInterval(interval);
                            return;
                            }
                            const fragment = fragments[index];
                            if (fragment) {
                            textElement.innerHTML += fragment;
                            }
                            index++;
                        }, 100);
                        });
                    }
                    // 页面滚动监听相关
                    const divai_zongjie1 = document.getElementById('ai_zongjie1');
                    const divai_zongjie2 = document.getElementById('ai_zongjie2');
                    const divai_zongjie3 = document.getElementById('ai_zongjie3');
                    if (divai_zongjie2) {
                        const observer = new IntersectionObserver((entries) => {
                        entries.forEach(entry => {
                            if (!entry.isIntersecting && divai_zongjie1) {
                            try {
                                divai_zongjie1.style.display = 'flex';
                                requestAnimationFrame(() => {
                                if (divai_zongjie1) {
                                    divai_zongjie1.classList.add('visible');
                                }
                                });
                            } catch (e) {
                                console.log('元素操作失败');
                            }
                            } else if (divai_zongjie1) {
                            try {
                                divai_zongjie1.classList.remove('visible');
                                divai_zongjie1.addEventListener('transitionend', () => {
                                if (divai_zongjie1 && !divai_zongjie1.classList.contains('visible')) {
                                    divai_zongjie1.style.display = 'none';
                                }
                                }, { once: true });
                                if (divai_zongjie3 && divai_zongjie3.style) {
                                divai_zongjie3.style.display = 'none';
                                }
                            } catch (e) {
                                console.log('元素操作失败');
                            }
                            }
                        });
                        }, {
                        threshold: 0,
                        rootMargin: '-90px 0px 0px 0px'
                        });
                        try {
                        observer.observe(divai_zongjie2);
                        } catch (e) {
                        console.log('观察器初始化失败');
                        }
                        // 滚动事件处理
                        window.addEventListener('scroll', () => {
                        const scrollY = window.scrollY || window.pageYOffset;
                        if (divai_zongjie2) {
                            try {
                            divai_zongjie2.style.display = scrollY > 1000 ? 'none' : 'block';
                            } catch (e) {
                            console.log('滚动处理失败');
                            }
                        }
                        });
                    }

            </script>
            
        <div class="wzrFour">
            <div class="wzrfour-title">
                <div>最新下载</div>
                <a target="_blank"  href="/xiazai">更多>
                </a>
            </div>
                            <div class="swiper-container  sjyx_banSwiperwz">
                    <ul class="swiper-wrapper">
                                                    <li class="swiper-slide">
                                <a target="_blank"  href="/xiazai/code/8587" target="_blank" title="新鲜有机肉类宣传网站模板">
                                    <img src="https://img.php.cn/upload/webcode/000/000/005/173613957275112.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="新鲜有机肉类宣传网站模板">
                                </a>
                            </li>
                                                    <li class="swiper-slide">
                                <a target="_blank"  href="/xiazai/code/8590" target="_blank" title="驾照考试驾校HTML5网站模板">
                                    <img src="https://img.php.cn/upload/webcode/000/000/011/174954240445579.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="驾照考试驾校HTML5网站模板">
                                </a>
                            </li>
                                                    <li class="swiper-slide">
                                <a target="_blank"  href="/xiazai/code/8588" target="_blank" title="HTML5房地产公司宣传网站模板">
                                    <img src="https://img.php.cn/upload/webcode/000/000/018/173613957345012.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="HTML5房地产公司宣传网站模板">
                                </a>
                            </li>
                                                <div class="clear"></div>
                    </ul>
                    <div class="swiper-pagination"></div>
                </div>
                        
            <div class="wzrfourList">
                <div class="wzrfourlTab">
                    <div class="check" data-id="onef">网站特效 <div></div></div>
                    <div class="" data-id="twof">网站源码<div></div></div>
                    <div class="" data-id="threef">网站素材<div></div></div>
                    <div class="" data-id="fourf">前端模板<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="CSS3聚光灯下倒影文字特效" href="/xiazai/js/8072">[文字特效] CSS3聚光灯下倒影文字特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="jQuery企业留言表单联系代码" href="/xiazai/js/8071">[表单按钮] jQuery企业留言表单联系代码</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="HTML5 MP3音乐盒播放特效" href="/xiazai/js/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="HTML5炫酷粒子动画导航菜单特效" href="/xiazai/js/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="jQuery可视化表单拖拽编辑代码" href="/xiazai/js/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="VUE.JS仿酷狗音乐播放器代码" href="/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="经典html5推箱子小游戏" href="/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  target="_blank"  title="jQuery滚动添加或减少图片特效" href="/xiazai/js/8065">[图片特效] jQuery滚动添加或减少图片特效</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="twof" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11353" title="雅龙智能装备工业设备类WordPress主题1.0" target="_blank">[企业站源码] 雅龙智能装备工业设备类WordPress主题1.0</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11352" title="威发卡自动发卡系统" target="_blank">[电商源码] 威发卡自动发卡系统</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11351" title="卡密分发系统" target="_blank">[电商源码] 卡密分发系统</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11350" title="中华陶瓷网" target="_blank">[电商源码] 中华陶瓷网</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11349" title="简洁粉色食品公司网站" target="_blank">[电商源码] 简洁粉色食品公司网站</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11348" title="极速网店系统" target="_blank">[电商源码] 极速网店系统</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11347" title="淘宝妈妈_淘客推广系统" target="_blank">[电商源码] 淘宝妈妈_淘客推广系统</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/11346" title="积客B2SCMS商城系统" target="_blank">[电商源码] 积客B2SCMS商城系统</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="threef" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4078"  target="_blank"  title="抽象涂鸦风假日派对海报矢量">[网站素材] 抽象涂鸦风假日派对海报矢量</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4077"  target="_blank"  title="创意酒杯圣诞树插画矢量素材">[网站素材] 创意酒杯圣诞树插画矢量素材</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4076"  target="_blank"  title="复古风格早餐美食宣传单A5模板下载">[网站素材] 复古风格早餐美食宣传单A5模板下载</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4075"  target="_blank"  title="商务办公职场手绘插图矢量素材">[网站素材] 商务办公职场手绘插图矢量素材</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4074"  target="_blank"  title="INS风格世界宗教日主题宣传模板下载">[网站素材] INS风格世界宗教日主题宣传模板下载</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4073"  target="_blank"  title="创意线描马匹插画合集矢量素材">[网站素材] 创意线描马匹插画合集矢量素材</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4072"  target="_blank"  title="手绘风咖啡饮品店招贴海报设计下载">[网站素材] 手绘风咖啡饮品店招贴海报设计下载</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/sucai/4071"  target="_blank"  title="时尚服装店中横幅banner设计下载">[网站素材] 时尚服装店中横幅banner设计下载</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="fourf" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8590"  target="_blank" title="驾照考试驾校HTML5网站模板">[前端模板] 驾照考试驾校HTML5网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8589"  target="_blank" title="驾照培训服务机构宣传网站模板">[前端模板] 驾照培训服务机构宣传网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8588"  target="_blank" title="HTML5房地产公司宣传网站模板">[前端模板] HTML5房地产公司宣传网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8587"  target="_blank" title="新鲜有机肉类宣传网站模板">[前端模板] 新鲜有机肉类宣传网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8586"  target="_blank" title="响应式天气预报宣传网站模板">[前端模板] 响应式天气预报宣传网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8585"  target="_blank" title="房屋建筑维修公司网站CSS模板">[前端模板] 房屋建筑维修公司网站CSS模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8584"  target="_blank" title="响应式志愿者服务网站模板">[前端模板] 响应式志愿者服务网站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  href="/xiazai/code/8583"  target="_blank" title="创意T恤打印店网站HTML5模板">[前端模板] 创意T恤打印店网站HTML5模板</a>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                $('.wzrfourlTab>div').click(function(e){
                    $('.wzrfourlTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrfourList>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>
    </div>
</div>
<!--主体 end-->
<!--底部-->
<div class="phpFoot">
    <div class="phpFootIn">
        <div class="phpFootCont">
            <div class="phpFootLeft">
                <dl>
                    <dt>
                        <a target="_blank"  href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a>
                        <a target="_blank"  href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a>
                        <a target="_blank"  href="/about/jbzx.html" rel="nofollow" target="_blank" title="举报中心" class="cBlack">举报中心</a>
                        <a target="_blank"  href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')"   title="意见反馈" class="cBlack">意见反馈</a>
                        <a target="_blank"  href="https://www.php.cn/teacher.html" rel="nofollow"  target="_blank" title="讲师合作" class="cBlack">讲师合作</a>
                        <a target="_blank"  href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>
                        <a target="_blank"  href="/new/"   target="_blank" title="最新文章列表" class="cBlack">最新更新</a>
                                                <div class="clear"></div>
                    </dt>
                    <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd>
                    <dd class="cont2">
                      <span class="ylwTopBox">
                        <a target="_blank"  href="javascript:;"  class="cBlack"><b class="icon1"></b>关注服务号</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>微信扫码<br/>关注PHP中文网服务号</p>
                          <img src="/static/images/examples/text16.png"/>
                        </em>
                      </span>
                        <span class="ylwTopBox">
                        <a target="_blank"  href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes" target="_blank" class="cBlack"><b class="icon2"></b>技术交流群</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>QQ扫码<br/>加入技术交流群</p>
                          <img src="/static/images/examples/text18.png"/>
                        </em>
                      </span>
                        <div class="clear"></div>
                    </dd>
                </dl>
                
            </div>
            <div class="phpFootRight">
                <div class="phpFootMsg">
                    <span><img src="/static/images/examples/text17.png"/></span>
                    <dl>
                        <dt>PHP中文网订阅号</dt>
                        <dd>每天精选资源文章推送</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="phpFootCode">
        <div class="phpFootCodeIn"><p>Copyright 2014-2025 <a target="_blank"  href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a target="_blank"  href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a target="_blank"  href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><b></b></a></div>
    </div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

<span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>

<script src="/static/js/cdn.js?v=1.0.1"></script>



<!--底部 end-->
<script>
    $(function() {
        //直播倒计时
        $(".liveitem").each(function(){
            timer(this);
        })
        function timer(obj){
            var intDiff = $(obj).data("countdown");
            window.setInterval(function(){
                var day=0,
                    hour=0,
                    minute=0,
                    second=0;//时间默认值
                if(intDiff > 0){
                    day = Math.floor(intDiff / (60 * 60 * 24));
                    hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                    minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                }else{
                    $(obj).find(".phpZbktBg").remove();
                    return;
                }
                if (hour <= 9) hour = '0' + hour;
                if (minute <= 9) minute = '0' + minute;
                if (second <= 9) second = '0' + second;
                $(obj).find('.day_show').html(day+"");
                $(obj).find('.hour_show').html('<s id="h"></s>'+hour+'');
                $(obj).find('.minute_show').html('<s></s>'+minute+'');
                $(obj).find('.second_show').html('<s></s>'+second+'');
                intDiff--;
            }, 1000);
        }
    });
</script>
<script type="text/javascript" src="/hitsUp?type=article&id=235369&time=1766084968"></script>
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1766084968"></script>
<script>article_status = "0";</script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<!-- <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> -->
<input type="hidden" id="verifycode" value="/captcha.html">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/common_new.js?2.1" ></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script>
<script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script>var topadshow = $.cookie('phpcndatatopadshows');if(!topadshow&&1==2){$('.topimages').show();var topobj = $('.topimages').find('.time');var topobj_day = $('.topimages .time').find('.day');var topobj_hours = $('.topimages .time').find('.hours');var topobj_minutes = $('.topimages .time').find('.minutes');var topobj_second = $('.topimages .time').find('.second');var topday = parseInt(topobj_day.html());var tophours = parseInt(topobj_hours.html());var topminutes = parseInt(topobj_minutes.html());var topsecond = parseInt(topobj_second.html());setInterval(function(){if(topsecond > 0){topsecond = topsecond-1;}else{if(topminutes > 0){topminutes = topminutes-1;topsecond = 59;}else{if(tophours > 0){tophours = tophours-1;topminutes = 59;topsecond = 59;}else{if(topday > 0){topday = topday -1;tophours = 23;topminutes = 59;topsecond = 59;}else{topobj.html("<p><span>活动已结束</span></p>");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});</script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/>
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<style>
        .content img{max-width:100%;}
        .copy-button {
            padding: 5px 10px;
            background-color: #666;
            border: none;
            color: #FFF;
            font-size: 12px;
            cursor: pointer;
            border-radius: 5px;
            position: relative;
            top: 33px;
    right: 5px;
    z-index: 99;
    float: right;
        }
        .copy-button:hover {
            background-color: #fc3930;
        }
    </style>
<script>
    $(document).ready(function(){
        $('#gongzhonghao').hover(function(){
            $('#gzh').show();
        },function(){
            $('#gzh').hide();
        })
    })
</script>
<script>
    layui.use(['jquery','layer'], function(){
        $('.test-iframe-handle').click(function(){
                layer.open({
                type: 2,
                area: ['1300px', '750px'],
                content: 'https://www.php.cn/help/ask?q=%E3%80%8AJava+Script+DOM%E7%BC%96%E7%A8%8B%E8%89%BA%E6%9C%AF%E3%80%8B%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0--DOM_html%2Fcss_WEB-ITnose',
                fixed: true, // 不固定
                //maxmin: true,
                shadeClose: true,
                title:"智能小助手",
                btnAlign: 'c',
                yes: function(index, layero){
                    // 获取 iframe 的窗口对象
                    var iframeWin =  window[layero.find('iframe')[0]['name']];
                    var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
                    var value = elemMark.val();
                    if($.trim(value) === '') return elemMark.focus();
                    // 显示获得的值
                    layer.msg('获得 iframe 中的输入框标记值：'+ value);
                }
                });
            })
        var is_login = "0";
        var show = 0;
        var ceng = getCookie('ceng');
        //文章下拉弹出登录
        // if(is_login == 0 && !ceng)
        // {
        //     window.onscroll = function(){
        //         var t = document.documentElement.scrollTop || document.body.scrollTop;
        //         var top_div = document.getElementById( "top_div" );
        //         if( t >= 2500 && show == 0) {
        //             show = 1
        //             setCookie('ceng',1,1);
        //             $(document).trigger("api.loginpopbox");
        //         }
        //     }
        // }
        //未登录复制显示登录按钮
        if(is_login == 0 && false){
            $(".code").hover(function(){
                $(this).find('.contentsignin').show();
            },function(){
                $(this).find('.contentsignin').hide();
            });
            //不给复制
            $('.code').bind("cut copy paste",function(e) {
                e.preventDefault();
            });
            $('.code .contentsignin').click(function(){
                $(document).trigger("api.loginpopbox");
            })
        }else{
            // 获取所有的 <pre> 元素
            var preElements = document.querySelectorAll('pre');
            preElements.forEach(function(preElement) {
                // 创建复制按钮
                var copyButton = document.createElement('button');
                copyButton.className = 'copy-button';
                copyButton.textContent = '复制';
                // 添加点击事件处理程序
                copyButton.addEventListener('click', function() {
                    // 获取当前按钮所属的 <pre> 元素中的文本内容
                    var textContent = preElement.textContent.trim();
                    // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容
                    var tempTextarea = document.createElement('textarea');
                    tempTextarea.value = textContent;
                    // 将临时 textarea 添加到文档中
                    document.body.appendChild(tempTextarea);
                    // 选中临时 textarea 中的文本内容并执行复制操作
                    tempTextarea.select();
                    document.execCommand('copy');
                    // 移除临时 textarea 元素
                    document.body.removeChild(tempTextarea);
                    // 更新按钮文本为 "已复制"
                    this.textContent = '已复制';
                });

                // 创建AI写代码按钮
                var aiButton = document.createElement('button');
                aiButton.className = 'copy-button';
                aiButton.textContent = 'AI写代码';
                aiButton.style.marginLeft = '5px';
                aiButton.style.marginRight = '5px';
                // 添加点击事件处理程序
                aiButton.addEventListener('click', function() {
                // Generate a random number between 0 and 1
                        var randomChance = Math.random();

                    // If the random number is less than 0.5, open the first URL, else open the second
                    if (randomChance < 0.5) {
                        window.open('https://www.doubao.com/chat/coding?channel=php&source=hw_db_php', '_blank');
                    } else {
                        window.open('https://click.aliyun.com/m/1000402709/', '_blank');
                    }
                });

                // 将按钮添加到 <pre> 元素前面
                preElement.parentNode.insertBefore(copyButton, preElement);
                preElement.parentNode.insertBefore(aiButton, preElement);
        });
        }
    })
    function setCookie(name,value,iDay){      //name相当于键，value相当于值，iDay为要设置的过期时间（天）
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + iDay);
        document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate;
    }
    function getCookie(name) {
        var cookieArr = document.cookie.split(";");
        for(var i = 0; i < cookieArr.length; i++) {
            var cookiePair = cookieArr[i].split("=");
            if(name == cookiePair[0].trim()) {
                return decodeURIComponent(cookiePair[1]);
            }
        }
        return null;
    }

    function aiask(ask){
        layer.open({
            type: 2,
            area: ['1300px', '750px'],
            content: 'https://www.php.cn/help/ask?q='+encodeURIComponent(ask),
            fixed: true, // 不固定
            //maxmin: true,
            shadeClose: true,
            title:"智能小助手",
            btnAlign: 'c',
            yes: function(index, layero){
                // 获取 iframe 的窗口对象
                var iframeWin =  window[layero.find('iframe')[0]['name']];
                var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
                var value = elemMark.val();
                if($.trim(value) === '') return elemMark.focus();
                // 显示获得的值
                layer.msg('获得 iframe 中的输入框标记值：'+ value);
            }
        });
    }

</script>
<!--底部浮动层-->
<!--
    <div class="phpFudong">
        <div class="phpFudongIn">
            <div class="phpFudongImg"></div>
            <div class="phpFudongXue">登录PHP中文网，和优秀的人一起学习！</div>
            <div class="phpFudongQuan">全站<span>2000+</span>教程免费学</div>
            <div class="phpFudongCode"><a href="javascript:;" id="login" title="微信扫码登录">微信扫码登录</a></div>
            <div class="phpGuanbi" onclick="$('.phpFudong').hide();"></div>
            <div class="clear"></div>
        </div>
    </div>
--><!--底部浮动层 end-->
<!--侧导航-->
<style>
    .layui-fixbar{display: none;}
</style>
<div class="phpSdhBox" style="height:240px !important;">
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a href="/k24.html" target="_blank" class="hover" title="PHP学习">
                    <b class="icon1"></b>
                    <p>PHP学习</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a href="https://www.php.cn/blog/detail/1047189.html" target="_blank">
                    <b class="icon2"></b>
                    <p>技术支持</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a href="#">
                    <b class="icon6"></b>
                    <p>返回顶部</p>
                </a>
            </div>
        </div>
    </li>
</div>
<!--侧导航 end-->
<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://tongji.php.cn/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '11']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

<script>
    setCookie('is_article', 1, 1);
</script>
</body>
</html>