我是靠谱客的博主 热心冷风,这篇文章主要介绍Java Web应用开发_03 JavaScript技术03 JavaScript技术,现在分享给大家,希望可以做个参考。

Java Web应用开发_03 JavaScript技术

  • 03 JavaScript技术
    • 节内小测
      • 3.1 JavaScript语言基础
      • 3.2 JavaScript 事件与常用对象
    • 03 JS技术--单元测验

03 JavaScript技术

节内小测

3.1 JavaScript语言基础

1.在HTML中嵌入JavaScript,应该使用的标记是(   A   ) 
A.〈script〉〈/script〉
B.〈head〉〈/head〉
C.〈body〉〈/body〉
D.〈JS〉〈/JS〉

2.下面选项中,对JavaScript语言描述正确的是( A、B、D )。
A.JavaScript是Web页面中的一种脚本语言文字。
B.JavaScript用于为页面添加动态效果。
C.JavaScript可以替代html和css。
D.JavaScript语言的前身是LiveScript语言。

3.alert()函数主要用于弹出警示对话框,通常用于对用户进行提示。( 对√ )

4.Javascript脚本文件的扩展名是 .js

5.分析如下的JavaScript代码段, 则运行后在页面上输出(  1010 )

 var c="10",d=10; 

document.write(c+d)  

3.2 JavaScript 事件与常用对象

1.在HTML页面上包含如下所示的层对象,则javascript语句document.getElementById(“info”).innerHTML的值是( B )

< div id=”info” style=”display:block”>< p>请填写< /p>< /div>

A.请填写
B.< p>请填写< / p>
C.id=“info”  style=”display:block”
D.< div id=”info” style=”display:block”>< p>请填写< /p>< /div>

2.在HTML中,点击图片”previous.gif”上的超级链接后页面将加载历史列表中的上一个URL页面。代码如下所示,应在下划线处填入( A )

< a href=_________>< img src=”previous.gif” width=67” height=21>< /a>

A.”javascript:history.go(-1)”
B.“history.go(1)”
C.“history.go(-1)”
D.“javascript:history.go(1)”

3.分析下面的Javascript代码段,输出结果是( C )

var mystring=”I am a student”; 

var a=mystring.substring(9,13); 

 document.write(a);

A.stud
B.tuden
C.uden
D.udent

4.采用_事件_ _ _驱动是JavaScript语言的一个最基本特征。

5.在JavaScript中可以使用Date对象的( getDate() )方法返回该对象的日期。

03 JS技术–单元测验

1单选(2分)
下列选项中,哪个 HTML 元素中可以放置 Javascript 代码?( A )
A.
B.< javascript>
C.< scripting>
D.< js>

2单选(2分)
下列选项中,JavaScript运算符的优先级最高的是( D )
A.+
B.++
C.=
D.()

解析: C、JavaScript运算符均有明确的优先级与结合性,优先级较高的运算符将先于优先级较低的运算符进行运算。运算符“.、 [ ]、()”的优先级最高。

3单选(2分)
在JavaScript中,事件处理的过程通常分为( B )步。
A.5
B.3
C.4
D.2

解析: A、事件处理过程一般分为1、发生事件2、启动事件处理程序3、事件处理程序作出反应。

4单选(2分)
认真阅读下面代码,并按要求进行作答。

var i=9

var ii=(i>8)?100:9;

alert(ii);

在以上语句执行后,输出的结果是(B )
A.null
B.100
C.9
D.8

解析: A、条件运算符是JavaScript中的一种特殊的三目运算符,其语法格式如下: 操作数?结果1:结果2
若操作数的值为true,则整个表达式的结果为“结果1”,否则为“结果2”。

5单选(2分)
下列能产生当前日期的是 C
A.Now();
B.new Date()
C.Date();
D.new Noe()

6判断(2分)
在实际开发中,开发者只需将后台数据展示在相应页面即可,无需关心前台界面中的JS代码。( 错 )

7判断(2分)
在文档对象节点树中,具有相同父节点的节点叫做“父节点”。( 错 )

