- 博客(92)
- 收藏
- 关注
RSS订阅原创 :nth-child和:nth-of-type(n)
以前学习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不匹配*/
2025-11-21 10:10:31
201
原创 在wps软件的word中使用js宏命令设置表格背景色
今天遇到一个需求，word中的表格，是一个成绩表，想标识出不及格的成绩。这个要求在excel中非常容易实现，使用条件格式就可以，但是现在是在word中，应该怎么做呢？开始用的是VBA的宏命令，开始不成功，后来才知道WPS默认支持的是JS宏命令，刚好我懂js，所以又改用JS代码。想不到，学js除了在前端能用，wps中的宏命令也能用。1.要使用宏命令，文件的类型需要保存成.docm，docx不支持宏命令。于是便尝试了一番，果然成功了。3.开发工具->wps宏编辑器，选中左边的文档项目，把代码拷进去，如图所示。
2025-11-07 17:23:18
501
原创 在别人电脑上运行 Vue 项目构建后的 dist 目录
如果是mac电脑，以dist文件夹放在桌面上为例，选中dist文件夹，然后使用快捷键Command+Option+C复制文件的绝对路径：/Users/hsl/Desktop/dist，打开终端运行。后来想在别人的电脑上运行 Vue 项目构建后的 dist 目录，一个方法是使用 serve 工具，具体如下。如果是windows电脑，打开dist所在父目录，选中地址栏，输入cmd即可运行终端。进入到dist所在的父目录，运行npx serve -s dist，显示如下界面。
2025-10-28 11:13:03
227
原创 js实现图片切换效果
因为有多处相同的部分，所以先通过document.querySelectorAll获取到所有的“.switchover”区域，通过 forEach 循环处理多个切换器，确保每个切换器独立工作。最近看到问界 - 鸿蒙智行官网有多处图片切换效果，便试着实现一下，以前曾经实现过一处图片切换效果，效果如下。然后再下面又添加了一处，效果如图所示。// 为每个缩略图添加点击事件。// 阻止链接的默认跳转行为。// 为每个切换器初始化。// 更新缩略图激活状态。// 获取所有切换器。
2025-06-15 10:15:06
484
原创 倒计时效果
今天把之前的倒计时代码修改了一下，以前一直用var声明变量，现在改成const和let，本来以为不会有问题，结果运行时，如果所给时间已经截止，控制台会报错，如图所示，“在初始化之前无法访问。// let countTimer = setInterval(countDown, 1000) //如果初始时间已经截止，会报错。var声明的时候，有变量提升，不会报这个错，所以解决的方法就是提前声明countTimer变量。// 先调用一次这个函数，防止第一次刷新页面有空白。//先声明，不赋值，这样不会报错。
2025-04-27 09:40:34
424
原创 javascript中的计算精度问题
以前知道计算机中存在计算精度的问题，但是没仔细探讨过。今天在javascript中见到0.1+0.2，输出不是预期的0.3，便想深入了解一下这个问题。在控制台输出0.1+0.2，会发现结果不是0.3，而是0.30000000000000004。这是什么原因造成的呢？这涉及到计算机科学中的一个基本概念，即浮点数的二进制表示和有限精度运算。
2025-03-10 10:30:48
904
原创 javascript实现生肖查询
在现行的公元纪年体系中，是以耶稣诞生之年作为公元元年（即公元 1 年），在这之前的时间被称为公元前，公元前 1 年之后紧接着就是公元 1 年，不存在公元 0 年这个年份。今年是已巳年，今天突发奇想，想知道公元0年是农历什么年，生肖是什么。AI告知，有记载的生肖最早可以追溯到战国时期，大约在公元前475年至公元前221年之间。这样的话，我去年写的那个查询生肖程序，公元1年开始往后是对的，公元前就不对了，错位了1年。活了半辈子了，今天才知道，没有公元0年，是不是很搞笑？/* 左上角 左下角*/
2025-03-08 20:35:54
681
原创 微信小程序text组件decode属性的小问题
decode属性为false时，居然解码了大于号，这是为什么？既然为false，不是应该不解码的吗？还是我测试用例有问题？今天学习微信小程序的text组件，这个组件类似于网页制作中的span标签，内联文本只能用 text 组件，不能用 view，如。原本觉得没有什么难度，练习了user-select、space属性也很正常，而decdoe属性则不是我预期的那样。decode属性为true时，解码了小于号，这没问题；decode属性不写的时候，不解码小于号，也没问题；相应的代码和效果如图所示，没什么问题。
2025-02-18 08:54:07
1093
原创 微信小程序image组件mode属性详解
5.使用heightFix属性，image组件保持图片宽高比不变的情况下，图片高度不变，宽度自动变化。图片整体看上去比上一张图片4小。2.使用aspectFit属性值，实现image组件在保持图片宽高比不变的情况下使图片长边能够完全显示出来，图片完整显示，图片不变形。3.使用aspectFill属性，实现image组件在保持图片宽高比不变的情况下，使图片短边能够完全显示出来，另一边不完整显示。4.使用widthFix属性，image组件保持图片宽高比不变的情况下，图片宽度不变，高度自动变化，图片完整显示。
2025-02-16 21:51:54
1650
原创 HBuilderX版本升级带来的404问题
真正做项目可能用英文没问题，可我主要是用于演示，使用中文看上去更直接更直观。我有些不明白，怎么软件越升级，在路径的中英文处理问题上反而越退步了呢？今天有时间，看到弹出升级的提示，顺手就把HbuilderX升级成4.45版了。只是有些时候我还是习惯中文名的目录名称，所以没改根目录的名字，改了要运行的网页的名字，把文件名改成英文，网页也能正常显示。我尝试把项目所在的根目录从中文改成英文，有效果，Ctrl+R运行网页能正常显示了。我猜测是路径的问题，可是以前用的版本3.99也没出过问题呀。
2025-02-14 19:33:34
505
1
原创 网页中字体图标Fontawesome的使用
关于字体图标，最先学习的是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三个版本。
2024-12-25 19:19:50
4058
原创 Vue3学习：查询城市天气预报案例（vite，选项式）
前几日的学习中，实现了查询城市天气预报，是用组合式实现的，今天是用选项式来实现，案例运行效果如下：如果不输入城市的名字，直接点击“查询”，将会显示IP所在地城市的天气预报。代码如下：<template> <div id="container"> <div id="search"> <el-input v-model="cityName" placeholder="请输入城市名" class="inputText
2024-11-13 19:40:34
1070
原创 vue3学习：查询城市天气预报案例（vite组合式实现）
前面的学习中，实现过网页版的查询城市天气预报，今天新建了一个vite项目来实现，并且使用element-plus组件，把网页效果适当美化了一下，运行效果如图所示。
2024-11-10 18:55:04
1906
原创 Vue3学习：vue组件中的图片路径问题
今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。方法一 new URL(‘路径’,import.meta.url).href。方法二 把图片放到public目录下的images文件夹中。后来查了一下资料，有两种解决方法。
2024-10-31 21:40:38
831
原创 Vue3学习：番茄钟案例的实现及打包遇到的几个问题
前几天学过一个番茄钟的案例，这个案例跟番茄学习法有关，以25分钟为一个单位，进行倒计时。倒计时的案例我曾经写过，只是时间到了0以后，就停止了，没有响铃提醒。这个案例在倒计时结束后，会有音乐播放，以提醒用户。只是这个案例是引入的vue库文件，以.html网页的形式实现的。我想把它改成.vue组件的形式，不过组合式我还不太熟，所以用的还是选项式。起初以为这是分分钟就能搞定的事情，没想到音频播放出现问题，居然折腾了大半天，才算解决。虽然耗费了不少时间，不过倒也挺有收获。
2024-10-27 20:43:15
949
原创 Vue3学习：汇率计算器案例中event.target与event.currentTarget比较
今天从一本vue.js书中学习了《汇率计算器》的案例，这个案例的效果如下：案例可以查询人民币、日元、港元、美元、欧元之间的汇率关系，代码中定义了一个汇率表rate，包含了每种货币对其他5种货币的汇率。其中还有一个功能是点击下方四种货币的任意一种货币，可以和最上面的一种货币实现互换。例如点击了欧元，欧元会到最上面，和人民币位置互换。这是代码的html部分，下面4种货币使用v-for循环生成列表项。两种货币位置互换的功能，是在methods中定义了一个 changeCur(event) 方法来
2024-10-26 21:08:26
1083
原创 Mac电脑:资源库Library里找不到WebServer问题的解决
今天看到一本书里写到Windows电脑自带IIS Web服务器，好奇了一下下，mac电脑自带的又是什么服务器呢？经查询，原来是Apache服务器，这个名字我很熟悉。只是如何设置呢？我从来没用过，于是试验了一番。主要参考了首先要打开终端。
2024-10-22 19:25:33
807
原创 Vue3学习：vite项目中图片不能显示，报错 require is not defined
于是到网上一通搜索，找到几篇文章，说是vite不支持require，要想使其支持，需要安装一个插件，还需要修改一些对应的配置文件。安装插件简单，执行对应的命令即可。可是配置文件那里我有些看不明白，不知道该从哪里修改，甚至不知道配置文件具体是哪个。后来又找到一篇文章，文中提到的方法不需要安装插件，不需要修改配置文件，只需要换种写法，不用require即可。我照做，果然问题解决，图片正常显示。
2024-10-19 16:15:50
1901
原创 Vue3学习：生肖查询
以前用javaScript实现过生肖查询，现在学习Vue，又用Vue的方式实现了。不过不是用组件的形式，而是html网页的形式，比较适合初学者入门练习用。
2024-10-13 16:51:32
717
原创 vue3学习：数字时钟遇到的两个问题
在前端开发学习中，用JavaScript脚本写个数字时钟是很常见的案例，也没什么难度。今天有时间，于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事，没想到却卡在两个问题上，一个问题通过别人的博文已经找到答案，还有一个问题却还是不知道是什么原因造成的。
2024-10-12 21:45:45
1117
原创 vue3学习:axios输入城市名称查询该城市天气
说来惭愧，接触前端也有很长一段时间了，最近才学习axios与后端的交互。今天学习了一个查询城市天气的案例，只需输入城市名称，点击“查询”按钮便可以进行查询。运行效果如下：案例只实现了基本的查询功能，没有用css进行美化，需要效果更好看一些，自己添加一些css样式就行。说明如下：一、头部引入因为用到了vue3和axios，需要在头部引入vue3库文件和axios库文件，我这里是网页版，采用的是CDN方式。<script src="https://unpkg.com/vue@3/dist/vu
2024-10-04 17:56:15
1574
2
原创 使用scroll-behavior属性实现页面平滑滚动的几个问题
在较长的页面中，为了便于用户浏览，开发人员经常会使用锚点链接，锚点链接默认的效果是瞬间跳转，为了让用户体验更好，往往会添加滚动效果。我记得要实现滚动效果，以前一般是结合一段JavaScript代码来实现。后来偶然知道了scroll-behavior: smooth;这个CSS属性，觉得用来实现滚动效果非常方便。
2024-09-28 10:25:09
1328
原创 安装Vue，有的让输入包名，有的没有这一项，什么原因？
而我立刻在自己电脑上vscode中也执行同样的命令，输入项目名称以后，直接出选择“TypeScript语法”选项，却并没有“请输入包名称”这一项，这是为什么呢？目前我知道两人的电脑的区别是，同事用的node.js是20.0版本，比我的新，我的是18.18。什么情况下会出现“请输入包名”这个选项，不知哪位大神知道原因？
2024-09-25 18:43:58
649
5
原创 Vue学习：props验证的一个小细节“Prop 名字格式”
后来到官网查看了一下，《传递 prop 的细节》小节中提到，“Prop 名字格式”，如果一个 prop 的名字很长，应使用 camelCase 形式，即驼峰命名法。可以直接在模板的表达式中使用，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式
2024-09-16 10:30:20
646
原创 Vue学习：计算属性Computed
计算属性可以实时监听 data节点中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用，计算属性需要以 function 函数的形式声明到组件的 computed 节点中。
2024-09-09 16:49:19
1239
原创 Vue初学-简易计算器
最近在学习Vue的指令，做了一个简易计算器，比较适合刚入门的人参考学习。如果选择的是**乘方，操作数2不显示，这是利用v-show控制实现的，如图所示。4.methods选项，定义了calculate ()方法，实现各种运算。3.v-show，控制操作数2是否显示，乘方时不显示操作数2。2.v-model，双向绑定+、-、*、/、**等操作符。5.watch选项，监听selected的值的变化。
2024-09-05 17:32:12
1316
原创 Vue学习：v-model绑定文本框、单选按钮、下拉菜单、复选框等
v-model指令可以在组件上使用以实现双向绑定，之前学习过v-model绑定文本框和下拉菜单，今天把表单的几个控件单选按钮radio、复选框checkbox、多行文本框textarea都试着绑定了一下。完整代码如下：
2024-09-05 11:22:00
2801
原创 Vue学习----Teleport组件
1.position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。问题2，我又新增了一个元素，设置它的z-index属性值比较高，发现即使使用了Teleport组件，模态框依然会被覆盖。/*设置transform属性，不使用Teleport的话，模态框不再居中*/今天学习Teleport组件，Teleport组件常见的应用场景是模态框。重叠并有更高的 z-index，则它会覆盖住我们的模态框。
2024-08-31 09:45:58
1112
原创 使用CSS、JavaScript、jQuery三种方式实现手风琴效果
手风琴效果有不少，王者荣耀官网（源网址 https://pvp.qq.com/raiders/ ）有一处周免英雄，使用的就是手风琴效果，如图所示。我试着用css、js、jQuery三种方式实现了这种效果，最终效果差不多，美中不足的是，css方式当鼠标离开后，会恢复到初始状态，也就是显示第一张大图片的状态。而使用js和jQuery方式，则会停留在鼠标进入的那一张，不恢复到第一张的状态。如何使用纯CSS，保留住:hover的状态，我还没有找到解决方法，若有哪位大神知晓，欢迎告知，多谢！。一、CSS方式
2024-06-12 20:47:03
1953
原创 网页中上下左右箭头的实现及应用案例
网页制作中，有时候会用到上下左右四个箭头，箭头带有一定的指向左右，例如网站首页经常会有返回顶部的效果，这个效果中含有上箭头，如图所示。再来看淘宝网，有向下的箭头，表示此处有二级菜单。箭头的实现可以有以下几种方式：1.图片方式，上例中的返回顶部就可以用绘图软件制作一张图片（本文不讲这种方式）。2.给div设置两条相邻的边，另两条边不设置（不显示），然后让其旋转一定的角度。3.使用字体图标，iconfont或者iconmoon，这两种方式的实现效果差不多，本文中用的是第二种。
2024-05-20 16:18:49
3295
原创 子元素水平垂直都居中的实现
在网页布局中，如何实现子元素在水平方向和垂直方向居中，如图所示：我知道的有这样的两种方式：1.使用弹性布局实现2.使用定位和平移实现另外还有以下两种常用情况3.窗口在整个屏幕水平垂直居中，还可以使用绝对定位实现。4.多行文字垂直居中。
2024-05-13 19:30:00
1083
原创 HbuliderX升级到最新版本后，运行报404错误
今天使用HBuilderX软件的时候，见右下方提示有新版本，于是就点了“检查更新”，升级完成后，运行页面在浏览器预览的时候，总是报404错误，文件找不到。
2024-04-01 14:26:11
550
原创 分钟倒计时效果实现
原以为这样做代码简洁一目了然，结果运行时发现出现了一个新问题，举例说明，min会从2变成02，002，0002，00002，这可不是我希望的，然后想到了一个解决办法，使用字符串的slice(-2)或substr(-2)方法，截取后2位字符，可以解决这个问题。之前在一篇文章中写过倒计时的代码，剩余多少天时分秒，后来见过别人写的一种分钟倒计时代码，它的思路和我实现的思路不同，不是求出两个时间之间相差多少秒，然后转成天、时、分、秒，而是分和秒同时为0时，定时器停止，具体代码如下。
2024-03-26 11:36:10
642
原创 javascript实现的生肖查询
使用switch语句实现的生肖查询，只要输入年份，就可以查询是什么生肖。代码不难，适合初学者练习。/* 左上角 左下角*//* 右上角 右下角*/
2024-03-04 16:39:23
1391
原创 javascript实现的星座查询
今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果，想研究一下代码，结果右键禁用。后来参考了一下别人的代码，琢磨着先实现了一下星座查询的功能，输入月份和日期四位数后，可以查询属于哪个星座，星座效果如下。用CSS代码美化了一下输入框，js代码主要是使用了indexOf判断是否有不合法输入，对这个方法用得不太熟，特意拿来练手，12个月份使用switch语句判断。完整代码如下：<!doctype html><html> <head>
2024-03-03 21:50:06
1267
原创 JavaScript实现的计时器效果
在这段代码中，刚开始实现的时候，没有把timer设置为全局变量，而是在函数中使用了var关键字，这样timer是局部变量，结果定时器无法停止。后来去掉关键字var，timer成为全局变量好了，于是最后把timer放在函数外，直接定义为全局变量，这样程序可读性好一些。//开启定时器，前面不能加关键字var ,那会变成局部变量，定时器不能清除，不会从0开始。1.点击“开始”后，按秒计时且“开始”文字变为“停止”；2.点击“停止”，计时停止，文字变为“开始”；//全局变量，从0开始计时，初始值为0。
2024-03-03 10:30:35
1758
原创 使用滤镜属性将网页从彩色变黑白
在某些情况下，例如为了表达哀悼或纪念， 许多网站会将页面颜色从彩色调整为黑白灰色。我到网上查找答案，发现有些是通过javascript或jQuery实现的，我试了一下居然无效。后来找到一个方法，是仅用一行CSS代码就能搞定的，只要对body使用滤镜filter: grayscale(100%);
2024-03-02 19:19:19
556
原创 “点击查看显示全文”遇到的超链接默认访问的问题
超链接有默认的访问行为，我觉得自己找到了问题所在，去看了一下html代码，果然，在敲代码的时候，href=“”，里面什么也没有，我改成了href=“#”，就正常了。第二种方法，如果不修改html代码，还可以使用preventDefault()阻止默认行为，传递参数event，在javascript中加上一句 e.preventDefault() ，代码如下。我觉得这是一个很简单的效果，也就几行代码的事，结果点击了以后立刻隐藏不见，控制台代码也不报错，耽误了我很长时间，最后才发现问题出在超链接身上。
2024-02-24 22:36:36
1216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人