前端面试题整理

摘要：写在前面本小菜鸡开学其实已经开始了就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题。而有着固定的大小，高度超过规定高度就会出现滚动条。实现页面加载进度条我们可以将一整个页面大致分为，个区域。

本小菜鸡开学(其实已经开始了)就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题= =。悔不该当初没有好好学习quq！努力！

1.html5新增了哪些内容或api，使用过哪些？

HTML5新增input输入类型：

email类型

url类型

number类型提供选择数字的功能，其中min属性设定最小值，max属性设定最大值，value属性设置当前值，step属性设定每次增长值。

range类型，表示限制数字输入的范围域

日期和时间类型:date,month,week,time,datetime,datetime-local

search类型

tel类型

color类型

HTML5新增表单元素

datalist 规定输入域的选项列表

keygen提供一种可靠方法来验证用户

output用于不同类型的输出

还有更多细节内容不列在这里啦。请看这篇博客

2.input和textarea的区别?

是单行文本框。是多行文本框。</p> <p>3.用一个div模拟textarea的实现？</p> <p>首先我们需要知道div是高度自适应的，高度会随着内容的增加而增加。而textarea有着固定的大小，高度超过规定高度就会出现滚动条。</p> <p>div有一个属性叫做contenteditable，设置contenteditable属性为true就可以实现，div内容可编辑。</p> <p>实现了内容可编辑以后，在css中设置好规定的高度，设置overflow－y属性为auto,即可实现滚动条。</p> <p>4.移动设备忽略将页面中的数字识别为电话号码的方法?</p> <p>移动设备中经常会出现将一串数字识别为电话的情况，数字的颜色和样式都会变化，点击可以直接拨打。</p> <p>添加如下代码可以关闭识别。</p> <pre> <meta name = "format-detection" content = "telephone=no"> </pre> <p>5.<iframe>标签</p> <p><iframe>标签会创造一个包含另外一个文档的内联框架。</p> <p><iframe>标签很多用在页面广告。</p> <p> <p>问题：</p> <p>会影响页面的并行加载</p> <p>阻塞onload</p> </p> <p>可以使用js动态地为iframe的src加载页面内容</p> <p>6.load事件和DomContentLoaded事件</p> <p>DomContentLoaded事件在DOM元素加载完毕时触发，也就是HTML文档被加载和解析完成时。</p> <p>load事件是在页面上所有资源(包括图片、视频、音频)全部加载完时触发。</p> <p>详情请看这篇文章,写的非常清晰。</p> <b>CSS</b> <p>1.左右布局：左边定宽、右边自适应，不少于3种方法</p> <p>方法一：左边模块设置左浮动，右边模块宽度设置100%</p> <p>方法二：父容器设置display：flex；right部分设置flex：1。display：flex设置为弹性盒子，其子元素可以设置flex的数值来控制其所占空间的比例。</p> <p>方法三：使用负margin。设置左部分和右部分左浮动，并为right部分设置宽度100%。设置左部分左外边距为负100%。为了避免右部分的内容被覆盖，再为右部分设置添加左边距（左部分的宽度）。</p> <p>2.CSS3有哪些新特性?</p> <p> <p>CSS3的选择器</p> <p>E:last-child / E :nth-child(n) / E : nth-last-child(n) 倒数第n个元素</p> </p> <p>@Font-face特性用来加载字体样式，可以加载服务器端的字体，显示到客户端，即使客户端并没有安装该字体</p> <p>圆角:border-radius</p> <p>弹性盒子模式display：flex。 等等属性</p> <p>3.BFC与IFC</p> <p>首先解释FC(Formatting Contexts),这是CSS规范中的一个概念。它指页面中的一块渲染区域，有自己的渲染规则，规定了子元素如何定位，以及和其他元素间的相互作用。</p> <p>BFC(Block Formatting Contexts),块级格式化上下文。BFC就是页面上一块隔离的渲染区域，容器内的子元素不会影响外界元素的布局。</p> <p>IFC(Inline Formatting Contexts),内联格式化上下文。IFC的line box高度由其包含的行内元素最高的实际高度计算而来。IFC可以理解为一种盒子从左到右的水平排列方式。</p> <p>4.对栅格的理解</p> <p>栅格布局由三个部分组成——容器(container)、行(row)、列(column)也就是栅。</p> <p>不同的列之间有删间距。</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bV38i1?w=1824&h=472");</script></p> <p>栅格是可以嵌套的。列也可以换行。</p> <p>5.水平居中有哪些实现方式？</p> <p>把行内元素包裹在一个属性display：block的元素中，并且把父层元素添加属性：text-align：center;</p> <p>块状元素解决：添加margin : 10px auto;</p> <p>多个块状元素解决方案：首先将元素的display属性设置为inline。然后再设置父元素text-align：center。</p> <p>flexbox布局实现多个块状元素居中:把待居中元素的父元素添加属性display:flex和justify-content:center即可</p> <p>6.1像素边框问题</p> <p>border-image图片实现</p> <p>background-image渐变实现</p> <p>box-shadow实现</p> <p>7.flex布局</p> <p>css3 flex布局详解</p> <p>8.盒子模型</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bV44DP?w=556&h=453");</script></p> <p>盒子模型有两种标准，一种是w3c标准，一种是ie标准</p> <p>基本组成是一样的，从内往外分别是content区域、padding、border、margin</p> <p>w3c的盒子宽度和高度实际上就是 content部分的宽度和高度。</p> <p>ie盒子模型的高度和宽度是content+padding+border的值，这个也比较符合我们的理解。</p> <p>9.实现一个三栏布局，两边定宽，中间自适应</p> <p>常见的实现方法有圣杯布局、双飞翼布局、以及利用display:flex实现。</p> <p>实现细节请参考这篇博客 </p> <b>JavaScript</b> <p>1.图片懒加载</p> <p>图片懒加载的原理是页面加载时不一下加载全部的图片，只加载用户可见区域内的图片，然后根据用户滚动到页面的位置，再生成相应的img标签，显示图片。</p> <p>2.实现页面加载进度条</p> <p>我们可以将一整个页面大致分为4，5个区域。</p> <p>然后在页面的顶端设置一个div用来显示进度条。</p> <p>每到达指定的节点就用jquery实现进度条动画。</p> <p>最后加载完成隐藏进度条即可。</p> <p>3.eval()函数</p> <p>作用：eval函数会将传入的参数当作实际的javascript语句来执行，然后把执行结果插入到eval()函数所在的位置。</p> <p>但是eval函数中的任何变量或函数都不会被提升，因为在预解析的时候，这些生命都还只是字符串。</p> <p>eval函数可以被用来解析json字符串，将其转换为json对象。</p> <p>但是由于安全考虑，最好不要主动使用eval函数。</p> <p>4.new操作符调用构造函数的执行过程</p> <p>首先创建一个新对象</p> <p>将构造函数的作用域赋给新对象(因此this指向了这个对象)</p> <p>执行在构造函数中的代码，为新对象添加相应属性</p> <p>返回新对象</p> <p>5.Promise对象</p> <p>Promise对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。</p> <p>关于Promise的详细解析，请看这篇文章 </p> <b>HTTP</b> <p>session和cookie的区别</p> <p>Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；</p> <p>Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。</p> <p>session的运行依赖于session id 而session id是存在cookie中的，因此如果浏览器禁用了cookie，session也会被禁用。</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="服务器托管" href="https://www.ucloud.cn/site/product/uhybrid.html">服务器托管</a> <a style="width:120px;" title="超融合服务器" href="https://www.ucloud.cn/site/product/utrion.html">超融合服务器</a> <a style="width:120px;" title="面试题" href="https://www.ucloud.cn/yun/tag/mianshiti/">面试题</a> <a style="width:120px;" title="栈面试题" href="https://www.ucloud.cn/yun/tag/zhanmianshiti/">栈面试题</a> <a style="width:120px;" title="笔试面试题" href="https://www.ucloud.cn/yun/tag/bishimianshiti/">笔试面试题</a> <a style="width:120px;" title="面试题内容" href="https://www.ucloud.cn/yun/tag/mianshitineirong/">面试题内容</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p> <p>转载请注明本文地址：https://www.ucloud.cn/yun/115671.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/115670.html">上一篇：vue 使用Jade模板写html，stylus写css</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/115672.html">下一篇：三种方式实现圣杯布局</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/88383.html"><b>你不能错过的<em>前端</em><em>面试</em><em>题</em>合集</b></a></h2> <p class="ellipsis2 good">摘要：收集的一些前端面试题从面试题发现不足，进而查漏补缺，比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足，进而查漏补缺，比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-670.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/06/small_000000670.jpg" alt=""><span class="layui-hide64">ninefive</span></a> <time datetime="">2019-08-21 16:18</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/40829.html"><b>你不能错过的<em>前端</em><em>面试</em><em>题</em>合集</b></a></h2> <p class="ellipsis2 good">摘要：收集的一些前端面试题从面试题发现不足，进而查漏补缺，比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足，进而查漏补缺，比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1379.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/13/small_000001379.jpg" alt=""><span class="layui-hide64">darkbaby123</span></a> <time datetime="">2019-07-30 14:38</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/106823.html"><b>20W字囊括上百个<em>前端</em><em>面试</em><em>题</em>的项目开源了</b></a></h2> <p class="ellipsis2 good">摘要：字囊括上百个前端面试题的项目开源了这个项目是什么项目内容这个项目目前在上刚刚开源主要内容如下前端面试题主要整理了高频且有一定难度的前端面试题对这些面试题进行解读前端原理详解针对一些有一定难度面试题涉及的知识点进行详解比如涉及的编译原理响应式 20W字囊括上百个前端面试题的项目开源了 这个项目是什么? 项目内容 这个项目目前在GitHub上刚刚开源,主要内容如下: 前端面试题: 主要整...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-971.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000971.jpg" alt=""><span class="layui-hide64">Euphoria</span></a> <time datetime="">2019-08-26 10:49</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/96727.html"><b><em>前端</em><em>面试</em><em>题</em><em>整理</em></b></a></h2> <p class="ellipsis2 good">摘要：整理最近的一些面试题请问有哪些数据数据类型，并画出内存图有种简单的数据类型也称为基本数据类型复杂的数据类型即引用数据类型包含对象，对象和等举个例子引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。实际上改变的是堆内存对象。 我们在js的学习中，往往很多东西看过之后，一段时间不用，就忘记了。或者当时就没有深入的理解，能促使我们不断深入学习的动力最好的办法往往参加些面试，能找到...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-415.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/04/small_000000415.jpg" alt=""><span class="layui-hide64">MycLambert</span></a> <time datetime="">2019-08-23 10:50</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/54481.html"><b><em>前端</em><em>面试</em><em>题</em><em>整理</em></b></a></h2> <p class="ellipsis2 good">摘要：主要讲讲新增哪些地理定位，拖放，存储应用缓存，，。使用严格模式的限制有哪些。同源协议，域名，端口相同方法一。方法是在原数组上进行操作。如何设置一个未知宽高的对话框在页面中绝对居中。 1.HTML5的新特性。 主要讲讲新增哪些API:地理定位，拖放，web存储应用缓存，webworkers， sse 。 http://www.w3school.com.cn/html5/html_5_in...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-949.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000949.jpg" alt=""><span class="layui-hide64">gaomysion</span></a> <time datetime="">2019-08-02 16:00</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/92070.html"><b><em>前端</em><em>面试</em><em>题</em><em>整理</em></b></a></h2> <p class="ellipsis2 good">摘要：主要讲讲新增哪些地理定位，拖放，存储应用缓存，，。使用严格模式的限制有哪些。同源协议，域名，端口相同方法一。方法是在原数组上进行操作。如何设置一个未知宽高的对话框在页面中绝对居中。 1.HTML5的新特性。 主要讲讲新增哪些API:地理定位，拖放，web存储应用缓存，webworkers， sse 。 http://www.w3school.com.cn/html5/html_5_in...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1639.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001639.jpg" alt=""><span class="layui-hide64">cartoon</span></a> <time datetime="">2019-08-22 11:16</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-1662.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001662.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1662.html" rel="nofollow">wall2flower</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1662)" id="attenttouser_1662" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-1662.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/124306.html">如何用最快速度搭建一个网站？</a></h3> <p>阅读 1721<span>·</span>2021-11-22 15:25</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123940.html">盒子躲避鼠标</a></h3> <p>阅读 1051<span>·</span>2021-11-19 09:40</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121329.html">Gcore：迈阿密E5-2623v4 CPU/64G内存/1TB SSD/1Gbps带宽独立服务器，</a></h3> <p>阅读 1661<span>·</span>2021-09-27 13:57</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/120330.html">主机屋什么操作系统-主机的操作系统是什么？</a></h3> <p>阅读 828<span>·</span>2021-09-22 15:10</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/118209.html">傲游主机：长期提供8折优惠码，香港Cera机房VPS月付40元起，香港荃湾CN2+BGP线路三线直连</a></h3> <p>阅读 835<span>·</span>2021-08-16 11:01</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117678.html">资讯 | 还是3万机架 上海经信委发布2021年新建数据中心项目用能指标</a></h3> <p>阅读 2745<span>·</span>2021-07-23 17:51</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117282.html">css新生陌生又常用的属性大全</a></h3> <p>阅读 595<span>·</span>2019-08-30 15:55</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115671.html">前端面试题整理</a></h3> <p>阅读 750<span>·</span>2019-08-30 13:58</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/product/uhost.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/Z7TLrpAi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/MWraMsBh.png" alt="混合云"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/ucloudstack.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/ifzOxvjW.png" alt="私有云"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/utrion.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220620/VDqwC1iN.png" alt="超融合服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uhybrid.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220630/pJwnviKN.png" alt="服务器托管"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/uxzone.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/220630/CDb5uXxp.jpeg" alt="idc机房托管"> </a> </div> <div> <a href="https://www.ucloud.cn/site/active/network.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/230227/XWsSXmvm.png" alt="专线服务"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6> <p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>