解析:具有相同父节点的节点叫做“兄弟节点”

8判断(2分)
JavaScript是Web上一种功能强大的编程语言,用于开发交互式的Web页面。它不需要进行编译,而是直接嵌入在HTML页面中,把静态页面转变成支持用户交互并响应事件的动态页面。

9判断(2分)
JavaScript不需要区分字母大小写。

解析:JavaScript严格区分字母大小写

10判断(2分)
在 HTML文档中引入JavaScript,有直接嵌入JavaScript脚本和链接外部JavaScript脚本两种。( )

11填空(2分)
DOM(Document Object Model)称为__文档对象模型__,是一个表示和处理文档的应用程序接口(API),可用于动态访问、更新文档的内容、结构和样式。

解析: DOM(Document Object
Model)称为文档对象模型,是一个表示和处理文档的应用程序接口(API),可用于动态访问、更新文档的内容、结构和样式。

12填空(2分)
采用__事件__驱动是JavaScript语言的一个最基本特征。

解析:
所谓的事件是指用户在访问页面时执行的操作。当浏览器探测到一个事件时,比如,单击鼠标或按键,它可以触发与这个事件相关联的JavaScript对象。

13填空(2分)
请阅读下面的程序,在空白处填写正确的代码。
< 1 >我是一个一级标题喔!</ 1 >
< 2 >我是一段文字。</ 2 >

h1;p

14填空(2分)
请阅读下面无序列表搭建的结构,根据注释中的要求填写代码。

  • T恤
  • 连衣裙
  • 裤子
circle;square

解析: 在无序列表中type属性用于指定列表项目符号,其常用属性值有三个,分别是
disc、circle、square,其中disc显示为默认的实心小圆圈样式;circle显示为空心小圆圈样式;square显示为实心小方块样式。

15填空(2分)
在JavaScript中可以使用Date对象的( getDate() )方法返回该对象的日期。

最后

以上就是热心冷风最近收集整理的关于Java Web应用开发_03 JavaScript技术03 JavaScript技术的全部内容,更多相关Java内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(136)

相关文章

