- 博客(85)
- 收藏
- 关注
RSS订阅原创 微信小程序text组件decode属性的小问题
decode属性为false时，居然解码了大于号，这是为什么？既然为false，不是应该不解码的吗？还是我测试用例有问题？今天学习微信小程序的text组件，这个组件类似于网页制作中的span标签，内联文本只能用 text 组件，不能用 view，如。原本觉得没有什么难度，练习了user-select、space属性也很正常，而decdoe属性则不是我预期的那样。decode属性为true时，解码了小于号，这没问题；decode属性不写的时候，不解码小于号，也没问题；相应的代码和效果如图所示，没什么问题。
2025-02-18 08:54:07
333
原创 微信小程序image组件mode属性详解
5.使用heightFix属性，image组件保持图片宽高比不变的情况下，图片高度不变，宽度自动变化。图片整体看上去比上一张图片4小。2.使用aspectFit属性值，实现image组件在保持图片宽高比不变的情况下使图片长边能够完全显示出来，图片完整显示，图片不变形。3.使用aspectFill属性，实现image组件在保持图片宽高比不变的情况下，使图片短边能够完全显示出来，另一边不完整显示。4.使用widthFix属性，image组件保持图片宽高比不变的情况下，图片宽度不变，高度自动变化，图片完整显示。
2025-02-16 21:51:54
489
原创 HBuilderX版本升级带来的404问题
真正做项目可能用英文没问题，可我主要是用于演示，使用中文看上去更直接更直观。我有些不明白，怎么软件越升级，在路径的中英文处理问题上反而越退步了呢？今天有时间，看到弹出升级的提示，顺手就把HbuilderX升级成4.45版了。只是有些时候我还是习惯中文名的目录名称，所以没改根目录的名字，改了要运行的网页的名字，把文件名改成英文，网页也能正常显示。我尝试把项目所在的根目录从中文改成英文，有效果，Ctrl+R运行网页能正常显示了。我猜测是路径的问题，可是以前用的版本3.99也没出过问题呀。
2025-02-14 19:33:34
135
原创 网页中字体图标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
1157
原创 Vue3学习：查询城市天气预报案例（vite，选项式）
前几日的学习中，实现了查询城市天气预报，是用组合式实现的，今天是用选项式来实现，案例运行效果如下：如果不输入城市的名字，直接点击“查询”，将会显示IP所在地城市的天气预报。代码如下：<template> <div id="container"> <div id="search"> <el-input v-model="cityName" placeholder="请输入城市名" class="inputText
2024-11-13 19:40:34
928
原创 vue3学习：查询城市天气预报案例（vite组合式实现）
前面的学习中，实现过网页版的查询城市天气预报，今天新建了一个vite项目来实现，并且使用element-plus组件，把网页效果适当美化了一下，运行效果如图所示。
2024-11-10 18:55:04
1424
原创 Vue3学习：vue组件中的图片路径问题
今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。方法一 new URL(‘路径’,import.meta.url).href。方法二 把图片放到public目录下的images文件夹中。后来查了一下资料，有两种解决方法。
2024-10-31 21:40:38
606
原创 Vue3学习：番茄钟案例的实现及打包遇到的几个问题
前几天学过一个番茄钟的案例，这个案例跟番茄学习法有关，以25分钟为一个单位，进行倒计时。倒计时的案例我曾经写过，只是时间到了0以后，就停止了，没有响铃提醒。这个案例在倒计时结束后，会有音乐播放，以提醒用户。只是这个案例是引入的vue库文件，以.html网页的形式实现的。我想把它改成.vue组件的形式，不过组合式我还不太熟，所以用的还是选项式。起初以为这是分分钟就能搞定的事情，没想到音频播放出现问题，居然折腾了大半天，才算解决。虽然耗费了不少时间，不过倒也挺有收获。
2024-10-27 20:43:15
824
原创 Vue3学习：汇率计算器案例中event.target与event.currentTarget比较
今天从一本vue.js书中学习了《汇率计算器》的案例，这个案例的效果如下：案例可以查询人民币、日元、港元、美元、欧元之间的汇率关系，代码中定义了一个汇率表rate，包含了每种货币对其他5种货币的汇率。其中还有一个功能是点击下方四种货币的任意一种货币，可以和最上面的一种货币实现互换。例如点击了欧元，欧元会到最上面，和人民币位置互换。这是代码的html部分，下面4种货币使用v-for循环生成列表项。两种货币位置互换的功能，是在methods中定义了一个 changeCur(event) 方法来
2024-10-26 21:08:26
918
原创 Mac电脑:资源库Library里找不到WebServer问题的解决
今天看到一本书里写到Windows电脑自带IIS Web服务器，好奇了一下下，mac电脑自带的又是什么服务器呢？经查询，原来是Apache服务器，这个名字我很熟悉。只是如何设置呢？我从来没用过，于是试验了一番。主要参考了首先要打开终端。
2024-10-22 19:25:33
648
原创 Vue3学习：vite项目中图片不能显示，报错 require is not defined
于是到网上一通搜索，找到几篇文章，说是vite不支持require，要想使其支持，需要安装一个插件，还需要修改一些对应的配置文件。安装插件简单，执行对应的命令即可。可是配置文件那里我有些看不明白，不知道该从哪里修改，甚至不知道配置文件具体是哪个。后来又找到一篇文章，文中提到的方法不需要安装插件，不需要修改配置文件，只需要换种写法，不用require即可。我照做，果然问题解决，图片正常显示。
2024-10-19 16:15:50
1663
原创 Vue3学习：生肖查询
以前用javaScript实现过生肖查询，现在学习Vue，又用Vue的方式实现了。不过不是用组件的形式，而是html网页的形式，比较适合初学者入门练习用。
2024-10-13 16:51:32
651
原创 vue3学习：数字时钟遇到的两个问题
在前端开发学习中，用JavaScript脚本写个数字时钟是很常见的案例，也没什么难度。今天有时间，于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事，没想到却卡在两个问题上，一个问题通过别人的博文已经找到答案，还有一个问题却还是不知道是什么原因造成的。
2024-10-12 21:45:45
1043
原创 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
1385
2
原创 使用scroll-behavior属性实现页面平滑滚动的几个问题
在较长的页面中，为了便于用户浏览，开发人员经常会使用锚点链接，锚点链接默认的效果是瞬间跳转，为了让用户体验更好，往往会添加滚动效果。我记得要实现滚动效果，以前一般是结合一段JavaScript代码来实现。后来偶然知道了scroll-behavior: smooth;这个CSS属性，觉得用来实现滚动效果非常方便。
2024-09-28 10:25:09
1131
原创 安装Vue，有的让输入包名，有的没有这一项，什么原因？
而我立刻在自己电脑上vscode中也执行同样的命令，输入项目名称以后，直接出选择“TypeScript语法”选项，却并没有“请输入包名称”这一项，这是为什么呢？目前我知道两人的电脑的区别是，同事用的node.js是20.0版本，比我的新，我的是18.18。什么情况下会出现“请输入包名”这个选项，不知哪位大神知道原因？
2024-09-25 18:43:58
362
3
原创 Vue学习：props验证的一个小细节“Prop 名字格式”
后来到官网查看了一下，《传递 prop 的细节》小节中提到，“Prop 名字格式”，如果一个 prop 的名字很长，应使用 camelCase 形式，即驼峰命名法。可以直接在模板的表达式中使用，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式
2024-09-16 10:30:20
579
原创 Vue学习：计算属性Computed
计算属性可以实时监听 data节点中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用，计算属性需要以 function 函数的形式声明到组件的 computed 节点中。
2024-09-09 16:49:19
1078
原创 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
1091
原创 Vue学习：v-model绑定文本框、单选按钮、下拉菜单、复选框等
v-model指令可以在组件上使用以实现双向绑定，之前学习过v-model绑定文本框和下拉菜单，今天把表单的几个控件单选按钮radio、复选框checkbox、多行文本框textarea都试着绑定了一下。完整代码如下：
2024-09-05 11:22:00
1931
原创 Vue学习----Teleport组件
1.position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。问题2，我又新增了一个元素，设置它的z-index属性值比较高，发现即使使用了Teleport组件，模态框依然会被覆盖。/*设置transform属性，不使用Teleport的话，模态框不再居中*/今天学习Teleport组件，Teleport组件常见的应用场景是模态框。重叠并有更高的 z-index，则它会覆盖住我们的模态框。
2024-08-31 09:45:58
1027
原创 使用CSS、JavaScript、jQuery三种方式实现手风琴效果
手风琴效果有不少，王者荣耀官网（源网址 https://pvp.qq.com/raiders/ ）有一处周免英雄，使用的就是手风琴效果，如图所示。我试着用css、js、jQuery三种方式实现了这种效果，最终效果差不多，美中不足的是，css方式当鼠标离开后，会恢复到初始状态，也就是显示第一张大图片的状态。而使用js和jQuery方式，则会停留在鼠标进入的那一张，不恢复到第一张的状态。如何使用纯CSS，保留住:hover的状态，我还没有找到解决方法，若有哪位大神知晓，欢迎告知，多谢！。一、CSS方式
2024-06-12 20:47:03
1791
原创 网页中上下左右箭头的实现及应用案例
网页制作中，有时候会用到上下左右四个箭头，箭头带有一定的指向左右，例如网站首页经常会有返回顶部的效果，这个效果中含有上箭头，如图所示。再来看淘宝网，有向下的箭头，表示此处有二级菜单。箭头的实现可以有以下几种方式：1.图片方式，上例中的返回顶部就可以用绘图软件制作一张图片（本文不讲这种方式）。2.给div设置两条相邻的边，另两条边不设置（不显示），然后让其旋转一定的角度。3.使用字体图标，iconfont或者iconmoon，这两种方式的实现效果差不多，本文中用的是第二种。
2024-05-20 16:18:49
2362
原创 子元素水平垂直都居中的实现
在网页布局中，如何实现子元素在水平方向和垂直方向居中，如图所示：我知道的有这样的两种方式：1.使用弹性布局实现2.使用定位和平移实现另外还有以下两种常用情况3.窗口在整个屏幕水平垂直居中，还可以使用绝对定位实现。4.多行文字垂直居中。
2024-05-13 19:30:00
963
原创 HbuliderX升级到最新版本后，运行报404错误
今天使用HBuilderX软件的时候，见右下方提示有新版本，于是就点了“检查更新”，升级完成后，运行页面在浏览器预览的时候，总是报404错误，文件找不到。
2024-04-01 14:26:11
423
原创 分钟倒计时效果实现
原以为这样做代码简洁一目了然，结果运行时发现出现了一个新问题，举例说明，min会从2变成02，002，0002，00002，这可不是我希望的，然后想到了一个解决办法，使用字符串的slice(-2)或substr(-2)方法，截取后2位字符，可以解决这个问题。之前在一篇文章中写过倒计时的代码，剩余多少天时分秒，后来见过别人写的一种分钟倒计时代码，它的思路和我实现的思路不同，不是求出两个时间之间相差多少秒，然后转成天、时、分、秒，而是分和秒同时为0时，定时器停止，具体代码如下。
2024-03-26 11:36:10
525
原创 javascript实现的生肖查询
使用switch语句实现的生肖查询，只要输入年份，就可以查询是什么生肖。代码不难，适合初学者练习。/* 左上角 左下角*//* 右上角 右下角*/
2024-03-04 16:39:23
1206
原创 javascript实现的星座查询
今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果，想研究一下代码，结果右键禁用。后来参考了一下别人的代码，琢磨着先实现了一下星座查询的功能，输入月份和日期四位数后，可以查询属于哪个星座，星座效果如下。用CSS代码美化了一下输入框，js代码主要是使用了indexOf判断是否有不合法输入，对这个方法用得不太熟，特意拿来练手，12个月份使用switch语句判断。完整代码如下：<!doctype html><html> <head>
2024-03-03 21:50:06
1076
原创 JavaScript实现的计时器效果
在这段代码中，刚开始实现的时候，没有把timer设置为全局变量，而是在函数中使用了var关键字，这样timer是局部变量，结果定时器无法停止。后来去掉关键字var，timer成为全局变量好了，于是最后把timer放在函数外，直接定义为全局变量，这样程序可读性好一些。//开启定时器，前面不能加关键字var ,那会变成局部变量，定时器不能清除，不会从0开始。1.点击“开始”后，按秒计时且“开始”文字变为“停止”；2.点击“停止”，计时停止，文字变为“开始”；//全局变量，从0开始计时，初始值为0。
2024-03-03 10:30:35
1515
原创 使用滤镜属性将网页从彩色变黑白
在某些情况下，例如为了表达哀悼或纪念， 许多网站会将页面颜色从彩色调整为黑白灰色。我到网上查找答案，发现有些是通过javascript或jQuery实现的，我试了一下居然无效。后来找到一个方法，是仅用一行CSS代码就能搞定的，只要对body使用滤镜filter: grayscale(100%);
2024-03-02 19:19:19
497
原创 “点击查看显示全文”遇到的超链接默认访问的问题
超链接有默认的访问行为，我觉得自己找到了问题所在，去看了一下html代码，果然，在敲代码的时候，href=“”，里面什么也没有，我改成了href=“#”，就正常了。第二种方法，如果不修改html代码，还可以使用preventDefault()阻止默认行为，传递参数event，在javascript中加上一句 e.preventDefault() ，代码如下。我觉得这是一个很简单的效果，也就几行代码的事，结果点击了以后立刻隐藏不见，控制台代码也不报错，耽误了我很长时间，最后才发现问题出在超链接身上。
2024-02-24 22:36:36
774
原创 vue3中使用return语句返回this.$emit()，在同一行不执行,换行后才执行，好奇怪！
在制作TodoList、TodoInput时很顺利，只是在完成TodoButton这个组件时出了点问题。在点击”全部“、”已完成“、”未完成“三个按钮时，预期的效果不出现，被点击的按钮颜色不变化，没反应。我去翻了return语句的语法格式，发现return和后面的返回值可以是不换行的。上面的代码如果从return的后面换行，改成下面的格式，程序就可以正常的执行。我试了好几次，都是如此。
2023-10-06 17:18:14
567
原创 JavaScript实现广告倒计时和跳过广告
最近打开手机上的app，映入眼帘的都是一个几秒的广告，带有倒计时，当然如果不喜欢的话可以点击跳过，跳过广告其实质应该就是关闭广告。以前用JavaScript做过一个定时关闭的广告，于是把代码完善了一下，加上倒计时效果和实现跳过部分的代码。
2023-09-08 19:30:10
1049
原创 JavaScript中的Date()对象getTime()输出-28800000
后来计算了一下，一天是86400000毫秒，这28800000是一天的1/3，应该是8，也就是-8小时。然后我就明白怎么回事了，我以前把重点放在1970年1月1日00:00:00上，没注意还有个UTC。我们所在的时区是东八区，不是格林尼治时间，所以有8个小时的差距是对的。自认为对JavaScript的日期时间对象Date()比较熟悉了，用它做过数字时钟、倒计时等不少案例，Date.getTime()表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数。
2023-05-15 10:21:04
413
原创 MacBookPro 遇到pip: command not found问题的解决
也就是说，把pip写成pip3就好了，就这么简单。命令1:curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py。我惊讶的发现，明明已经装了pip，版本还是22.3.1。后来看到一篇文章说，如果安装的是python3版本，那么理论上是有pip的，可以通过下面命令查看。就这么点儿事，害我折腾了一个下午，总算找到原因，可以安装第三方插件了。文章看了十几篇，逐一尝试，行不通，报各种错或警告。我很郁闷，于是上网搜索尝试各种命令，
2023-01-08 20:56:41
4033
10
原创 MacBookPro安装mysql遇到的几个问题
经过一番折腾，顺利的下载了需要的版本mysql-8.0.31-macos12-x86_64.dmg，双击安装时，系统提示“该软件来源不明，不建议安装”，下载下来却不能安装？用Mac的好处是不用开关机，无弹窗无广告，坏处是在安装某些第三方的软件时，总是和视频教程上的winows版不一致，需要自己上网找资料尝试怎么安装。在安装的过程中，需要输入mysql的输入密码，开始我不想设置复杂的密码，怕给后期自己练习使用添麻烦，所以输了123456，然后finish始终是灰度的不能用。绊绊磕磕的安装成功了。
2023-01-06 15:34:59
1369
原创 PyCharm中设置translation插件为有道翻译
安装完PyCharm后，为了便于后期的学习，我又按照视频教程中所讲安装了translation插件，结果选中需要翻译的单词时，右击，从菜单中选择“翻译”，却翻译不出来，一直在转圈，系统说是因为网速原因。我看了一下，默认的是“谷歌翻译”，我又换成了“微软翻译”，还是不行，一直在转圈。我看选项中还有“有道翻译”，因为我平常一直用有道词典，所以就选了“有道翻译”这一项进行设置。创建完成以后，把应用ID和应用密钥复制粘贴到PyCharm中，完成设置。点了配置，没有账号，新创建了一个有道的账号，然后“创建应用”
2023-01-01 18:47:51
6541
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人