web前端
逸曦穆泽
人生很短,不过匆匆百年,人生也很长,点点滴滴,一步一步,渐行成路!
生活是风景,日久会生情,人生是道路,曲折与直,思想是食粮,充饥与享受!
无需感叹人生之悲喜,安需这一生之所知所求!
寻寻觅觅又是一季,恍恍惚惚已是一年!
风景不会为谁停留在那一刻?
展开
-
css grid布局动画
旋转原理挺简单的,大的模块顺时针,小的模块逆时针,所以图片维持统一不转的状态。原创 2023-06-10 19:45:00 · 216 阅读 · 0 评论 -
css 背景渐变
序:本来用圆锥渐变画一个色盘的,后来想想要不要把背景渐变也总结一下,好吧!原谅我,把代码放到内容里面去了,要的话在里面找找就好!原创 2023-03-18 19:45:00 · 533 阅读 · 0 评论 -
一些文本在CSS上的作用
记录一下CSS上一些文本的作用和使用。原创 2022-08-03 18:45:00 · 223 阅读 · 0 评论 -
windows server 2012 r2 服务器部署tp6 项目
序:此前是一直部署的都是 liunx 的 CentOS 操作系统的,突然,接到一个是Windows的系统的服务器,把我整不会了,嘎,嘎...,差点就芭比Q了,看了大量文章,好吧,自己动手;1、下载PHP,下载地址:windows.php.net - /downloads/releases/2、安装包拷贝到到新建的php文件夹下并解压,复制一份php.ini-development 文件命名为php.ini3、打开服务器管理,可以看到我已经下载了IIS,不过还可以在添加角色和功能下安...原创 2022-03-01 18:38:37 · 1132 阅读 · 0 评论 -
前端 css + js 预约列表
序:预约一个星期的数据,比如当天是19号,预约时间从明天开始计算,其实也可以从后端写计算好的数据返回,前端只负责渲染就行图:内容:<style> .date_picker{background-color:#fff;margin-bottom: 30px;} .date_picker_tle{font-size:1.6em;font-weight: bold;text-align: center;margin-bottom: 15px;font-famil.原创 2022-01-19 15:06:41 · 1184 阅读 · 7 评论 -
tp6 项目的创建与多应用
环境之类的我就不说了,本地使用的是 windows 下的小皮面板原创 2022-01-08 09:25:11 · 1357 阅读 · 0 评论 -
uni-app 侧滑菜单的实现
不是不好,只是少了一个手势的滑动开关,自己仿写一个吧,亲自动手丰衣足食,一条大道两边都走原创 2021-11-20 15:10:47 · 3380 阅读 · 0 评论 -
js实现一个时钟
https://codepen.io/nicefutrue/full/QWMrKBP原创 2021-11-08 16:47:37 · 259 阅读 · 0 评论 -
hugo 建站(部署gitee)
1、gitee(码云)进入码云,点击右上角的加号 + -> 新建仓库 -> 填写仓库名称,选择开源(所有人可见)创建完仓库,进入仓库点击右上方的“服务”,会弹出一个选择列表,选择 gitee Pages,然后会让你填写一些认证信息(真实姓名,身份证号和照片),等待一两天吧!2、生成静态页,部署提交代码到gitee# 生成静态页,可部署的 public 文件夹hugo -D# 进入 public 文件夹内cd public # 设置账号和邮箱..原创 2021-11-01 09:36:18 · 791 阅读 · 0 评论 -
hugo 建站(本地搭建)
Hugo是由Go语言实现的静态网站生成器;简单、易用、高效、易扩展、快速部署。网上像这样的文章估计都写烂了,俗话说的好,读万卷书,亦要行万里路,好记性也要烂笔头呀;好吧,废话不多说了,记录自己的过程!一、准备:1、Go 环境搭建(菜鸟教程)a、Go官网 b、Go官方镜像站(推荐)c、我的百度网盘下载 go1.17.2 win版(提取码:tps2)2、Git 工具(菜鸟教程)3、推荐使用Typora(Markdown编辑器),我的网盘下载Typora(提取码:kr94)4、hug...原创 2021-10-21 18:44:06 · 1127 阅读 · 0 评论 -
把网站的页面变灰
唉!缺乏创造力了,我想躺赢,将自己的个人博客掏一篇过来。css 实现html{filter: grayscale(100%);-webkit-filter: grayscale(100%);}JavaScript 实现<script>const date = new Date();// 12月13日 国家公祭日if(date.getMonth()+1 == 12 && date.getDate() == 13){ document.getElem原创 2021-10-19 15:27:27 · 136 阅读 · 0 评论 -
vue 实现侧边菜单点击,内容滚动至可视区
1、显示图:2、模板内容:<div class="page-container"> <div class="sidebar-menu"> <div class="sidebar-menu-inner"> <nav class="sidebar-nav"> <img class="sidebar-logo" src="../assets/logo.png">.原创 2021-10-15 15:18:11 · 1186 阅读 · 0 评论 -
mapbox 地图使用
中文版(各种例子、文档、style等)国际版(注册、登录,创建属于自己的token、地图,token还可以绑定指定域名使用)目前我的静态足迹图已经实现(以下两种都已实现,最后只差后台的数据CRUD,并将数据整理生成json文件)1、参照实现足迹图:2、个人实现足迹图:后续会把部分代码带上...原创 2021-10-11 09:42:54 · 1359 阅读 · 1 评论 -
一些 javaScript、CSS 的优雅使用
亲自动手丰衣足食,哈哈吾又来了了一、javaScript1、数组循环计算(更多数组对象操作)const arr = [ 300.3, 200, 520, 30.3, 20.6 ];//一般做法const low_compare = []; // 比较const low_tax = []; // 乘积var low_total = 0; // 总和for (let i = 0; i< arr.length; i++) { if(arr[i] >原创 2021-09-09 16:21:44 · 171 阅读 · 0 评论 -
javaScript、jQuery 节点(一目了然)
一、javaScriptvar dv = document.getElementById("id");var parent = dv.parentNode; // 父节点var chils = dv.childNodes; // 全部子节点var first = dv.firstChild; // 第一个子节点var last = dv.lastChile; // 最后一个子节点 var previous = dv.previ原创 2021-09-06 16:07:15 · 151 阅读 · 0 评论 -
tp6 登录验证
中间件命令快速生成:tp6手册指引php think make:middleware Check1、中间件:app/middleware/Checknamespace app\middleware;use think\facade\Session;class Check{ public function handle($request, \Closure $next){ $name = Session::get("lenzePromUser");原创 2021-08-27 15:29:42 · 1806 阅读 · 3 评论 -
个人博客的搭建选择
快速建站:Hexo,WordPress,Zblog,Typecho方案 Hexo WordPress Zblog Typecho 静态 是 否 否 否 后台 无 有 有 有 源生Markdown 是 否 否 是 操作简单 ☆ ☆☆ ☆☆☆ ☆☆☆ 主题美观 ☆☆☆☆ ☆☆☆ ☆☆ ☆☆☆ 风格简洁 ☆☆☆ ☆ ☆☆☆原创 2021-08-24 17:41:23 · 325 阅读 · 1 评论 -
vue 内容循环滚动
哈啰!这个是使用定时器实现的滚动!看看效果图:样式与内容<style> .blog_news_gossip{height:320px;text-align: center;padding:30px 15px;} .blog_news_gossip .blog_news_tle{font-size: 20px;font-weight: bold;margin:0 20px 10px;} .blog_news_gossip .blog_news_scroll{height:2原创 2021-08-03 09:51:50 · 1716 阅读 · 5 评论 -
vue3 使用 ECharts5
看ECharts官方文档:ECharts5查看配置项:setOption<div class="Echarts"> <div id="main" style="width: 100%; height: 400px"></div></div><script> import * as echarts from 'echarts/core'; import { SunburstChart } from 'echarts/chart原创 2021-08-02 09:17:12 · 1033 阅读 · 0 评论 -
js 元旦倒计时【非常nice】
如图:js 实现(已经够详细的啊,再埋怨把你腿打断):export function countDown() { var nowDate = new Date(); // 实时日期 var nextYear = new Date(nowDate.getFullYear() + 1 +'/1/1'); // 明年的一月一日 var timediff = Math.round((nextYear - nowDate) / 1000); // 时间差 var d = parseInt原创 2021-07-30 00:35:38 · 1716 阅读 · 0 评论 -
html 数据可视化
骚!记忆力是个好东西,可是它不属于我掌控,呜!我还以为这篇文章早已发布出来了,想不到居然只记录在文档中!前言废语:1、html、css、JavaScript 构成一个完整的页面2、jQuery 是一个 JavaScript 库;3、jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题;4、jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。5、TypeScript 是 JavaScript 的一原创 2021-07-19 15:52:23 · 4294 阅读 · 1 评论 -
vue3 路由模块化 SSR
沙拉嘿!我的骚不是你理解的骚,我之所以那么菜,还不是自由给的爱,充实而自由,我的自由,就是孤而由己,与影随行,形影不想理,沉默而不语,忽而吟唱,忽而蹦跶,岂乃现阶段之无奈,唉!翻看一下vuejs3的文档,让我发现一个愉悦的写法:当然,你的路由比较少的话,就当我没说,OK!如果多的话,就可以省略不少代码的,灵活灵用才是一个程序员的基本操作嘛,相信懂得都懂!const pages = import.meta.glob("./views/*.vue")const routes = Obje原创 2021-07-18 13:16:13 · 653 阅读 · 0 评论 -
vue3 脚手架@vue/cli4.5出现: Object(...) is not a function,history: createWebHashHistory()报错
强中自有强中手,中看不中用,管你哪来头!上菜: 调料分析:由上述菜肴可知,history: createwebHashHistory() 来自原料 vue-router,原料需要更换新品测试npm install vue-router --save# + vue-router@3.5.2# 升级修复npm install vue-router@next# + vue-router@4.0.10升级后,重新煮菜,嗯,符合胃口!搞定收工!..原创 2021-07-16 10:47:47 · 2699 阅读 · 0 评论 -
js 将markdown的图片、链接转成 HTML可显示
在Javascript中进行就可以了<script> $.ajax({ type: 'post', url: 'url', success: function (res) { var hta = "",htimg = ""; hta = mdTohtHref(res.data.a); htimg = mdTohtImage(res.data.img);原创 2020-11-07 14:06:45 · 511 阅读 · 0 评论 -
tp5 对 MongoDB 集成与扩展(PHPstudy)
Windows:安装MongoDB:https://www.kancloud.cn/danielxss/v20170712/354650(我选择的版本是4.0.10)Linux:1、安装PHPstudy:PHP版本:支持php5.2/5.3/5.4/5.5切换 (由于tp5 对 MongoDB 的扩展是:php版本 >= 5.5,所以建议下载5.5)wget -c ht...原创 2021-07-08 11:04:59 · 213 阅读 · 0 评论 -
document.compatMode
document.compatMode用来判断当前浏览器采用的渲染方式。官方解释:BackCompat:标准兼容模式关闭。CSS1Compat:标准兼容模式开启。当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;当document.compatMode等于CSS1Compat时,浏览器客户区宽度是documen...原创 2021-07-08 10:38:23 · 363 阅读 · 0 评论 -
svg 的骚操作之动画
骚嘿!人生还是要向前看,有可能你还没谈过恋爱,但肯定的是,你很多的第一次已经不知不觉经历过了,那种新奇,可能你并那么上心留意,第一次读书、第一次学车、第一次煮饭等等;我知道,你可能很渴望,但你并不想,这很拉扯;撕裂的自我,让你发现自己还是平凡而普通的一个;可是,你还是受自身感官的影响,但并不否认的是,我们都是视觉性动物!哈哈。才艺展示:地点:svg 菜鸟恋爱手册真理实践:亲自动手,丰衣足食!脚踏实地,学得能力!把妹技能(CSS):/* (1) */svg .lin原创 2021-06-23 17:50:32 · 161 阅读 · 0 评论 -
tp5 实现多语言切换的一个小bug
骚嘿!我不知你不知就让你吃吃吃,撑死也不涨知识;我知你知还有三不知,不知学习,不知反思,不知行动。实现多语言参考:thinkphp5实现多语言切换原创 2021-06-11 12:02:22 · 416 阅读 · 0 评论 -
vue 使用 Swiper6 轮播(非常nice)
骚嘿!匆匆忙忙,不急这一回,学习如是,生活如是,人生也是!你我之过客,可就一章,可就多章,可就再无,世界那么大,可见之皆为缘;如一本书,一人可看,千人可看,可有万、亿人不可见也。旅途匆匆,不如停歇一会,多欣赏一下身边的美好,人这一生,愿你不机械!我嘛,还是以文档为主,毕竟是别人搞出来的东西,肯定有参考的:Swiperv v6 在vue上的使用(英文版,翻译的嘛,你懂得)哇!它还是以插件的耶,撸它!npm i swiper //先把它下了再说# 可能遇到问题:下载完这个,运行:npm run原创 2021-05-26 17:28:57 · 800 阅读 · 2 评论 -
tp5 文件管理 (文件夹的创建、重命名、删除,文件的上传、下载、删除,目录的跳转)
岁月,总是不经意中溜走,可我总也留不下它;总有一天,当我灵力枯竭时,我的世界也会随之坍塌,精神沉沦,直到我灵性中看到光,而那个的我还有没有可能还是我!1、文件夹的创建:function createFolder(){ if(request()->isPost()){ $filePath = input("filePath"); //路径 $dirName = input("newName"); //文件夹名称 $dirPath = $filePath原创 2021-04-30 17:56:09 · 1032 阅读 · 1 评论 -
js 鼠标事件_移入移出
mouseover(移入) mouseout(移出)mouseover此事件类型冒泡,可能引起很多头痛的问题。例如,当鼠标指针移出Inner元素,事件将被发送到Inner元素,然后冒泡到Outer元素 。这可能会触发绑定的mouseover处理函数。mouseout此事件类型冒泡,可能引起很多头痛的问题。例如,当鼠标指针移出Inner元素,事件将被发送到Inner元素,然后冒泡到Outer元素 。这可能会触发绑定的mouseout处理函数。$(".class").mouseover(funct原创 2021-04-06 11:32:29 · 16505 阅读 · 2 评论 -
html 侧边菜单切换的显示与隐藏,图标的 + 与 -
自己动手,丰衣足食,效果图:js、html、css// 类型选择 切换显示与隐藏$(".menu_item .menu_item_box").on("click",function (e) { $(this).next(".menu_nav_child").slideToggle(500); if($(e.currentTarget).hasClass('menu_item_open')){ $(e.currentTarget).children(".menu原创 2021-03-06 18:35:14 · 850 阅读 · 0 评论 -
JS 实现Tab标签页切换的效果
虽然好多框架都集成有现成Tab标签页切换的例子,但还是自己写一下吧!效果图:HTML的demo<!doctype html><html lang="ch"><head> <meta charset="UTF-8"> <title>标题切换内容</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.j原创 2021-01-25 17:30:16 · 1850 阅读 · 0 评论 -
web 前端笔记
一、HTML、CSS、JavaScript 三者构成一个完整的页面1、jQuery 是一个 JavaScript 库2、jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。3、jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。4、TypeScript 是 JavaScript 的一个超集5、ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表(提供了常规的折线图、原创 2021-01-25 15:30:22 · 242 阅读 · 0 评论 -
css 优化滚动条的外观
本来不想记录的,想到很久没写了,就当无聊 荡荡水吧!/* 自定义模块滚动 */.scroll::-webkit-scrollbar{width:5px;height: 5px;}.scroll::-webkit-scrollbar-thumb {border-radius: 5px;background: #707070;}.scroll::-webkit-scrollbar-track {background: #ddd;}/* 浏览器窗口 */html,body::-webkit-sc原创 2021-01-15 09:30:02 · 168 阅读 · 0 评论 -
js 改变url的参数而不刷新
如果生活是真实存在的,那么人生就是生活的影子!—— 致我自己需求:在同一个页面中,点击页面中的不同按钮显示不同内容时,不能跳转到其他页面,可以为 url 地址添加、删除参数来识别用户点击了什么按钮。添加参数:http://localhost.com?a=xxx&b=xxx 《=》删除参数:http://localhost.com?a=xxx//删除url中参数function delUrlParam(param){ let obj = new window.URL(win.原创 2020-12-14 16:50:45 · 2045 阅读 · 0 评论 -
js 获取浏览器版本
html:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>获取浏览器类型和版本</title> <script type="text/javascript"> function getBrowserInfo(){ var Sys = {}; var ua = navigator原创 2020-11-24 17:48:57 · 381 阅读 · 0 评论 -
js cookie的设置、获取、删除
寻寻觅觅又是一季,恍恍惚惚已是一年,时光飞逝,岁月如梭,该生活的还是生活,该感叹的还是感叹,毕竟谁也免不了挨岁月的这把刀;来,开始我们的小记录!cookie的属性项属性项 属性项介绍 NAME=VALUE 键值对,可以设置要保存的 Key/Value,注意这里的 NAME 不能和其他属性项的名字一样 Expires 过期时间,在设置的某个时间点后该 Cookie 就会失效 Domain 生成该 Cookie 的域名,如 domain="www.baidu.com"原创 2020-11-16 11:20:30 · 117 阅读 · 0 评论 -
Ant Design pro 初体验
不多说了,就是记录一下!安装nodejs(自己选择对应的系统、版本下载,我选的是Windows系统,64-bit 的 .msi 安装文件)安装好看看版本:(我安装在D盘下,D:\nodejs)node -vnpm -vOK,在nodejs下新建两个空的文件夹【node_global】和【node_cache】,并nodejs下打开终端用以下命令配置一下npm的全局模块npm config set prefix "D:\nodejs\node_global"npm config .原创 2020-10-24 18:34:43 · 164 阅读 · 0 评论 -
js 绘制一个进度条加载的圆环
人生本是不可逆的旅程(当今认知下),但总想回到过去,改变过去的未来,所以渴望追求幻想,有了时光机器的概念,成功的实现来自实践,不能我想怎样,我想那样,我想这样;而是我做的怎样,我做的那样,我做的这样。可是,人毕竟要有点幻想,因为那是我们对美好的追求所现,有所想,有所求,有所欲;敢想,敢做,敢拼。人生没有绝对的绝路,绝路那是你可能没有变通,受地域、知识、环境所限!机会是一扇扇门,知识流、信息流的把握,打开的钥匙就是对时间的考验!如图:css:.progress_box {posi原创 2020-06-29 15:43:38 · 768 阅读 · 0 评论