十月ooOO

JS Window 对象的属性和方法

window是 js 默认的基层对象，平时用的 alert() setTimeout() 等方法都是 window 的方法，可以直接使用

如果文档包含框架（或 </code> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。</p> </blockquote> <blockquote> <p>Note注意：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。</p> </blockquote> <h2>Window 对象属性</h2> <table> <thead> <tr> <th>属性</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td>closed</td> <td align="left">返回窗口是否已被关闭。</td> </tr> <tr> <td>defaultStatus</td> <td align="left">设置或返回窗口状态栏中的默认文本。</td> </tr> <tr> <td>document</td> <td align="left">对 Document 对象的只读引用。(请参阅对象)</td> </tr> <tr> <td>frames</td> <td align="left">返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。</td> </tr> <tr> <td>history</td> <td align="left">对 History 对象的只读引用。请参数 History 对象。</td> </tr> <tr> <td>innerHeight</td> <td align="left">返回窗口的文档显示区的高度。</td> </tr> <tr> <td>innerWidth</td> <td align="left">返回窗口的文档显示区的宽度。</td> </tr> <tr> <td>localStorage</td> <td align="left">在浏览器中存储 key/value 对。没有过期时间。</td> </tr> <tr> <td>length</td> <td align="left">设置或返回窗口中的框架数量。</td> </tr> <tr> <td>location</td> <td align="left">用于窗口或框架的 Location 对象。请参阅 Location 对象。</td> </tr> <tr> <td>name</td> <td align="left">设置或返回窗口的名称。</td> </tr> <tr> <td>navigator</td> <td align="left">对 Navigator 对象的只读引用。请参数 Navigator 对象。</td> </tr> <tr> <td>opener</td> <td align="left">返回对创建此窗口的窗口的引用。</td> </tr> <tr> <td>outerHeight</td> <td align="left">返回窗口的外部高度，包含工具条与滚动条。</td> </tr> <tr> <td>outerWidth</td> <td align="left">返回窗口的外部宽度，包含工具条与滚动条。</td> </tr> <tr> <td>pageXOffset</td> <td align="left">设置或返回当前页面相对于窗口显示区左上角的 X 位置。</td> </tr> <tr> <td>pageYOffset</td> <td align="left">设置或返回当前页面相对于窗口显示区左上角的 Y 位置。</td> </tr> <tr> <td>parent</td> <td align="left">返回父窗口。</td> </tr> <tr> <td>screen</td> <td align="left">对 Screen 对象的只读引用。请参数 Screen 对象。</td> </tr> <tr> <td>screenLeft</td> <td align="left">返回相对于屏幕窗口的x坐标</td> </tr> <tr> <td>screenTop</td> <td align="left">返回相对于屏幕窗口的y坐标</td> </tr> <tr> <td>screenX</td> <td align="left">返回相对于屏幕窗口的x坐标</td> </tr> <tr> <td>sessionStorage</td> <td align="left">在浏览器中存储 key/value 对。在关闭窗口或标签页之后将会删除这些数据。</td> </tr> <tr> <td>screenY</td> <td align="left">返回相对于屏幕窗口的y坐标</td> </tr> <tr> <td>self</td> <td align="left">返回对当前窗口的引用。等价于 Window 属性。</td> </tr> <tr> <td>status</td> <td align="left">设置窗口状态栏的文本。</td> </tr> <tr> <td>top</td> <td align="left">返回最顶层的父窗口。</td> </tr> </tbody> </table> <p>Window 对象方法</p> <table> <thead> <tr> <th>属性</th> <th align="left">描述</th> </tr> </thead> <tbody> <tr> <td>alert()</td> <td align="left">显示带有一段消息和一个确认按钮的警告框。</td> </tr> <tr> <td>atob()</td> <td align="left">解码一个 base-64 编码的字符串。</td> </tr> <tr> <td>btoa()</td> <td align="left">创建一个 base-64 编码的字符串。</td> </tr> <tr> <td>blur()</td> <td align="left">把键盘焦点从顶层窗口移开。</td> </tr> <tr> <td>clearInterval()</td> <td align="left">取消由 setInterval() 设置的 timeout。</td> </tr> <tr> <td>clearTimeout()</td> <td align="left">取消由 setTimeout() 方法设置的 timeout。</td> </tr> <tr> <td>close()</td> <td align="left">关闭浏览器窗口。</td> </tr> <tr> <td>confirm()</td> <td align="left">显示带有一段消息以及确认按钮和取消按钮的对话框。</td> </tr> <tr> <td>createPopup()</td> <td align="left">创建一个 pop-up 窗口。</td> </tr> <tr> <td>focus()</td> <td align="left">把键盘焦点给予一个窗口。</td> </tr> <tr> <td>getSelection()</td> <td align="left">返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。</td> </tr> <tr> <td>getComputedStyle()</td> <td align="left">获取指定元素的 CSS 样式。</td> </tr> <tr> <td>matchMedia()</td> <td align="left">该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。</td> </tr> <tr> <td>moveBy()</td> <td align="left">可相对窗口的当前坐标把它移动指定的像素。</td> </tr> <tr> <td>moveTo()</td> <td align="left">把窗口的左上角移动到一个指定的坐标。</td> </tr> <tr> <td>open()</td> <td align="left">打开一个新的浏览器窗口或查找一个已命名的窗口。</td> </tr> <tr> <td>print()</td> <td align="left">打印当前窗口的内容。</td> </tr> <tr> <td>prompt()</td> <td align="left">显示可提示用户输入的对话框。</td> </tr> <tr> <td>resizeBy()</td> <td align="left">按照指定的像素调整窗口的大小。</td> </tr> <tr> <td>resizeTo()</td> <td align="left">把窗口的大小调整到指定的宽度和高度。</td> </tr> <tr> <td>scroll()</td> <td align="left">已废弃。该方法已经使用了 scrollTo() 方法来替代。</td> </tr> <tr> <td>scrollBy()</td> <td align="left">按照指定的像素值来滚动内容。</td> </tr> <tr> <td>scrollTo()</td> <td align="left">把内容滚动到指定的坐标。</td> </tr> <tr> <td>setInterval()</td> <td align="left">按照指定的周期（以毫秒计）来调用函数或计算表达式。</td> </tr> <tr> <td>setTimeout()</td> <td align="left">在指定的毫秒数后调用函数或计算表达式。</td> </tr> <tr> <td>stop()</td> <td align="left">停止页面载入。</td> </tr> </tbody> </table> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1187404728519204864"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1894598568644243456.htm" title="微信小程序授权登录源码" target="_blank">微信小程序授权登录源码</a> <span class="text-muted">小莉爱编程</span> <a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a> <div>应广大前端程序员要求，源码附上了这里是授权的页面@import"../assets/sass/setting";.authorization{position:relative;.box{position:absolute;top:50%;</div> </li> <li><a href="/article/1894592768202829824.htm" title="【前端开发】能不能用Vue+Bootstrap进行项目开发？有什么需求场景需要用到的地方" target="_blank">【前端开发】能不能用Vue+Bootstrap进行项目开发？有什么需求场景需要用到的地方</a> <span class="text-muted">爱上大树的小猪</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>简介：Vue.jsVue.js（通常简称为Vue）是一个用于构建用户界面的渐进式JavaScript框架。它允许开发者创建高效的、交互式的单页面应用（SPA）。Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时也能够为复杂的应用提供强大的功能支持。Vue通过组件化的方式让代码更加模块化、可重用和维护。BootstrapBootstrap是一个开源的CSS框架，旨在简化网页和Web应用的前</div> </li> <li><a href="/article/1894590119093006336.htm" title="短剧源码搭建部署短剧小程序测试报告" target="_blank">短剧源码搭建部署短剧小程序测试报告</a> <span class="text-muted">南阳迈特网络科技</span> <a class="tag" taget="_blank" href="/search/%E7%9F%AD%E5%89%A7%E6%BA%90%E7%A0%81/1.htm">短剧源码</a><a class="tag" taget="_blank" href="/search/%E7%9F%AD%E5%89%A7%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">短剧小程序</a><a class="tag" taget="_blank" href="/search/%E7%9F%AD%E5%89%A7%E7%B3%BB%E7%BB%9F/1.htm">短剧系统</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>短剧小程序测试报告1.概述今天对一款短剧小程序进行了全面测试，整体体验非常优秀。该小程序在功能设计、用户体验、后台管理以及商业模式等方面都表现出色。以下是详细的测试反馈：感兴趣的可以点我参考一起讨论一下2.前端体验2.1格式布局优点：界面设计简洁美观，色彩搭配舒适，符合短剧类应用的用户群体审美。布局合理，导航清晰，用户可以轻松找到所需功能。响应式设计良好，在不同尺寸的设备上都能保持良好的显示效果。</div> </li> <li><a href="/article/1894580534953177088.htm" title="前端解决跨域问题的三种方法" target="_blank">前端解决跨域问题的三种方法</a> <span class="text-muted">web13638179351</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>一、cors后端程序员提供的解决跨域访问的方法，和前端程序员没有关系，定义后端程序代码让所有的前端程序都可以访问后端的数据，后端程序告诉服务器这个后端程序的数据任何前端请求都可以访问，服务器就不再执行跨域访问拦截数据的操作。因为博主目前主攻前端对后端并不熟悉，因此这种方法暂不详细解答。二、服务器代理proxy2.1步骤（1）修改Nginx或者Apache服务器文件，目前博主使用的是Nginx代理（</div> </li> <li><a href="/article/1894572088254066688.htm" title="前端开发中的最佳实践与技巧" target="_blank">前端开发中的最佳实践与技巧</a> <span class="text-muted">lina_mua</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>1.引言1.1前端开发的重要性在当今的互联网时代，前端开发已经成为构建用户友好、高效、安全的Web应用程序的关键。前端不仅仅是用户与应用程序交互的界面，它还直接影响用户体验、性能和安全性。1.2本文的目标本文旨在分享前端开发中的最佳实践与技巧，帮助开发者提高代码质量、优化性能、增强安全性，并掌握最新的前端技术趋势。2.HTML最佳实践2.1语义化标签的使用语义化HTML不仅有助于SEO，还能提高代</div> </li> <li><a href="/article/1894566417844465664.htm" title="前端开发岗模拟面试题套卷A答案及解析（一）技术面部分" target="_blank">前端开发岗模拟面试题套卷A答案及解析（一）技术面部分</a> <span class="text-muted">向贤</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>前端开发岗模拟面试题套卷A答案及解析（一）技术面部分（一）技术面一、JavaScript核心技术（ES6+）1-1、实现防抖函数functiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);//清除已有定时器timer=setTimeout(()=>{fn.apply(this,args);</div> </li> <li><a href="/article/1894548878519234560.htm" title="React 开发全面指南：核心 API、方法函数及属性详解" target="_blank">React 开发全面指南：核心 API、方法函数及属性详解</a> <span class="text-muted">北辰alk</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>React作为当前最流行的前端框架之一，凭借其组件化、声明式编程和高效的虚拟DOM机制，成为构建复杂用户界面的首选工具。本文将深入解析React的核心API、方法函数及属性，覆盖从基础到高级的各个方面，助你全面掌握React开发技巧。文章目录1.React核心概念1.1组件化开发1.2JSX语法1.3虚拟DOM2.组件生命周期方法（类组件）2.1挂载阶段（Mounting）2.2更新阶段（Upda</div> </li> <li><a href="/article/1894548879068688384.htm" title="Vue 与 React 深度对比：从代码到原理的全方位解析" target="_blank">Vue 与 React 深度对比：从代码到原理的全方位解析</a> <span class="text-muted">北辰alk</span> <a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue和React作为当前最主流的前端框架，各自凭借独特的理念和设计哲学赢得了大量开发者的青睐。Vue以“渐进式框架”和易上手著称，React则以“声明式UI”和灵活性见长。本文将从代码风格、底层原理、API设计、性能优化、生态系统等多个维度，对两者进行深度对比，助你在技术选型时做出明智决策。文章目录1.核心设计理念对比1.1Vue：渐进式框架1.2React：声明式UI库1.3哲学差异总结2.模</div> </li> <li><a href="/article/1894524554911477760.htm" title="2024年前端框架选择指南：React、Vue、Angular与新兴框架对比" target="_blank">2024年前端框架选择指南：React、Vue、Angular与新兴框架对比</a> <span class="text-muted">海豹工匠</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>在当今快速发展的前端技术领域，选择合适的框架对于项目成功至关重要。本文将深入探讨主流前端框架的特点、优缺点及适用场景，为开发者提供全面的选择指南。主流框架概览React特点：基于组件的开发方式，虚拟DOM差分算法优点：灵活性强，生态系统丰富缺点：需要学习JSX和状态管理库适用场景：中大型项目，需要高度灵活性和复杂状态管理的应用Vue特点：简单易学，模板直观，内置状态管理优点：学习曲线平缓，适合快速</div> </li> <li><a href="/article/1894517871665541120.htm" title="[原创]手把手教学之前端0基础到就业---day15堆和栈 + 作业part3(Javascript)" target="_blank">[原创]手把手教学之前端0基础到就业---day15堆和栈 + 作业part3(Javascript)</a> <span class="text-muted">*星之卡比*</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>7.数据存储—栈(stack)和堆(heap)前面我讲过,数据类型分为基本数据类型（简单数据类型）和复杂数据类型（引用数据类型）基本数据类型和复杂数据类型最大的区别就是存储上的区别下图里的灰色区域可以看做我们的内存空间,黄色是栈空间,橘黄色是堆空间简单数据类型存储在栈空间里,比如变量名函数名,复杂数据类型存储在堆空间里栈内存:按序排列,先来的在栈底,后来的在栈顶,就像是堆叠盘子一样的在堆内存中,数</div> </li> <li><a href="/article/1894516737261498368.htm" title="【前端】react+ts 轮播图的实现" target="_blank">【前端】react+ts 轮播图的实现</a> <span class="text-muted">Loong_DQX</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a> <div>一、场景描述在很多网站的页面中都有轮播图，所以我想利用react.js和ts实现一个轮播图。自动轮播图已经在前面实现过了，如：https://blog.csdn.net/weixin_43872912/article/details/145622444?sharetype=blogdetail&sharerId=145622444&sharerefer=PC&sharesource=weixin_</div> </li> <li><a href="/article/1894515221754605568.htm" title="前端面试题---vue和react的区别" target="_blank">前端面试题---vue和react的区别</a> <span class="text-muted">*星之卡比*</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>文章目录框架vs库：学习曲线：模板vsJSX：数据绑定：状态管理：性能：社区支持：框架vs库：Vue是一个完整的框架，提供了从模板到状态管理的全套解决方案；React是一个UI库，主要聚焦于构建用户界面，其他功能依赖第三方库。学习曲线：Vue的语法更简洁，易于上手，适合初学者；React使用JSX，结合了JavaScript和HTML，学习曲线较陡。模板vsJSX：Vue使用类似HTML的模板语法</div> </li> <li><a href="/article/1894499339309477888.htm" title="AI前端革新金融风控：ScriptEcho助力高效开发" target="_blank">AI前端革新金融风控：ScriptEcho助力高效开发</a> <span class="text-muted">wangtaohappy</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.引言：金融风控的挑战与前端效率需求在当今快速变化的金融环境中，风险评估和反欺诈已成为金融机构运营的核心。金融风控不仅关乎企业的盈利能力，更直接影响着整个金融体系的稳定。一个强大的风控系统需要能够实时监控、分析并预测潜在的风险，从而保护企业和用户的资产安全。然而，构建和维护这样一套复杂的系统并非易事，尤其是在前端开发方面，面临着诸多挑战。传统的前端开发模式，依赖于人工编写大量的代码，这在快速迭代</div> </li> <li><a href="/article/1894496944445779968.htm" title="星河飞雪网络安全学习笔记-安全见闻1-3" target="_blank">星河飞雪网络安全学习笔记-安全见闻1-3</a> <span class="text-muted">芝士布偶</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a> <div>安全见闻-了解安全知识编程语言日常编程语言C语言：一种通用的、面向过程的编程语言，广泛运用于系统软件呵呵嵌入式开发C++：面向对象的编程语言，常用于游戏开发、高性能计算等领域Java：一种广泛使用的面向对象编程语言、具有跨平台性、应用于企业级应用开发等Python（萌新推荐）：简洁易学，拥有丰富的库，适用于数据分析、人工智能、web开发等Javascript：主要用于网页前端开发，也可用于服务器端</div> </li> <li><a href="/article/1894494421001498624.htm" title="HarmonyOS NEXT - 管理网页文件上传与下载" target="_blank">HarmonyOS NEXT - 管理网页文件上传与下载</a> <span class="text-muted">兔子不吃饭</span> <a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/NEXT/1.htm">NEXT</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>上传文件Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求，如果应用开发者不做任何处理，Web会提供默认行为来处理前端页面文件上传的请求。下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在onShowFileSelector()接口中收到文件上传请求，在此接口中开发者将上传的本地文件路径设置给前端页面。应用侧代码</div> </li> <li><a href="/article/1894492531954085888.htm" title="JavaScript 番茄工作法倒计时器：轻松实现时间管理，新手友好教程前端倒计时设计案例：用 JavaScript 实现番茄工作法，代码全解析从零开始构建番茄工作法倒计时器：JavaScript" target="_blank">JavaScript 番茄工作法倒计时器：轻松实现时间管理，新手友好教程前端倒计时设计案例：用 JavaScript 实现番茄工作法，代码全解析从零开始构建番茄工作法倒计时器：JavaScript</a> <span class="text-muted">南北极之间</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6%E7%BB%83%E6%89%8B%E5%AE%9E%E6%88%98/1.htm">前端进阶练手实战</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a><a class="tag" taget="_blank" href="/search/%E7%95%AA%E8%8C%84%E5%B7%A5%E4%BD%9C%E6%B3%95/1.htm">番茄工作法</a><a class="tag" taget="_blank" href="/search/%E5%80%92%E8%AE%A1%E6%97%B6/1.htm">倒计时</a> <div>效果图：博客教程：用JavaScript构建番茄工作法倒计时器目录项目介绍工具与环境准备项目结构HTML构建页面结构CSS美化倒计时页面JavaScript实现倒计时与番茄工作法功能总结1.项目介绍在本教程中，我们将使用HTML、CSS和JavaScript创建一个带有番茄工作法的倒计时器。番茄工作法是一种有效的时间管理方法，将工作时间分为25分钟的工作时间和5分钟的休息时间循环。你将学习如何：使</div> </li> <li><a href="/article/1894490890576130048.htm" title="前端下载文件的几种方式使用Blob下载文件" target="_blank">前端下载文件的几种方式使用Blob下载文件</a> <span class="text-muted">m0_74824517</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>前端下载文件的几种方式使用Blob下载文件在前端下载文件是个很通用的需求，一般后端会提供下载的方式有两种：1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等）2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果excel等）第一种方式比较简单，但是使用场景有限。第二种方式通用性更好我们先一下第一种的使用场景：-a链接下载文件我们可以通过download</div> </li> <li><a href="/article/1894487739739467776.htm" title="鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配" target="_blank">鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配</a> <span class="text-muted">敢嗣先锋</span> <a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/openharmony/1.htm">openharmony</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/ArkUI/1.htm">ArkUI</a> <div>往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面</div> </li> <li><a href="/article/1894451188326264832.htm" title="Webpack Module Federation实战：微前端架构" target="_blank">Webpack Module Federation实战：微前端架构</a> <span class="text-muted">糖糖老师436</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>WebpackModuleFederation是Webpack5引入的一个特性，它支持微前端架构，允许不同的Web应用之间共享模块，而不需要运行时的容器或服务器端的构建步骤。项目结构假设有两个独立的React应用：app1和app2，其中app2将通过ModuleFederation作为远程模块被app1消费。app1：主应用app2：作为远程微应用app2配置首先，在app2中配置Webpack</div> </li> <li><a href="/article/1894432276830285824.htm" title="一文读懂 NPM 版本" target="_blank">一文读懂 NPM 版本</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/npm%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/1.htm">npm前端工程化</a> <div>这是前端工程化的系列文章版本号组成nodepackage版本号由四部分组成：major.minor.patch[-prerelease]，比如：1.0.2-beta.1，其中prerelease可选。major：代表主版本号，通常在需要提交不能向下兼容的情况下对该版本号进行升级minor：代表次版本号，通常在新增功能时才对该版本号进行升级patch：代表修复版本号，升级该版本号通常代表修复一些bu</div> </li> <li><a href="/article/1894427609022918656.htm" title="React 中的受控组件与非受控组件：深度剖析与实战应用" target="_blank">React 中的受控组件与非受控组件：深度剖析与实战应用</a> <span class="text-muted">银之夏雪丶</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在如今的前端开发里，React可是响当当的角色，是咱搭建用户界面的得力帮手。一碰到表单处理和用户输入交互这些事儿，受控组件和非受控组件就派上大用场了，它们就像是两种不一样的工具，各有各的厉害之处。要是咱能把它们摸透了，知道啥时候用啥，那开发出来的React应用肯定既好用又靠谱，用户体验也差不了。二、受控组件（一）定义咋来的受控组件，简单讲，就是让表单元素的值跟React组件的state绑得</div> </li> <li><a href="/article/1894419669947838464.htm" title="＜tauri＞＜rust＞＜GUI＞基于rust和tauri的图片显示程序（本地图片的加载、显示、保存）" target="_blank">＜tauri＞＜rust＞＜GUI＞基于rust和tauri的图片显示程序（本地图片的加载、显示、保存）</a> <span class="text-muted">机构师</span> <a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/tauri/1.htm">tauri</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前言本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。环境配置系统：windows10平台：visualstudiocode语言：rust、javascript库：tauri2.0概述本文基于tauri框架，创建一个图片显示器程序。要实现的功能是，如何从本地路径加载、显示</div> </li> <li><a href="/article/1894412989231067136.htm" title="JavaScript系列（86）--现代构建工具详解" target="_blank">JavaScript系列（86）--现代构建工具详解</a> <span class="text-muted">ᅟᅠ ‌‍‎‏ 一进制</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript现代构建工具详解现代前端开发离不开构建工具，它们帮助我们处理模块打包、代码转换、资源优化等任务。让我们深入了解主流的构建工具及其应用。构建工具概述小知识：构建工具主要解决代码转换、文件优化、模块打包、自动刷新、代码分割等问题。主流的构建工具包括webpack、Vite、Rollup等，它们各有特点和适用场景。webpack详解//1.webpack配置classWebpackC</div> </li> <li><a href="/article/1894388022628118528.htm" title="Rust在前端领域有哪些应用?" target="_blank">Rust在前端领域有哪些应用?</a> <span class="text-muted">极客前端探索者</span> <a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>随着技术的飞速发展，编程语言的选择对项目的影响日益重要。Rust作为一种新兴的编程语言，以其独特的性能和安全性优势，开始在前端领域崭露头角。1.高性能的WebAssembly：Rust可以编译成WebAssembly，这是一种可以在现代Web浏览器中运行的二进制代码格式。这种能力使得Rust编写的程序能够在浏览器中以原生代码的形式运行，极大地提高了执行效率和性能。2.跨平台应用开发：Rust支持多</div> </li> <li><a href="/article/1894366682969862144.htm" title="Svelte 最新中文文档教程（19）—— 测试" target="_blank">Svelte 最新中文文档教程（19）—— 测试</a> <span class="text-muted"></span> <div>前言Svelte，一个语法简洁、入门容易，面向未来的前端框架。从Svelte诞生之初，就备受开发者的喜爱，根据统计，从2019年到2024年，连续6年一直是开发者最感兴趣的前端框架No.1：Svelte以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级Web项目，也是我做个人项目的首选技术栈。目前Svelte基于Svelte5发布了最新的官方文档，但却缺少对应的中文</div> </li> <li><a href="/article/1894350955189694464.htm" title="前端如何实现后端运行进度_前端到后端的整体流程介绍" target="_blank">前端如何实现后端运行进度_前端到后端的整体流程介绍</a> <span class="text-muted">weixin_39707536</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%90%8E%E7%AB%AF%E8%BF%90%E8%A1%8C%E8%BF%9B%E5%BA%A6/1.htm">前端如何实现后端运行进度</a> <div>作为入行不久，在帝都无数个日日夜夜奔波的程序猿，现在我大概理下我们所接触到的程序开发的大的面。作为一个整理学习日记，不对的地方，可以指出，相互学习。从我们智能手机说起，手机已经成为我们不可或缺的一部分。那么手机在软件行业里处在什么样的位置呢。这里我把手机理解为前端前端：我粗暴的理解为，“前就”是前面，眼前，“端”就是终端，连起来就是展示在使用者眼前的终端设备。这么看来，终端当然还包括我们的电脑、平</div> </li> <li><a href="/article/1894349314977755136.htm" title="Cline + MCP Server 根据规则大型项目开发思路" target="_blank">Cline + MCP Server 根据规则大型项目开发思路</a> <span class="text-muted">红旗不倒QY</span> <a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a> <div>目标根据自定义的技术栈、项目结构、代码规范等，通过给予需求可以自动（或逐步自动）完成数据库建表、后端实体、后端数据访问层、后端服务层、后端接口、后端Web接口、后端单元测试、前端实体、前端Api接口、前端路由、前端页面等一系列开发工作。工具介绍ClineCline是一个开源的AI助手插件，深度集成在VSCode中，为开发者提供了完整的代码编辑体验。它支持多种API提供商和模型，开发者可以自由选择调</div> </li> <li><a href="/article/1894347043808276480.htm" title="后端导出时前端如何处理" target="_blank">后端导出时前端如何处理</a> <span class="text-muted">灯光下的投影</span> <a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%87%BA/1.htm">导出</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%87%BA/1.htm">导出</a> <div>前段时间在写导出功能，通过后端导出，但是前端要怎么写才能完成这个导出功能呢，上网查了一下，发现还是有不少方法的，最后选择了其中一个比较简单可行的方法，那就是通过创建form表单然后配置相关的参数，最后提交表单，这种方式是同步的，相对简单，当然也有异步方式，但是要复杂一些。下面是我的导出功能代码部分：letformElement=document.createElement('form');//创建</div> </li> <li><a href="/article/1894334315102269440.htm" title="前端开发必备:全方位字符串处理工具详解" target="_blank">前端开发必备:全方位字符串处理工具详解</a> <span class="text-muted">FinkGO小码</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/1.htm">学习方法</a><a class="tag" taget="_blank" href="/search/webstorm/1.htm">webstorm</a> <div>前端开发必备：StringUtils全方位字符串处理工具详解引言在前端开发的日常工作中，字符串的处理无处不在。从用户输入的校验、界面文本的展示优化，到数据的格式化与传输，高效且精准地操作字符串是提升应用质量与用户体验的关键环节。今天，我们将深入剖析一款功能强大、涵盖广泛的字符串工具类——StringUtils，它如同一位万能的工匠，为开发者提供了一站式解决各类字符串问题的便捷方案。工具类概述Str</div> </li> <li><a href="/article/1894311750665302016.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> <span class="text-muted">m0_74825447</span> <a class="tag" taget="_blank" href="/search/vip1024p/1.htm">vip1024p</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言：开发中经常遇到文件上传的场景，有时需要前端将文件内容读取出来再以base64格式传到接口。目录FileReader主要方法readAsArrayBuffer(blob)readAsText(blob,[encoding])readAsDataURL(blob)主要事件React+antdUpload组件示例FileReaderFileReader是一个对象，允许Web应用程序异步读取存储在用</div> </li> <li><a href="/article/50.htm" title="java封装继承多态等" target="_blank">java封装继承多态等</a> <span class="text-muted">麦田的设计者</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/encapsulatopn/1.htm">encapsulatopn</a> <div>       最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。     1、final关键字       译为：最终的        &</div> </li> <li><a href="/article/177.htm" title="F5与集群的区别" target="_blank">F5与集群的区别</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a> <div>        http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。         F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似</div> </li> <li><a href="/article/304.htm" title="LeetCode[Math] - #7 Reverse Integer" target="_blank">LeetCode[Math] - #7 Reverse Integer</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>原题链接：#7 Reverse Integer   要求：按位反转输入的数字例1：输入 x = 123, 返回 321 例2：输入 x = -123, 返回 -321   难度：简单   分析：对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但</div> </li> <li><a href="/article/431.htm" title="BufferedOutputStream" target="_blank">BufferedOutputStream</a> <span class="text-muted">周凡杨</span> <div>     首先说一下这个大批量，是指有上千万的数据量。      例子：      有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！      select t.msisd</div> </li> <li><a href="/article/558.htm" title="linux下模拟按键输入和鼠标" target="_blank">linux下模拟按键输入和鼠标</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices 设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。 linux/in</div> </li> <li><a href="/article/685.htm" title="ContentProvider初体验" target="_blank">ContentProvider初体验</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/ContentProvider/1.htm">ContentProvider</a> <div>ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte</div> </li> <li><a href="/article/812.htm" title="关于Spring MVC项目（maven）中通过fileupload上传文件" target="_blank">关于Spring MVC项目（maven）中通过fileupload上传文件</a> <span class="text-muted">843977358</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a><a class="tag" taget="_blank" href="/search/%E4%BF%AE%E6%94%B9%E5%A4%B4%E5%83%8F/1.htm">修改头像</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/upload/1.htm">upload</a> <div>Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。   1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar 因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定）  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>