html常用语义化元素和全局属性整理WWW<HTML>元素全局属性<id>全局属性<class>全局属性<title>全局属性<lang>全局属性标签与元素<link>外部资源链接元素<a>内联元素<artice>块级元素<section>块级元素<nav>块级元素<aside>块级元素<h1~h6>块级元素<header>块级元素<footer>块级元素<address>块级元素<p>块级元素<hr>块级元素<pre>块级元素<blockquote>块级元素<ol>块级元素<ul>块级元素<l
html常用语义化元素和全局属性整理WWW元素全局属性全局属性全局属性全局属性<lang>全局属性标签与元素<link>外部资源链接元素<a>内联元素<artice>块级元素<section>块级元素<nav>块级元素<aside>块级元素<h1~h6>块级元素<header>块级元素<footer>块级元素<address>块级元素<p>块级元素<hr>块级元素<pre>块级元素<blockquote>块级元素<ol>块级元素<ul>块级元素<l</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_z_2_5.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="https://file2.kaopuke.com:8081/files_image/reation/bcimg6.png" alt="HTML5学习笔记-常用标记" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_z_2_5.html">HTML5学习笔记-常用标记</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_zcw.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="https://file2.kaopuke.com:8081/files_image/reation/bcimg7.png" alt="HTML元素的分类" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_zcw.html">HTML元素的分类</a></h5> </div> <!-- E 相关文章 --> </div> </div> <div class="clearfix"></div> </div> </div> <div class="panel panel-default" id="comments"> <div class="panel-heading"> <h3 class="panel-title">评论列表<small>共有 <span>0</span> 条评论</small></h3> </div> <div class="panel-body"> <div id="comment-container"> <!-- S 发表评论 --> <div id="postcomment"> <h3>发表评论 <a href="javascript:;"> <small>取消回复</small> </a></h3> <form action="/comment/post.html" method="post" id="postform"> <input type="hidden" name="__token__" value="20eef9ec57400b617cd828dd4c9f6f74" /> <input type="hidden" name="type" value="archives"/> <input type="hidden" name="artid" value="351767"/> <input type="hidden" name="pid" id="pid" value="0"/> <div class="form-group"> <textarea name="content" class="form-control" disabled placeholder="请登录后再发表评论" id="commentcontent" cols="6" rows="5" tabindex="4"></textarea> </div> <div class="form-group"> <a href="/index/user/login.html" class="btn btn-primary">登录</a> <a href="/index/user/register.html" class="btn btn-outline-primary">注册新账号</a> </div> </form> </div> <!-- E 发表评论 --> </div> </div> </div> </main> <aside class="col-xs-12 col-md-4"> <!--@formatter:off--> <!-- S 关于作者 --> <div class="panel panel-default about-author no-padding" data-id="74303" itemProp="author" itemscope="" itemType="http://schema.org/Person"> <meta itemProp="name" content="热心冷风"/> <meta itemProp="image" content="/assets/img/avatar.png"/> <meta itemProp="url" content="/u/k-p-k_13_uzo_10_fz_14__23__14__27_.html"/> <div class="panel-body no-padding"> <div class="author-card"> <div class="author-head" style="background-image:url('/assets/img/author-head.jpeg');"></div> <div class="author-avatar"> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_.html"> <img src="/assets/img/avatar.png"> </a> </div> <div class="author-basic"> <div class="author-nickname"> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_.html">热心冷风</a> </div> <span class="text-muted"></span> </div> <div class="row author-statistics"> <div class="col-xs-4"> <div class="statistics-text">文章</div> <div class="statistics-nums"><a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_.html">7</a></div> </div> <div class="col-xs-4"> <div class="statistics-text">资源</div> <div class="statistics-nums"><a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_.html?type=soft">0</a></div> </div> <div class="col-xs-4"> <div class="statistics-text">加入时间</div> <div class="statistics-nums">4年前</div> </div> </div> </div> </div> </div> <!-- E 关于作者 --> <!--@formatter:on--> <div class="panel panel-blockimg"> </div> <!-- S 热门文章 --> <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">热门文章</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_ujo_10_fy_12__7__2_w.html" title="理解Asp.Net中WebForm的生命周期_实用技巧">理解Asp.Net中WebForm的生命周期_实用技巧</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_ujokfx_14_z_22_w.html" title="MySQL8.0创建触发器">MySQL8.0创建触发器</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_ujokf1_12__7__2_4.html" title="第六章-项目进度管理">第六章-项目进度管理</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_uzo_6_fx_13_z_2_3.html" title="Java Web应用开发_03 JavaScript技术03 JavaScript技术">Java Web应用开发_03 JavaScript技术03 JavaScript技术</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_13_u_23_o_10_f4_14__7_g1.html" title="Linux Framebuffer编程之lcd屏幕显示jpeg图像">Linux Framebuffer编程之lcd屏幕显示jpeg图像</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_13_u_7_o_22_f4_12__7_cx.html" title="gRPC 初识gRPC 概念通讯协议HTTP2 协议上的 gRPC">gRPC 初识gRPC 概念通讯协议HTTP2 协议上的 gRPC</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_13_u_7_o_14_fx_13_j_6_w.html" title="塔望·食业研究|决胜终端,解析“排队王”品牌连锁店的门头战略">塔望·食业研究|决胜终端,解析“排队王”品牌连锁店的门头战略</a> </div> </div> </div> </div> <!-- E 热门文章 --> <!-- S 热门资讯 --> <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">推荐资讯</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfw_13_j_10__27_.html" title="开年首购!OpenAI 吞并 Convogo 团队,剑指人工智能云业务新布局">开年首购!OpenAI 吞并 Convogo 团队,剑指人工智能云业务新布局</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfz_14_j_26__27_.html" title="​蓝思科技港股上市引爆 462 倍超额认购!从手机玻璃到AI眼镜、人形机器人, 32 年精密制造巨头加速押注智能未来">​蓝思科技港股上市引爆 462 倍超额认购!从手机玻璃到AI眼镜、人形机器人, 32 年精密制造巨头加速押注智能未来</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfw_13_j_6__27_.html" title="开战在即!马斯克诉 OpenAI 获法官支持,3月将开启“AI 世纪大审判”">开战在即!马斯克诉 OpenAI 获法官支持,3月将开启“AI 世纪大审判”</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfz_14_j_22__27_.html" title="蚂蚁百灵发布 Ling Studio:官方大模型 Web 交互平台正式上线">蚂蚁百灵发布 Ling Studio:官方大模型 Web 交互平台正式上线</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfw_13_j_2__27_.html" title="得知三孩又是儿子爸爸笑容当场凝固:男宝女宝都一样">得知三孩又是儿子爸爸笑容当场凝固:男宝女宝都一样</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfz_14_j_18__27_.html" title="​警惕“AI 冲击波”:伦敦市长直言失控技术或成岗位摧毁武器">​警惕“AI 冲击波”:伦敦市长直言失控技术或成岗位摧毁武器</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfw_13_jc_27_.html" title="微信通知能显示好友头像了:仅限iOS设备">微信通知能显示好友头像了:仅限iOS设备</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfz_14_j_14__27_.html" title="谷歌 Chrome 赋予用户更高自主权:本地 AI 诈骗检测模型现可手动关闭">谷歌 Chrome 赋予用户更高自主权:本地 AI 诈骗检测模型现可手动关闭</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfw_13_jg_27_.html" title="微软AI掌门人Mustafa Suleyman发出警示:别把“对齐”当“控制”,可控性才是AI发展的生死红线">微软AI掌门人Mustafa Suleyman发出警示:别把“对齐”当“控制”,可控性才是AI发展的生死红线</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_12_u_23_ogfz_14_j_10__27_.html" title="谷歌扩大 AI 视频工具 Flow 访问权限:支持竖屏与 8 秒 4K 生成">谷歌扩大 AI 视频工具 Flow 访问权限:支持竖屏与 8 秒 4K 生成</a> </div> </div> </div> </div> <!-- E 热门资讯 --> <div class="panel panel-blockimg"> <a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=2qwpuaqd" rel="nofollow" title="推荐企业服务器" target="_blank"> <img src="/uploads/store/aliyun-sidebar.png" class="img-responsive" alt=""> </a> </div> <!-- S 热门标签 --> <div class="panel panel-default hot-tags"> <div class="panel-heading"> <h3 class="panel-title">热门标签</h3> </div> <div class="panel-body"> <div class="tags"> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_14_u_7_o_26_f3_12__7__10_3.html" class="tag"> <span>Photoshop教程</span></a> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_14_u_7_ocf1_13_z_10_z.html" class="tag"> <span>显卡</span></a> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_13_u_23_okfw_12__7__18_z.html" class="tag"> <span>WebForm</span></a> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_13_u_7_o_14_f5_14__7_gx.html" class="tag"> <span>mysql</span></a> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_13_u_7_o_10_fz_12__23__14_5.html" class="tag"> <span>PMP</span></a> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_13_u_7_okf4_12__7_cz.html" class="tag"> <span>Java Web应用开发</span></a> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_13_ujokfy_13_jk5.html" class="tag"> <span>嵌入式学习</span></a> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_13_uzo_2_fw_12__23_k0.html" class="tag"> <span>grpc</span></a> <a href="/u/k-p-k_13_uzo_10_fz_14__23__14__27_/category/k-p-k_13_uzocfz_14__23__6_5.html" class="tag"> <span>品牌营销</span></a> </div> </div> </div> <!-- E 热门标签 --> <!-- S 推荐下载 --> <div class="panel panel-default recommend-article"> <div class="panel-heading"> <h3 class="panel-title">推荐下载</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f2_14__26__27__27_.html" title="腾讯元宝">腾讯元宝</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_14_g_27__27_.html" title="PDF电子书翻页工具 Flip PDF Plus Corporate v7.1.25 激活版">PDF电子书翻页工具 Flip PDF Plus Corporate v7.1.25 激活版</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f2_14__10__27__27_.html" title="Liblib ai">Liblib ai</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_13_g_27__27_.html" title="文心一言">文心一言</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_14_w_27__27_.html" title="网络渗透测试软件 Burp Suite Professional 激活版 Win2025.7.4 / Mac2025.7.4">网络渗透测试软件 Burp Suite Professional 激活版 Win2025.7.4 / Mac2025.7.4</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f2_13__26__27__27_.html" title="360纳米ai">360纳米ai</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_13_w_27__27_.html" title="ChatGPT">ChatGPT</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_12__26__27__27_.html" title="通义千问">通义千问</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_13__26__27__27_.html" title="豆包">豆包</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f1_12__10__27__27_.html" title="Kimi助手">Kimi助手</a> </div> </div> </div> </div> <!-- E 推荐下载 --> <div class="panel panel-blockimg"> <a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=2qwpuaqd" target="_blank"><img src="/uploads/store/enterprisehost.png" class="img-responsive"/></a> </div> <div class="panel panel-blockimg"> <!-- You may also like --> </div> </aside> </div> </div> </main> <footer> <!-- S 底部版权 --> <div id="footer"> <div class="container"> <div class="row footer-inner"> <div class="col-xs-12"> <div class="pull-left"> <p>网站内容,均来自于用户原创和互联网,若有侵犯到您的权益请联系我们,核实删除。</p> <p>本站为非营利性网站,靠谱客的资源均来自网络收集整理,个人纯属学习交流之用,如有侵犯您的版权请与我联系(wx:kaopuke),我们会马上改正并在24小时内删除!</p> <p>Copyright © 2023 All Rights Reserved. <a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank">黔ICP备17011320号-2</a> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=52272602002071" rel="noreferrer" target="_blank">贵公网安备52272602002071</a></p> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e749fb7b04b857116f3a8b682641b74d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- E 底部版权 --> </footer> <div id="floatbtn"> <!-- S 浮动按钮 --> <a class="hover" href="/index/user/addarticle.html" target="_blank"> <i class="fa fa-paint-brush fa-lg"></i> <em>立即<br>投稿</em> </a> <div class="floatbtn-item floatbtn-share"> <i class="fa fa-share-alt fa-lg"></i> <div class="floatbtn-wrapper" style="height:50px;top:0"> <div class="social-share" data-initialized="true" data-mode="prepend"> <a href="#" class="social-share-icon icon-weibo" target="_blank"></a> <a href="#" class="social-share-icon icon-qq" target="_blank"></a> <a href="#" class="social-share-icon icon-qzone" target="_blank"></a> <a href="#" class="social-share-icon icon-wechat"></a> </div> </div> </div> <a id="back-to-top" class="hover" href="javascript:;"> <i class="fa fa-reply fa-lg"></i> <em>返回<br>顶部</em> </a> <!-- E 浮动按钮 --> </div> <script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/bootstrap/dist/js/bootstrap.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/fastadmin-layer/dist/layer.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/art-template/dist/template-native.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/jquery.autocomplete.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/swiper.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/share.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/cms.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/common.js?v=1.0.2"></script> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6850766", container: "_upguagn2t8", async: true }); (window.slotbydup = window.slotbydup || []).push({ id: "u6850838", container: "_12s5gcmjcvx", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script> <!-- 复制 --> <script src="/static/tool/clipboard.min.js"></script> <script> //代码高亮溢出显示滚动条 $('.main-content pre').each(function(){ var code = $(this).text(); $(this).wrap('<div class="auto" style="overflow:auto; position:relative;"></div>'); $(this).before('<span class="copyCode">复制代码</span><textarea style="display:none;">'+code+'</textarea>'); $(this).removeAttr("style",""); // $(this).wrap('<pre><code></code></pre>'); }); $('.main-content .codebody').each(function(){ var code = $(this).text(); $(this).wrap('<div class="auto" style="overflow:auto; position:relative;"></div>'); $(this).before('<span class="copyCode">复制代码</span><textarea style="display:none;">'+code+'</textarea>'); // $(this).wrap('<pre><code></code></pre>'); }); function unescapeSpecialChars(str) { return str .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&') .replace(/ /g, ' ') .replace(/"/g, '"') .replace(/'/g, '\''); } //复制代码 $('.copyCode').on('click',function(){ var txt = $(this).next().html(); txt = unescapeSpecialChars(txt); new ClipboardJS('.copyCode', {text: function() {return txt;}}); layer.msg('复制成功',{time:1000,offset:'100px'}); }); </script> <script> document.addEventListener("DOMContentLoaded", function() { const preElements = document.querySelectorAll("pre"); // 获取所有 <pre> 元素 preElements.forEach(pre => { const codeText = pre.innerHTML.trim(); // 获取代码块的内容 const lines = codeText.split("\n").length; // 计算代码行数 // 创建行号容器 const lineNumbers = document.createElement("div"); lineNumbers.className = 'line-numbers'; // 生成行号内容 let lineNumbersHtml = ''; for (let i = 1; i <= lines; i++) { lineNumbersHtml += i + '<br>'; } // 插入行号容器到 pre 元素中 lineNumbers.innerHTML = lineNumbersHtml; pre.appendChild(lineNumbers); // 保持代码块的格式化 pre.innerHTML = `<div class="line-numbers">${lineNumbersHtml}</div>` + `<div style="padding:5px 0 5px 43px;">${codeText}</div>`; }); }); </script> <style> .copyCode{ position:absolute; right:1px; z-index:999; background:rgba(255,255,255,0.5); border-bottom:1px solid #ddd; padding:2px 8px; font-size:11px !important; border-radius:4px; line-height:24px; cursor:pointer; } .copyCode:hover{ background:#fff; } pre code{ font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace; } .hljs { border-radius:4px; padding: 8px !important; } .hljs-ln td { padding: 2px 8px; } .hljs-ln-numbers { text-align: center; color: #abb2bf; background-color: #282c34; border-right: 1px solid #c5c5c5; vertical-align: top; } /* for block of code */ td .hljs-ln-code { padding-left: 5px; } pre { position: relative; padding-left: 5px; /* 为行号留出空间 */ background-color: #f8f9fa; border: 1px solid #e1e1e1; border-radius: 4px; font-size: 14px; line-height: 1.5; overflow-x: auto; } pre div { line-height: 26px; } /* 设置行号样式 */ pre .line-numbers { position: absolute; left: 0; top: 0; padding: 10px 10px; background-color: #f1f1f1; border-right: 1px solid #e1e1e1; text-align: right; user-select: none; color: #888; } *,:after,:before { border: 0 solid #e3e3e3; box-sizing: border-box; } .article-text table { --tw-border-spacing-x: 0px; --tw-border-spacing-y: 0px; border-collapse: separate; border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); margin-bottom: .25rem; margin-top: .25rem; width: 100%; } .article-text :where(thead):not(:where([class~=not-prose] *)) { border-bottom-color: rgb(209, 213, 219); border-bottom-width: 1px; } .article-text th:last-child { border-right-width: 1px; border-top-right-radius: .375rem; padding-right: .75rem; } .article-text th { border-left-width: 1px; } .article-text th:first-child { border-top-left-radius: .375rem; padding-left: .75rem; } .article-text th { border-left-width: 1px; background-color: rgba(0, 0, 0, 0.1) ; border-bottom-width: 1px; border-color: rgba(0, 0, 0, 0.1) ; border-top-width: 1px; padding: .25rem .75rem; } .article-text tr { border-bottom-color: var(--tw-prose-td-borders); border-bottom-width: 1px; } .article-text tr:first-child { padding-left: .75rem; } .article-text tbody tr:last-child td:first-child { border-bottom-left-radius: .375rem; } .article-text td:last-child { border-right-width: 1px; padding-right: .75rem; } .article-text td:first-child { padding-left: .75rem; } .article-text td { border-left-width: 1px; } .article-text :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose] *)) { padding-left: 0; } .article-text td { border-bottom-width: 1px !important; border-color: rgba(0, 0, 0, 0.1) ; padding: .25rem .75rem; } </style> </body> </html>