• 最新文章
  • linux
  • php
  • sql
  • 服务端
  • tool
  • cocos

怎么在div中设置鼠标滑过变超链接

要在div中设置鼠标滑过时变成超链接,可以通过 CSS为div添加:hover伪类选择器,并使用cursor: pointer; 使得鼠标指针在滑过时变成手指形状。然后,可以使用text-decoration: underline;为文本添加下划线,表示它是可点击的。当然,实际上这只是一个div,要变成真正的超链接,你需要添加点击事件处理器,使用JavaScript来处理点击后的行为(通常是导航到另一个页面)。 以下是实现这一功能的示例代码: HTML: <div class="link" id="myLink">这是一个可点击的div</div> .link { cursor: pointer; text-decoration: underline; color: blue; } .link:hover { color: red; } document.getElementById('myLink').onclick = function() { window.location.href = 'https://www.example.com'; }; 当用户将鼠标悬停在div上时,文本颜色会变成红色,并且在点击时会导航到'https://www.example.com'。

动态修改div 自定义标签值

在HTML中,自定义标签的值通常存储在标签的属性中。如果你想动态地修改这些自定义属性的值,你可以使用JavaScript来实现。 以下是一个简单的例子,展示了如何使用JavaScript动态修改div元素的自定义属性值: HTML: <div id="myDiv" data-custom="initialValue">这是一个div</div> <button onclick="changeCustomValue()">修改自定义标签值</button> function changeCustomValue() { var div = document.getElementById('myDiv'); div.dataset.custom = 'newValue'; // 修改自定义属性值 } 在这个例子中,我们有一个带有自定义data-custom属性的div元素。当用户点击按钮时,changeCustomValue函数会被调用,这个函数会获取div元素,并将其data-custom属性的值修改为newValue。 注意,dataset属性允许你以属性访问形式操作自定义数据属性。例如,div.dataset.custom访问data-custom属性的值,而div.dataset.custom = 'newValue'则设置新的值。

Vue.js中全局替换字体及font-family 自定义字体

全局字体替换 添加自定义字体 首先,你需要将自定义字体文件(如.ttf, .woff, .woff2等格式)添加到项目的静态资源目录,通常是src/assets下。 链接字体文件 接下来,在项目的主入口文件(通常是src/main.js)或者在public/index.html头部添加CSS链接,以加载字体文件。如果是在Vue CLI项目中,你可能需要在public目录下的index.html中添加: <link rel="stylesheet" href="<path-to-your-fonts-css>"> 或 import '@/assets/css/index.css' 这里的应该指向你创建的CSS文件,该文件包含了字体的@font-face规则。 编写@font-face规则 在你的CSS文件中,编写@font-face规则来定义自定义字体: @font-face { font-family: 'YourFontName'; src: url('<path-to-your-font-file>.woff2') format('woff2'), url('<path-to-your-font-file>.woff') format('woff'); font-weight: normal; font-style: normal; } 确保路径正确指向字体文件。 如: @font-face { font-family: 'NotoSans-SC'; /* 定义一个新的字体名称 */ src: url('/src/assets/font/NotoSans-SC.ttf'); /* 指定字体文件的URL和格式 */ font-weight: normal; /* 设置字体的粗细 */ font-style: normal; /* 设置字体的样式(如斜体) */ } 设置全局font-family 在Vue项目中,你可以通过在src/App.vue或全局样式文件(如src/styles/global.css)中设置font-family属性来全局应用自定义字体: body { font-family: 'YourFontName', sans-serif; } 这样,整个应用将使用YourFontName字体,如果该字体不可用,则回退到默认的无衬线字体。 使用自定义字体图标 引入字体图标库 对于字体图标,如Font Awesome或Iconfont,你同样需要将图标库的字体文件添加到项目中,并在CSS中定义使用规则。 在组件中使用字体图标 在Vue组件中使用字体图标时,可以像使用普通HTML元素一样使用标签,并添加相应的类名: <i class="fa fa-windows"></i> 确保你的CSS中包含了对字体图标的定义,如: .fa-windows:before { content: "\f1eb"; } 其中\f1eb是该图标在字体库中的Unicode字符编码。 字体格式比较 OTF (OpenType Font): 特点:支持高级排版特性,如连字、替代字符。 优点:兼容性好,适用于复杂排版需求。 选择原因:适合需要高质量排版的项目。 TTF (TrueType Font): 特点:广泛使用,支持大多数操作系统。 优点:良好的可读性,适合屏幕显示。 缺点:文件相对较大,不支持部分高级排版特性。 WOFF/WOFF2 (Web Open Font Format): 特点:专为网页设计,基于压缩的 TTF/OTF。 优点:文件小,加载快,支持现代浏览器。 缺点:不兼容较旧的浏览器。 EOT (Embedded OpenType): 特点:微软开发,主要用于旧版 IE 浏览器。 优点:支持 IE 浏览器。 缺点:逐渐被淘汰,不支持其他浏览器。

html 跳转到页面指定位置

创建目标组件并添加目标元素 假设我们想在 About.vue 组件中滚动到某个特定的位置。我们可以在 About.vue 中添加一个具有唯一 id属性的元素 <div id="service" class="service"> <div class="service-text" > <div class="service-text1">24H在线</div> <div class="service-text2">真人客服,永不失联</div> <div class="service-text3">我们的真人客服7x24小时在线,随时响应您的需求。无论问题大小,迅速解决,确保您的使用体验无忧,永不失联。</div> </div> </div> 添加滚动到指定位置的代码 <script> export default { methods: { scrollToElement(refID) { let time=setTimeout(()=>{ this.$nextTick(()=>{ let top=0; let targetElement=document.getElementById(refID); if(targetElement){ // 获取元素距离顶部的距离 top=targetElement.offsetTop; } if(top>0){ // 滚动到指定位置 window.scrollTo({ top: top, behavior: 'smooth' }); } clearTimeout(time); time=null; }) },300); }, } } </script> 最后,在你的 Home.vue 或其他组件中触发路由导航: <li><a href="javascript:void(0)" @click="scrollToElement('service')">联系我们</a></li>

Vue 图片打包之后访问路径错误问题的解决 vite中动态加载图片路径

如果图片资源不是来自于服务器,而是本地资源,那么就会遇到动态加载图片的问题。 在vue项目中,v-for显示的图片,导出时发现图片路径不对 在vue项目中,构建工具使用webpack,想要动态加载图片路径,只要用require()即可,但是如果工具是基于vite的话,vite是直接根据ES Modules的,它是没有require的,那怎么办呢? <template v-for="(item, index) in tabbarData" :key="index"> <div class="tab-bar-item"> <img :src="require(item.image)"> <div class="text">{{ item.text }}</div> </div> </template> 这个时候需要用到new URL(),它会返回一个url对象,这个对象中有href属性,包含完整的URL。 <div class="price-feature-item" v-for="(v,i) in priceFeatureList" :key="i" > <div class="price-feature-item-content"> <div class="price-feature-item-img"> <img :src="getAssetsImg(`${v.img}`)" /> </div> <div>{{v.desc}}</div> </div> </div> 具体的URL详情可以查阅mdn文档,这里只解释一下怎么解决动态图片问题。 URL - Web API 接口参考 | MDN New URL():这里是传两个参数,参数一是相对路径(相对于当前文件),也就是我们要动态加载的图片的路径;参数二传的是当前文件的地址,使用import.meta.url获取。 简单来说就是根据第二个参数的当前文件路径来找到第一个参数的相对文件路径。 为了方便使用,封装到工具函数中,记得注意一下相对路径的改变: export const getAssetsImg = (image) => { return new URL(`../assets/img/${image}`,import.meta.url).href } 在外部引入即可 import { getAssetsImg } from '../../utils/load_assets';

nodejs怎么升级版本

nodejs怎么升级版本? 这里介绍三种方法 方法一: 用n升级nodejs(建议使用此方法) 查看当前node版本 $ node -v 清除npm缓存 $ npm cache clean -f 全局安装n(n是node包管理工具) $ npm install -g n 升级到最新稳定版 $ n stable 升级到最新版 $ n latest 升级到定制版 $ n v14.6.0 切换使用版本 $ n 13.10.0 (ENTER) 删除制定版本 $ n rm 13.10.0 用制定的版本执行脚本 $ n use 13.10.0 some.js 升级完成查看 node版本 $ node -v 注意: 如果在第一步安装n模块报错npm ERR! code EBADPLATFORM 遇到这样错误信息,先将生成的node_modules文件夹删除,再在命令后面加上 --force重新运行; 如:npm install --force即可; 如果不行,再反复执行上面的步骤。 方法二: 用NVM来升级nodejs github 下载nvm 配置项目到环境变量中 $ source ~/.bashrc $ nvm --version 升级到到定制版 $ nvm install 13.10.0 升级到最新版 $ nvm install lastest 升级到稳定版 $ nvm install stable 方法三:官网下载 去官网下载 LTS版本的 node 然后安装即可

bip39:使用bip39生成助记词

助记词 从HD钱包的创建方式可知,要创建一个HD钱包,我们必须首先有一个确定的512bit(64字节)的随机数种子。 如果用电脑生成一个64字节的随机数作为种子当然是可以的,但是恐怕谁也记不住。 如果自己想一个句子,例如bitcoin is awesome,然后计算SHA-512获得这个64字节的种子,虽然是可行的,但是其安全性取决于自己想的句子到底有多随机。像bitcoin is awesome本质上就是3个英文单词构成的随机数,长度太短,所以安全性非常差。 为了解决初始化种子的易用性问题,BIP-39规范提出了一种通过助记词来推算种子的算法: 以英文单词为例,首先,挑选2048个常用的英文单词,构造一个数组: const words = ; 然后,生成128~256位随机数,注意随机数的总位数必须是32的倍数。例如,生成的256位随机数以16进制表示为: ********************339a722094e0fdbbbe0e96f148ae80924 在随机数末尾加上校验码,校验码取SHA-256的前若干位,并使得总位数凑成11的倍数,即。上述随机数校验码的二进制表示为00010000。 将随机数+校验码按每11 bit一组,得到范围是0~2047的24个整数,把这24个整数作为索引,就得到了最多24个助记词,例如: bleak version runway tell hour unfold donkey defy digital abuse glide please omit much cement sea sweet tenant demise taste emerge inject cause link 由于在生成助记词的过程中引入了校验码,所以,助记词如果弄错了,软件可以提示用户输入的助记词可能不对。 生成助记词的过程是计算机随机产生的,用户只要记住这些助记词,就可以根据助记词推算出HD钱包的种子。 注意:不要自己挑选助记词,原因一是随机性太差,二是缺少校验。 生成助记词可以使用bip39这个JavaScript库: const bip39 = require('bip39'); let words = bip39.generateMnemonic(256); console.log(words); console.log('is valid mnemonic? ' + bip39.validateMnemonic(words)); 运行上述代码,每次都会得到随机生成的不同的助记词。 如果想用中文作助记词也是可以的,给generateMnemonic()传入一个中文助记词数组即可: const bip39 = require('bip39'); // 第二个参数rng可以为null: var words = bip39.generateMnemonic(256, null, bip39.wordlists.chinese_simplified); console.log(words); 注意:同样索引的中文和英文生成的HD种子是不同的。各种语言的助记词定义在bip-0039-wordlists.md。 根据助记词推算种子 根据助记词推算种子的算法是PBKDF2,使用的哈希函数是Hmac-SHA512,其中,输入是助记词的UTF-8编码,并设置Key为mnemonic+用户口令,循环2048次,得到最终的64字节种子。上述助记词加上口令bitcoin得到的HD种子是: ********************cd136664bfe14c1d49aff3ccc94d52dfb1d59ee628426192eff5535d6058cb64317ef2992c8b124d0f72af81c9ebfaaa 该种子即为HD钱包的种子。 要特别注意:用户除了需要记住助记词外,还可以额外设置一个口令。HD种子的生成依赖于助记词和口令,丢失助记词或者丢失口令(如果设置了口令的话)都将导致HD钱包丢失! 用JavaScript代码实现为: const bip39 = require('bip39'); let words = bip39.generateMnemonic(256); console.log(words); let seedBuffer = bip39.mnemonicToSeed(words); let seedAsHex = seedBuffer.toString('hex'); // or use bip39.mnemonicToSeedHex(words) console.log(seedAsHex); 根据助记词和口令生成HD种子的方法是在mnemonicToSeed()函数中传入password: const bip39 = require('bip39'); let words = bip39.generateMnemonic(256); //const words = bip39.generateMnemonic(); // generates a 12 word mnemonic console.log(words); let password = 'bitcoin'; let seedAsHex = bip39.mnemonicToSeedHex(words, password); console.log(seedAsHex); 从助记词算法可知,只要确定了助记词和口令,生成的HD种子就是确定的。 如果两个人的助记词相同,那么他们的HD种子也是相同的。这也意味着如果把助记词抄在纸上,一旦泄漏,HD种子就泄漏了。 如果在助记词的基础上设置了口令,那么只知道助记词,不知道口令,也是无法推算出HD种子的。 把助记词抄在纸上,口令记在脑子里,这样,泄漏了助记词也不会导致HD种子被泄漏,但要牢牢记住口令。 最后,我们使用助记词+口令的方式来生成一个HD钱包的HD种子并计算出根扩展私钥: const bitcoin = require('bitcoinjs-lib'), bip39 = require('bip39'); let words = 'bleak version runway tell hour unfold donkey defy digital abuse glide please omit much cement sea sweet tenant demise taste emerge inject cause link', password = 'bitcoin'; // 计算seed: let seedHex = bip39.mnemonicToSeedHex(words, password); console.log('seed: ' + seedHex); // b59a8078...c9ebfaaa // 生成root: let root =

宝塔国际版aapanel(宝塔海外版)

简单介绍 aapanel是宝塔单独运维的海外英文版本,无需登陆即可使用。 目前国内访问aapanel官网会跳转到bt.cn因此我复制了一份在这里方便大家安装。 安装要求 内存:512M以上,推荐768M以上(纯面板约60M系统内存) 硬盘:100M以上可用硬盘空间(纯面板约20M磁盘空间) 系统:CentOS 7.1+(Ubuntu20、Debian10),保证是干净的操作系统,没有安装Apache/Nginx/php/MySQL的其他环境(现有环境不能安装) Centos安装命令: yum install -y wget && wget -O install.sh http://www.aapanel.com/script/install_6.0_en.sh && bash install.sh forum Ubuntu/Deepin : wget -O install.sh http://www.aapanel.com/script/install-ubuntu_6.0_en.sh && sudo bash install.sh forum Debian : wget -O install.sh http://www.aapanel.com/script/install-ubuntu_6.0_en.sh && bash install.sh forum

在 Vim 中显示行号的几种方法

在 Vim 中显示行号,你可以使用以下几种方法: 临时性显示行号 在 Vim 中输入以下命令: :set number 这会立即在当前 Vim 会话中显示行号。当你关闭 Vim 之后,行号设置不会保存。 如果你只想显示相对行号,可以使用: :set relativenumber 要同时显示绝对行号和当前行号用绝对值,其余用相对值,可以这样做: :set number relativenumber 永久性显示行号 要使得每次打开 Vim 时都显示行号,你可以将设置添加到你的 Vim 配置文件(通常是 ~/.vimrc 文件)中。打开你的 ~/.vimrc 文件,并添加以下行: set number 同样,对于相对行号的永久性设置,可以添加: set relativenumber 或者同时添加绝对和相对行号: set number relativenumber 切换行号显示 如果你想要设置一个快捷键来切换行号显示,可以在你的 ~/.vimrc 中添加以下命令。例如,使用 键来切换: nnoremap <F2> :set number! number?<CR> 这条命令会切换行号显示状态,并在 Vim 的命令行上显示当前的行号状态(启用或禁用)。 总结 根据你的需要,你可以选择临时性或永久性显示行号,并且可以通过编辑 ~/.vimrc 文件来设置快捷键方便地切换行号显示。这些方法可以帮助你更好地在 Vim 中进行编辑和导航。

linux查找字符串命令

在Linux中,可以使用多个命令来查找特定的字符串。下面是几个常用的命令: 1. grep命令:grep命令用于在文件中搜索特定字符串。它的基本语法如下: grep 搜索模式 例如,要在文件”file.txt”中查找字符串”hello”,可以使用以下命令: grep “hello” file.txt 如果要忽略大小写,可以使用”-i”选项: grep -i “hello” file.txt 在当前目录下的所有文件中搜索字符串"exampleString": grep -r "exampleString" . 2. find命令:find命令用于递归地在目录树中查找文件和目录。它的基本语法如下: find 若要查找包含特定字符串的文件,可以使用以下命令: find /path/to/directory -type f -exec grep -l “hello” {} \; 这将在指定目录及其子目录中查找所有包含字符串”hello”的文件。 使用find命令查找以.txt为后缀名的文件,并在当前目录及其子目录中递归查找: find . -name "*.txt" 查找当前目录及其子目录中所有名称中包含"test"的文件,并输出它们的完整路径: find . -name "*test*" 3. ack命令:ack命令是grep的替代品,它专门用于代码的快速查找。安装ack后,可以使用以下命令: ack “hello” /path/to/directory 这将在指定目录及其子目录中查找包含字符串”hello”的文件。 4. ag命令:ag命令也是grep的替代品,它可以更快地搜索文件。安装ag后,可以使用以下命令: ag “hello” /path/to/directory 这将在指定目录及其子目录中查找包含字符串”hello”的文件。 以上是几个常用的Linux查找字符串的命令,根据你的需求选择适合的命令来进行查找操作。