前端
前端
靳先生.
做最有意义的事情,成就最有价值的梦想,展现最真实的自己,超越自己,改变世界。
展开
-
vue3设置路由path:‘*‘报错解决方法
一般我们再设置404页面路由的时候是这样的:{path: "/404",name: "notFound",component: notFound}, {path: "*", // 此处需特别注意置于最底部redirect: "/404"}但是如果你使用的是vue3的话,你会遇到这样的一个报错:Catch all routes ("*") must now be defined using a param with a custom regexp.这个报错翻译过来就是捕获所有路原创 2021-08-21 23:22:33 · 11918 阅读 · 2 评论 -
如何破解网站内容的禁止复制
我们平时在写文稿的时候,经常会去网上大面积搜索,但是很多网站的内容都是不可以复制的所以也从网络上看到很多方法,比如右键检查复制,谷歌浏览器打印复制,但是感觉都没什么好用的,而且,不一定是所有网站都是可以复制的,这就让我很痛苦,本来写文稿就是一件非常痛苦的事情,再大面积的找文稿?不行不行,还是自己开发一个脚本吧所以就有了这么一行代码: 你没有看错哦?就这么一行代码,只需要右键开发者模式,在Console输入回车,等待一下出现加载成功之后就可以轻松的复制任何网站的内容了哦 然后这是脚本的核心代码:可能还会有其他原创 2021-08-11 19:34:58 · 403 阅读 · 0 评论 -
利用ace editor 制作了一个在线代码测试
在之前呢,做了一个学习中的在线代码测试,利用了ace Editor API,并且我自己添加了在线运行与切换主题,主要是用于在学习中方便测试学习。Git源代码下载在线代码测试目前已有功能: 语法高亮 语法提示 代码在线运行 两种编辑主题 详细API请点击 源代码下载另外,编辑器主题有很多,貌似有30多种,可以看下官网说明a...原创 2019-07-28 20:24:08 · 1004 阅读 · 0 评论 -
banner轮播图制作
之前做过几次banner的轮播图在后期都发现了一些问题,所以这次更新了最新版元素js制作轮播图的方法,效果图如下:代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Banner轮播图</title> <...原创 2020-02-08 12:03:32 · 431 阅读 · 0 评论 -
原生JS制作网页中的倒计时效果
今天我们用原生js来写一个网页倒计时效果代码如下:<body> <span id="time"></span><script>function countdown(n,y,r,s,f){ var old=new Date(); var now=new Date(n,y-1,r,s,f); var ...原创 2020-02-14 17:24:00 · 445 阅读 · 0 评论 -
JS实现打字机效果
用JS实现一个简单的打字机效果,挺棒哦!这个效果使用JS中的charAt()方法结合定时器来做的,光标效果由于为了有闪烁效果,所以利用了CSS动画来实现,CSS代码个人随意编辑,JS打码中,如果不想使用getAttribute()方法来实现的话,建议使用直接赋值的方法,好了,我不墨迹了,直接上代码:代码:<!DOCTYPE html><html&g...原创 2020-02-15 21:26:50 · 2198 阅读 · 0 评论 -
javascript实现将内容复制到系统剪切板功能
好几天没有更新内容了,原因是这段时间心里不舒服,很烦的那种,不过终于还是满血复活了,这几天事情也比较多,现在闲了下来,更新一个简单功能:使用js实现将内容复制到系统剪切板我就不废话了,直接上代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta ...原创 2020-03-19 19:08:09 · 261 阅读 · 1 评论 -
jquery 点击元素以外任意地方隐藏该元素的方法
第一先实现点击任何地方都隐藏该元素(假设id="bar")$(document).click(function(){$("#bar").hide();});那么bar也属于document,点击bar也会让自己隐藏,显然这不是想要的,这时候要阻止冒泡事件,即document的事件对bar无效$("#bar").click(function(event){event.stopPropagation();});...原创 2021-04-17 15:54:28 · 690 阅读 · 0 评论 -
30个CSS常用小技巧
1、CSS实现不换行,自动换行,强制换行/* 不换行 */.box {white-space:nowrap;}/* 自动换行 */.box { word-wrap: break-word; word-break: normal;}/* 强制换行 */.box { word-break:break-all;}2、禁止用户选择.box { -webki...原创 2020-02-10 17:58:23 · 319 阅读 · 0 评论 -
头部添加网页滚动进度特效
今天出一个特别吸引人的特效,叫做头部添加网页滚动进度特效,体验感很强,效果如下:代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...原创 2020-02-12 16:38:18 · 275 阅读 · 0 评论 -
颜色提取工具,一键颜色值复制工具
这两天开发了一个颜色提取工具,在这之间遇到了一点小问题:“颜色rgb与16进制切换,点击复制到剪切板功能”。目前工具支持功能:1、一键点击复制到剪切板2、提供两种主题颜色切换与静音模式3、支持160种国内外常用颜色值工具地址:http://color.clowntool.cnGit项目地址:https://github.com/2766401256/ColorTo...原创 2020-02-29 21:14:18 · 2796 阅读 · 0 评论 -
个人简洁搜索、导航开发版分享
今天呢,个人搜索导航正式开发完结,开发这个东西的原因呢,是因为自己之前想弄一个个人书签,但是发现又没有一款很好的搜索页面,所以呢,就开始开发这个网站了此网站呢是利用php+mysql开发的,对于网站的页面设计,啊,真是够了,我的垃圾设计实在想不出来,所以只能通过借鉴其他作品的设计案例并且已经安装:https://so.cclown.com/我个人呢,建议将此导航设置为自己电脑浏览器首页,哈哈功能:1、可切换搜索引擎2、有智能提示功能3、有网址分类导航功能...原创 2020-05-24 22:00:37 · 294 阅读 · 0 评论 -
使元素遇顶固定
今天有人问我遇顶固定怎么做,这位朋友是刚入门,所以个人感觉非常简单的特效对刚入门的朋友还是有点阻碍,然后呢,我就在博客里写下了这个简单的小特效,先看一下效果图吧:这个特效在网站中,还是比较常用到的,我就不写很多代码了,图方便,直接上div了HTML:<header> <div></div> <nav></nav> </header> <br><br><br&g原创 2020-06-05 21:48:29 · 225 阅读 · 0 评论 -
无需修改服务器配置解决CSS调用字体跨域问题
这段时间,我把自己的所有网站好好整理了一下,当初做的时候,所有的字体文件和公共js文件都会重复很多,占用的资源也比较大,所以我就给所有的网站套上了cdn,我将字体文件等公共文件弄了一个公共cdn网址,可是发现了一个问题,也是比较经常遇到的,那就是字体跨域问题:解决了这个问题之后,空间会少占用很多,打开速度会提升很多,在百度和其他站长那里请教了一下,说是改什么服务器的配置文件,还有说修改什么.htaccess文件,总之是非常的麻烦,后来通过研究与查阅,出现了一个更好的解决办法,就是将字体文件转换为ba原创 2020-06-08 20:53:34 · 827 阅读 · 0 评论 -
如何修改placeholder样式
项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置。要改变placeholder的颜色就要使用到伪类::placeholder<style> input::placeholder { color: green; }</style><input type="text" placeholder="hello world" style="color: red;">原创 2021-04-17 15:55:09 · 7198 阅读 · 0 评论 -
JS获取url参数
以下JS函数用于获取url参数:function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("=");原创 2021-04-19 19:06:08 · 143 阅读 · 0 评论 -
vue同一条路径下使用共同组件数据不刷新问题
问:同一条路径下首页和首页中不同子路径使用共同的组件,只有router-view发生变化,当在路由中改变共同使用组件的数据时,组件不刷新解决方法:一:使用watch监听路由变化,手动更新数据:watch: { $route(to, from) { this.data=newdata } }二:<router-view :key="$route.fullPath">使用:key="$route.fullPath"通过绑定一个fullPa原创 2021-06-01 08:37:10 · 658 阅读 · 0 评论 -
js数据导出到txt文件
saveFile (text) { var data = text; var name = 'a.txt';//文件名 this.exportRaw(data, name); },exportRaw (data, name) { var urlObject = window.URL || window.webkitURL || window; var export_blob = new Blob([data]); var s.原创 2021-06-01 08:34:42 · 2094 阅读 · 1 评论 -
Vue中router的beforeEach与afterEach钩子函数
在路由跳转的时候,我们需要一些权限判断或者其他操作,这个是后就需要使用路由的钩子函数了。定义:路由钩子主要的作用是给使用者在路由发生变化时进行一些特殊的处理而定义的函数两种函数:1.Vue.beforeEach((to,form,next)=>{})在跳转之前执行2.Vue.afterEach((to,form)=>{})在跳转之后执行beforeEach函数中的3个参数:to:router即将进入的路由对象from:当前导航即将离开的路由next():进行管子中原创 2021-06-01 08:34:00 · 866 阅读 · 0 评论 -
vue中router与route的区别
一、$route对象$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。1. $route.path(字符串,对应当前路由的路径,总是解析为绝对路径,如"pc/shop")。2. $route.params(一个key/value对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。)3. $route.query(一个key/value对象,表示URL查询参数。例如对于路径 /admin?user=...原创 2021-06-01 08:32:26 · 270 阅读 · 0 评论 -
js鼠标点击弹出浮动文字
使用的时候记得引入jquery<script> let index = 0; $(document).ready($ => { $("body").click(e => { let a = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"]; let $i = $("原创 2021-06-01 08:29:25 · 571 阅读 · 0 评论 -
关于node安装webpack的一些坑
第一个坑,安装webpack之后,你运行时会出现:One CLI for webpack must be installed. These are recommended choices, delivered as separate packages: - webpack-cli (https://github.com/webpack/webpack-cli) The original webpack full-featured CLI.We will use "npm" to install t原创 2021-06-01 08:28:19 · 206 阅读 · 0 评论