<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[wangyining070205的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/wangyining070205</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wangyining070205]]></copyright><item><title><![CDATA[:nth-child和:nth-of-type(n)]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/155093381</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/155093381</guid><author>wangyining070205</author><pubDate>Fri, 21 Nov 2025 10:10:31 +0800</pubDate><description><![CDATA[以前学习CSS选择器的时候，也没仔细留意:nth-child(n)这个选择器，今天看到一个简单的案例，显示效果不是自己的预期，才认真的分析了:nth-child(n)显示效果。“第3段、第6段、第9段”分别是第4、7、10个孩子符合要求，显示为灰色背景，第一个孩子不符合p:nth-child(3n+1)，因为是h1标签，不是p标签，所以不显示灰色。如果要只选择p标记，不考虑其他标记，那需要使用:nth-of-type(n)，这样会忽略其他标记类型，只考虑p标记，这可能才是我需要的。/*第一个h1不匹配*/]]></description><category></category></item><item><title><![CDATA[在wps软件的word中使用js宏命令设置表格背景色]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/154536976</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/154536976</guid><author>wangyining070205</author><pubDate>Fri, 07 Nov 2025 17:23:18 +0800</pubDate><description><![CDATA[今天遇到一个需求，word中的表格，是一个成绩表，想标识出不及格的成绩。这个要求在excel中非常容易实现，使用条件格式就可以，但是现在是在word中，应该怎么做呢？开始用的是VBA的宏命令，开始不成功，后来才知道WPS默认支持的是JS宏命令，刚好我懂js，所以又改用JS代码。想不到，学js除了在前端能用，wps中的宏命令也能用。1.要使用宏命令，文件的类型需要保存成.docm，docx不支持宏命令。于是便尝试了一番，果然成功了。3.开发工具->wps宏编辑器，选中左边的文档项目，把代码拷进去，如图所示。]]></description><category></category></item><item><title><![CDATA[在别人电脑上运行 Vue 项目构建后的 dist 目录]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/154010191</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/154010191</guid><author>wangyining070205</author><pubDate>Tue, 28 Oct 2025 11:13:03 +0800</pubDate><description><![CDATA[如果是mac电脑，以dist文件夹放在桌面上为例，选中dist文件夹，然后使用快捷键Command+Option+C复制文件的绝对路径：/Users/hsl/Desktop/dist，打开终端运行。后来想在别人的电脑上运行 Vue 项目构建后的 dist 目录，一个方法是使用 serve 工具，具体如下。如果是windows电脑，打开dist所在父目录，选中地址栏，输入cmd即可运行终端。进入到dist所在的父目录，运行npx serve -s dist，显示如下界面。]]></description><category></category></item><item><title><![CDATA[js实现图片切换效果]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/148666798</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/148666798</guid><author>wangyining070205</author><pubDate>Sun, 15 Jun 2025 10:15:06 +0800</pubDate><description><![CDATA[因为有多处相同的部分，所以先通过document.querySelectorAll获取到所有的“.switchover”区域，通过 forEach 循环处理多个切换器，确保每个切换器独立工作。最近看到问界 - 鸿蒙智行官网有多处图片切换效果，便试着实现一下，以前曾经实现过一处图片切换效果，效果如下。然后再下面又添加了一处，效果如图所示。// 为每个缩略图添加点击事件。// 阻止链接的默认跳转行为。// 为每个切换器初始化。// 更新缩略图激活状态。// 获取所有切换器。]]></description><category></category></item><item><title><![CDATA[倒计时效果]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/147547755</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/147547755</guid><author>wangyining070205</author><pubDate>Sun, 27 Apr 2025 09:40:34 +0800</pubDate><description><![CDATA[今天把之前的倒计时代码修改了一下，以前一直用var声明变量，现在改成const和let，本来以为不会有问题，结果运行时，如果所给时间已经截止，控制台会报错，如图所示，“在初始化之前无法访问。//	let countTimer = setInterval(countDown, 1000) //如果初始时间已经截止，会报错。var声明的时候，有变量提升，不会报这个错，所以解决的方法就是提前声明countTimer变量。// 先调用一次这个函数，防止第一次刷新页面有空白。//先声明，不赋值，这样不会报错。]]></description><category></category></item><item><title><![CDATA[javascript中的计算精度问题]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/146144701</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/146144701</guid><author>wangyining070205</author><pubDate>Mon, 10 Mar 2025 10:30:48 +0800</pubDate><description><![CDATA[以前知道计算机中存在计算精度的问题，但是没仔细探讨过。今天在javascript中见到0.1+0.2，输出不是预期的0.3，便想深入了解一下这个问题。在控制台输出0.1+0.2，会发现结果不是0.3，而是0.30000000000000004。这是什么原因造成的呢？这涉及到计算机科学中的一个基本概念，即浮点数的二进制表示和有限精度运算。]]></description><category></category></item><item><title><![CDATA[javascript实现生肖查询]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/146121734</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/146121734</guid><author>wangyining070205</author><pubDate>Sat, 08 Mar 2025 20:35:54 +0800</pubDate><description><![CDATA[在现行的公元纪年体系中，是以耶稣诞生之年作为公元元年（即公元 1 年），在这之前的时间被称为公元前，公元前 1 年之后紧接着就是公元 1 年，不存在公元 0 年这个年份。今年是已巳年，今天突发奇想，想知道公元0年是农历什么年，生肖是什么。AI告知，有记载的生肖最早可以追溯到战国时期，大约在公元前475年至公元前221年之间。这样的话，我去年写的那个查询生肖程序，公元1年开始往后是对的，公元前就不对了，错位了1年。活了半辈子了，今天才知道，没有公元0年，是不是很搞笑？/* 左上角 左下角*/]]></description><category></category></item><item><title><![CDATA[微信小程序text组件decode属性的小问题]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/145696187</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/145696187</guid><author>wangyining070205</author><pubDate>Tue, 18 Feb 2025 08:54:07 +0800</pubDate><description><![CDATA[decode属性为false时，居然解码了大于号，这是为什么？既然为false，不是应该不解码的吗？还是我测试用例有问题？今天学习微信小程序的text组件，这个组件类似于网页制作中的span标签，内联文本只能用 text 组件，不能用 view，如。原本觉得没有什么难度，练习了user-select、space属性也很正常，而decdoe属性则不是我预期的那样。decode属性为true时，解码了小于号，这没问题；decode属性不写的时候，不解码小于号，也没问题；相应的代码和效果如图所示，没什么问题。]]></description><category></category></item><item><title><![CDATA[微信小程序image组件mode属性详解]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/145670484</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/145670484</guid><author>wangyining070205</author><pubDate>Sun, 16 Feb 2025 21:51:54 +0800</pubDate><description><![CDATA[5.使用heightFix属性，image组件保持图片宽高比不变的情况下，图片高度不变，宽度自动变化。图片整体看上去比上一张图片4小。2.使用aspectFit属性值，实现image组件在保持图片宽高比不变的情况下使图片长边能够完全显示出来，图片完整显示，图片不变形。3.使用aspectFill属性，实现image组件在保持图片宽高比不变的情况下，使图片短边能够完全显示出来，另一边不完整显示。4.使用widthFix属性，image组件保持图片宽高比不变的情况下，图片宽度不变，高度自动变化，图片完整显示。]]></description><category></category></item><item><title><![CDATA[HBuilderX版本升级带来的404问题]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/145640222</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/145640222</guid><author>wangyining070205</author><pubDate>Fri, 14 Feb 2025 19:33:34 +0800</pubDate><description><![CDATA[真正做项目可能用英文没问题，可我主要是用于演示，使用中文看上去更直接更直观。我有些不明白，怎么软件越升级，在路径的中英文处理问题上反而越退步了呢？今天有时间，看到弹出升级的提示，顺手就把HbuilderX升级成4.45版了。只是有些时候我还是习惯中文名的目录名称，所以没改根目录的名字，改了要运行的网页的名字，把文件名改成英文，网页也能正常显示。我尝试把项目所在的根目录从中文改成英文，有效果，Ctrl+R运行网页能正常显示了。我猜测是路径的问题，可是以前用的版本3.99也没出过问题呀。]]></description><category></category></item><item><title><![CDATA[网页中字体图标Fontawesome的使用]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/144725387</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/144725387</guid><author>wangyining070205</author><pubDate>Wed, 25 Dec 2024 19:19:50 +0800</pubDate><description><![CDATA[关于字体图标，最先学习的是iconfont，后来又使用过icomoon，以前在学习BootStrap的时候，曾经接触过font-awesome，很长时间没用，发现自己很健忘。今天试着在网页中使用font-awesome，最开始居然不显示，后来发现是css引用的不对。于是把font-awesome使用方法稍加整理了一下。font-awesome官网网址为https://fontawesome.com.cn/，font-awesome目前有v4.7.0、v5.15.4 、v6.4.0三个版本。]]></description><category></category></item><item><title><![CDATA[Vue3学习：查询城市天气预报案例（vite，选项式）]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/143750548</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/143750548</guid><author>wangyining070205</author><pubDate>Wed, 13 Nov 2024 19:40:34 +0800</pubDate><description><![CDATA[前几日的学习中，实现了查询城市天气预报，是用组合式实现的，今天是用选项式来实现，案例运行效果如下：

如果不输入城市的名字，直接点击“查询”，将会显示IP所在地城市的天气预报。
代码如下：
&lt;template&gt;
    &lt;div id="container"&gt;
        &lt;div id="search"&gt;
            &lt;el-input v-model="cityName" placeholder="请输入城市名" class="inputText]]></description><category></category></item><item><title><![CDATA[vue3学习：查询城市天气预报案例（vite组合式实现）]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/143664277</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/143664277</guid><author>wangyining070205</author><pubDate>Sun, 10 Nov 2024 18:55:04 +0800</pubDate><description><![CDATA[前面的学习中，实现过网页版的查询城市天气预报，今天新建了一个vite项目来实现，并且使用element-plus组件，把网页效果适当美化了一下，运行效果如图所示。]]></description><category></category></item><item><title><![CDATA[Vue3学习：vue组件中的图片路径问题]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/143417912</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/143417912</guid><author>wangyining070205</author><pubDate>Thu, 31 Oct 2024 21:40:38 +0800</pubDate><description><![CDATA[今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。方法一 new URL(‘路径’,import.meta.url).href。方法二  把图片放到public目录下的images文件夹中。后来查了一下资料，有两种解决方法。]]></description><category></category></item><item><title><![CDATA[Vue3学习：番茄钟案例的实现及打包遇到的几个问题]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/143272368</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/143272368</guid><author>wangyining070205</author><pubDate>Sun, 27 Oct 2024 20:43:15 +0800</pubDate><description><![CDATA[前几天学过一个番茄钟的案例，这个案例跟番茄学习法有关，以25分钟为一个单位，进行倒计时。倒计时的案例我曾经写过，只是时间到了0以后，就停止了，没有响铃提醒。这个案例在倒计时结束后，会有音乐播放，以提醒用户。只是这个案例是引入的vue库文件，以.html网页的形式实现的。我想把它改成.vue组件的形式，不过组合式我还不太熟，所以用的还是选项式。起初以为这是分分钟就能搞定的事情，没想到音频播放出现问题，居然折腾了大半天，才算解决。虽然耗费了不少时间，不过倒也挺有收获。]]></description><category></category></item><item><title><![CDATA[Vue3学习：汇率计算器案例中event.target与event.currentTarget比较]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/143258465</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/143258465</guid><author>wangyining070205</author><pubDate>Sat, 26 Oct 2024 21:08:26 +0800</pubDate><description><![CDATA[今天从一本vue.js书中学习了《汇率计算器》的案例，这个案例的效果如下：

案例可以查询人民币、日元、港元、美元、欧元之间的汇率关系，代码中定义了一个汇率表rate，包含了每种货币对其他5种货币的汇率。其中还有一个功能是点击下方四种货币的任意一种货币，可以和最上面的一种货币实现互换。例如点击了欧元，欧元会到最上面，和人民币位置互换。

这是代码的html部分，下面4种货币使用v-for循环生成列表项。
两种货币位置互换的功能，是在methods中定义了一个 changeCur(event) 方法来]]></description><category></category></item><item><title><![CDATA[Mac电脑:资源库Library里找不到WebServer问题的解决]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/143164602</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/143164602</guid><author>wangyining070205</author><pubDate>Tue, 22 Oct 2024 19:25:33 +0800</pubDate><description><![CDATA[今天看到一本书里写到Windows电脑自带IIS Web服务器，好奇了一下下，mac电脑自带的又是什么服务器呢？经查询，原来是Apache服务器，这个名字我很熟悉。只是如何设置呢？我从来没用过，于是试验了一番。主要参考了首先要打开终端。]]></description><category></category></item><item><title><![CDATA[Vue3学习：vite项目中图片不能显示，报错 require is not defined]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/143078378</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/143078378</guid><author>wangyining070205</author><pubDate>Sat, 19 Oct 2024 16:15:50 +0800</pubDate><description><![CDATA[于是到网上一通搜索，找到几篇文章，说是vite不支持require，要想使其支持，需要安装一个插件，还需要修改一些对应的配置文件。安装插件简单，执行对应的命令即可。可是配置文件那里我有些看不明白，不知道该从哪里修改，甚至不知道配置文件具体是哪个。后来又找到一篇文章，文中提到的方法不需要安装插件，不需要修改配置文件，只需要换种写法，不用require即可。我照做，果然问题解决，图片正常显示。]]></description><category></category></item><item><title><![CDATA[Vue3学习：生肖查询]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/142900300</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/142900300</guid><author>wangyining070205</author><pubDate>Sun, 13 Oct 2024 16:51:32 +0800</pubDate><description><![CDATA[以前用javaScript实现过生肖查询，现在学习Vue，又用Vue的方式实现了。不过不是用组件的形式，而是html网页的形式，比较适合初学者入门练习用。]]></description><category></category></item><item><title><![CDATA[vue3学习：数字时钟遇到的两个问题]]></title><link>https://blog.youkuaiyun.com/wangyining070205/article/details/142886330</link><guid>https://blog.youkuaiyun.com/wangyining070205/article/details/142886330</guid><author>wangyining070205</author><pubDate>Sat, 12 Oct 2024 21:45:45 +0800</pubDate><description><![CDATA[在前端开发学习中，用JavaScript脚本写个数字时钟是很常见的案例，也没什么难度。今天有时间，于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事，没想到却卡在两个问题上，一个问题通过别人的博文已经找到答案，还有一个问题却还是不知道是什么原因造成的。]]></description><category></category></item></channel></rss>