小技巧
马优晨
生活中的打击和挫折远比想象的更多,有时灾难又会让你的一切努力白费,也许明天我们就会死去,但如果我们还活着,在面对着种种不公和无奈过后,“明天的明天的明天,你是否会依然爱着这个世界。” 我想我会.......................
展开
-
饿了么实现一行四张卡片
如图实现上面的卡片展示。原创 2024-04-01 20:39:24 · 278 阅读 · 0 评论 -
Font Awesome 5使用
Font Awesome 5 的专业版有7842个图标。要使用免费的Font Awesome 5 图标,您可以选择下载Font Awesome库,或者在Font Awesome注册一个帐户,并获得一个代码(称为KIT CODE),以便在将Font Awesome添加到网页时使用。原创 2023-07-25 19:59:17 · 698 阅读 · 0 评论 -
前端函数式编程基础
函数式编程,是一种编程范式,它将电脑运算视为函数运算,并且避免使用程序状态以及易变对象。比起命令式编程,函数式编程更加强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而不是设计一个复杂的执行过程。原创 2023-07-03 11:08:01 · 200 阅读 · 0 评论 -
背景图占满手机全屏
在工作开发中,需要一个背景图占满全屏,这个时候需要怎么处理呢?原创 2023-05-17 10:16:21 · 140 阅读 · 0 评论 -
react hook计时
在页面进入时开始计时,离开页面时停止计时,并记录页面停留时长。原创 2022-12-16 17:22:29 · 155 阅读 · 0 评论 -
js派发自定义事件
js派发自定义事件原创 2022-09-22 15:09:47 · 774 阅读 · 0 评论 -
端口被占用
sudo kill -KILL 线程号。15 (TERM):正常停止一个进程。9 (KILL):杀死一个进程。1 (HUP):重新加载进程。lsof -i: 端口号。(2)删除占用端口号。原创 2022-09-22 14:41:39 · 138 阅读 · 0 评论 -
PC菜单筛选器
如上图所示,不使用UI库,手写一个筛选器JS代码'use strict';import { createElement, useEffect, useState, Fragment, useCallback, useMemo, useRef,} from 'rax';import View from 'rax-view';import Text from 'rax-text';import Picture from '@ali/rax-pictu...原创 2022-04-14 15:09:43 · 343 阅读 · 0 评论 -
js动态添加meta标签
有时候我们需要动态添加meta标签和里面的内容,如何添加呢?举例: // 手动添加mate标签 const addMeta = (name, content) => { const meta = document.createElement('meta'); meta.content = content; meta.name = name; document.getElementsByTagName('head')[0].appendChi..原创 2022-01-13 15:22:04 · 9234 阅读 · 0 评论 -
mac关闭指定端口
如何关闭正在运行的3333端口 命令: lsof -i: 端口号 举例: lsof -i: 3333 (2)杀死对用pid进程原创 2022-01-07 10:59:15 · 4964 阅读 · 0 评论 -
判断手机浏览器还是桌面浏览器
(1)使用navigator.userAgent最简单的方法就是分析浏览器的 user agent 字符串,它包含了设备信息。JS 通过navigator.userAgent属性拿到这个字符串,只要里面包含mobi、android、iphone等关键字,就可以认定是移动设备。if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 当前设备是移动设备}// 另一种写法if ( navigator.userAgent.m原创 2021-10-13 17:54:23 · 1583 阅读 · 0 评论 -
倒计时插件与函数
(1)使用倒计时函数 const countDown = (current, ends) => { const leftTime = ends - current; let [h, m, s] = ['00', '00', '00']; if (leftTime >= 0) { h = Math.floor((leftTime / 1000 / 60 / 60) % 24) >= 10 ? Math.floor(原创 2021-10-12 14:28:37 · 218 阅读 · 0 评论 -
一个列表中按钮的不同样式
如上图所示,假设这是一个传统的秒杀购买场景:(1)问题概述:状态: (1,2)进入秒杀 (3)立即预约 (4)宝贝秒光 (5)活动结束 文字: 进入 秒杀文字颜色#fff,其他文字颜色都是 #ff3B56; 宝贝秒光,活动结束,文字带透明度30%;描边: 只有立即预约有描边,其他状态都没有按钮透明度:立即预约 8% 进入秒杀 100% 宝贝秒光 8% 活动结束 8%(2)解决方案: 拿到这个问题,首先很多人想想到的是...原创 2021-10-12 11:02:37 · 314 阅读 · 0 评论 -
将16进制的颜色转为rgb颜色
考虑到通用性, 就定义一个colorToRGB函数吧,将16进制的颜色值当做参数传入。 首先需要将参数转为字符串类型的,'color = ""+color;' 检查第一个字符是否为"#", 如果第一个字符为“#”,截取“#”之后的字符,判断当前color的位数,需要考虑到色值是可以简写为3位的,如果是3位颜色值,每一位重复一次代表一个颜色,例如#fff,其实是#ffffff的简写,然后分别取得rgb三个色值:color1, color2, color3。 到这一步之后,就没什么了,...原创 2021-10-12 10:39:48 · 4149 阅读 · 1 评论 -
clipboard使用总结
(1)介绍:clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;(2)clipboard复印内容的方式有从target复印目标内容通过function 要复印的内容通过属性返回复印的内容target复印目标内容,这里不说,就说一原创 2020-06-22 19:32:18 · 41082 阅读 · 0 评论 -
js制作返回顶部
页面返回顶部有很多漂亮的形式,今天这里分享一个返回顶部的两个小动画。效果一:效果而:组件引入: <goTop></goTop> data() { return { test:”777 } }, components: {goTop}组件包含两个文件GoToTop.js 和goTop.vuegoTop.vue<template> <div class="goTopBT"> <d原创 2020-06-22 19:12:47 · 828 阅读 · 0 评论 -
获取cookie,删除cookie,添加cookie
获取cookie,删除cookie,添加cookieexport const setCookie = function(name, value, expire) { let exdate = new Date(); exdate.setTime(exdate.getTime() + expire * 60 * 1000); document.cookie = name + ...原创 2020-01-19 15:13:40 · 552 阅读 · 0 评论 -
二进制转base64
有时候需要将二进制图片文件 转base64,方法如下: _arrayBufferToBase64(buffer) { let binary = ""; let bytes = new Uint8Array(buffer); let len = bytes.byteLength; for (let i = 0; i < len; i++)...原创 2020-01-19 13:56:52 · 10460 阅读 · 1 评论 -
常见前端数据格式转换
开发的过程当中遇到这样一个处理数据的需求:场景:const todayILearn = { _id: 1, content: '今天学习 JSON.stringify(),我很开心!', created_at: 'Mon Nov 25 2019 14:03:55 GMT+0800 (中国标准时间)', updated_at: 'Mon Nov 25 2019 16:03:55...原创 2019-12-11 10:32:51 · 1400 阅读 · 0 评论 -
正则匹配 http或者 https开头的网络地址
直接看代码:var str = 'https://blog.csdn.net/qq_24147051/';var reg = /(http|https):\/\/([\w.]+\/?)\S*/igif(str.match(reg)){ console.log("success");}原创 2019-12-11 09:41:09 · 16048 阅读 · 3 评论 -
文本溢出截断省略
(1)单行文本溢出省略<style> .demo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }</style><body> <div class="demo">这是一段很长的文本</...原创 2019-11-07 11:28:41 · 320 阅读 · 0 评论 -
遍历元素根据状态显示不同颜色
如上图所示是一个列表遍历出来的结果,数据状态如下: list: [ { id: 1, src: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg', name: '齐天大肾', stat...原创 2019-10-23 10:40:45 · 1871 阅读 · 0 评论 -
设置页面满屏背景色
我们常常在工作中遇到,页面要设置可视区域都有背景色,但是 实际页面大小并没有占满全屏,这个时候就会很纠结,这里我记录一下我的做法。这里我使用的是vue:HTML<template> <div class="prize-drop"> <div class="prize-drop-content"> 88888 </div&...原创 2019-10-23 10:29:32 · 2834 阅读 · 0 评论 -
canvas的简单实例集合
这里讲解一些canvas的实例demo,大家可以参考着看看,希望对你有一定的帮助。 这里的demo主要是:canvas 绘制路径 、绘制矩形、绘制文本 、绘制圆形和扇形 、 设置渐变色 、设置渐变色 、图像处理方法、动画HTML代码<canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas! </canva原创 2016-11-02 22:07:37 · 4131 阅读 · 0 评论 -
弹框在一个很的长页面居中显示
说到这个问题,100%的前端工程师都遇到过。但是这个问题又是不太好形容,所以对此做解释的人自然很少,这里,我要对这个问题,做一下解释,以一个实际的例子引出话题,分析问题。下面先看下,在各种机型上支持的效果。Nexus 5X iphone6Galaxy note3 Ipad iphone6 plus 接下来就是代码部分了:HTML<!--弹框--><div class="arrow_mask"原创 2016-11-03 11:41:45 · 2886 阅读 · 0 评论 -
H5禁止弹窗页面滚动
这篇文章讲解一下,弹窗弹出以后,如何禁止页面滑动的技巧。如下图所示,在“弹窗”弹出后页面是可以滚动的。 解决方案:第一步: 在点击弹框的事件中添加: $("body").addClass('prevetwinow');第二步: 在关闭弹框的事件中添加: $("body").removeClass('prevetwinow');第三步:写CSS中prevetwinow的内容.prevetwinow{原创 2016-11-03 14:44:48 · 4221 阅读 · 1 评论 -
将SVG 图引入到HTML页面
将SVG图引入到HTML网页,目前只有三种办法,前两种很相似,第三种更简单。下来介绍一下这是那种方法。第一种:使用<embed>标签: 这个是官方推荐的用法,但是这个官方是Adobe官方,不是W3C官方,现在的HTML标准里还没有这个标签。<embed src="example.svg" width="300" height="300" type="image/svg+xml" pluginspa原创 2016-11-04 15:36:05 · 54303 阅读 · 3 评论 -
H5禁止手机自带键盘弹出
这个问题,确实困扰了我好久,但是今天解决了。在网上搜索答案,全都是用DIV模拟input框实现,没有一个真正解决这个问题的,现在我只需要一句代码就可以完完整整的解决这个问题。先看下问题吧:这个是我自制的一个日历,在没有选择日期前她是这个样子的,感觉还可以吧但是好景不长,当我将手放进选择框选日期的时候,手机自带的键盘就弹出来了,完全盖住的页面,好心塞,有么有? 解决方案:HTML代码 <div原创 2016-10-28 18:14:43 · 43684 阅读 · 26 评论 -
js解码与编码是什么意思?
问题: 1-js解码与编码是什么意思? 2-为什么要进行编码与解码?答案: 大家在使用JS提交数据时,尤其是中文的时候,经常会需要将要提交的字符串进行URL编码。然后在展现的时候,在进行解码。在JS中对字符串进行URL编码有好几种方encodeURI,encodeURIComponent,还有escape。下面我们来分别看看这几个函数: encodeU原创 2016-10-28 11:29:10 · 2774 阅读 · 0 评论 -
动态添加内容到百度搜索框里
先看一下效果吧:(图一) (图二) (图三) 演示: 在图一搜索框内输入”文字内容“,单击搜索按钮,即可将内容直接添加到百度浏览器的输入框里面。原理:HTML代码 <li> <form action="#" id="search_box"> <div class="wrapper"> <input type="原创 2016-10-28 10:59:26 · 1363 阅读 · 0 评论 -
JS如何制作图形验证码
实际效果第一步我们来到要展示验证码的页面,当我们按下营业执照的时候让其,弹出一个弹框,弹框的上面就是验证码,如图一所示: (图一)弹框的样式如图二所示: (图二)我们要对验证码的值进行校验,判断验证码是否输入正确,当输入不正确的时候,我们提示错误信息,提示信息如图三所示:(图三)如果页面了验证正确,这不会提示错误信息并且调到我们的目标页面,如图四所示:(图四) ——–营业执照页面为私密页面,原创 2016-09-13 10:17:25 · 15625 阅读 · 0 评论 -
如何实现同一个页面里面两个页面的相互切换(window.onscroll)
这里我们通过一个实例来阐述具体的做法,首先我们在一个页面有两个要处理的DIV页面,第一个页面的div中id=”basic”,第二个页面的div中id=”high”。(我们要实现的功能是,打击 基础入门,与 高级技能 可以切换对应的页面,基础入门 下滑 就是 高级技能页面,高级技能页面上滑就是 基础入门页面)HTML<div class="nav"></div><div id="basic" cla原创 2016-09-07 10:56:29 · 13640 阅读 · 1 评论 -
同级子目录下重新设置属性失效
在同一级目录下,经常会出现,在设置属性时失效??? 这个是因为你的优先级没有达到,怎么解决这个问题呢?你只需把他的父级搬出来,如果还不行,就把父级的父级搬出来,知道效果显示出来为止!友情举例:在这个图片中,我们要这只,待确认收货的颜色和其他的颜色不一样,但是默认所有字体都给了颜色?这个时候我们的方法就可以使用了。接代码:HTML<div class="list"> <div class原创 2016-09-06 10:09:03 · 426 阅读 · 0 评论 -
设置一个DIV固定在底部,并且左右固定,垂直居中
HTML <footer> <div class="footer"> <div class="btn_mes"> <input type="button" class="withdrawals" id="btn2" value="升级为正式萌团长">原创 2016-09-05 10:01:02 · 6165 阅读 · 0 评论 -
两个弹窗相互切换(安卓苹果通用方法)
两个弹窗相互切换(安卓苹果通用方法)效果1-点击问号一弹出第一个对话框,第二个对话框消失2-点击问号二弹出第二个对话框,第一个对话框消失3-点击其他地方,两个对话框都消失做法:#(1)设置一个class类 mask,模拟body覆盖所有页面:并且设置 z-index: 1;(不设置的话默认是z-index: 0).arrow_mask{ position: fixed; top:原创 2016-09-05 08:44:10 · 1469 阅读 · 0 评论 -
使用JS让手机震动
这个功能真的很神奇,但是前提是你的手机支持这个API,否则它的美,你无法亲身体会。HTML <div class="shock"> 按我手机会震动 </div>CSS .shock{ font-size: 15px; font-weight: bold; color: red; }JS//Vibration接口用于在浏览器中发出命令原创 2016-10-31 10:44:35 · 16549 阅读 · 5 评论 -
手机端校验的那些事情(简单实例)
这里通过一个简单的实例来聊聊,手机校验,和用户名校验:1-页面初始的样子:先看一下演示效果:2-用户名输入错误:3-手机号码输入错误:4-用户名手机号码输入正确格式:接下来就是代码讲解了,往下看,有惊喜……….HTML<ul class="fill-mess"> <li> <div class="name-mes"> <div>预订人</div>原创 2016-10-31 15:06:26 · 2641 阅读 · 0 评论 -
使用git切换分支
使用git切换分支第一步: 先找到地址git clone 下代码(输入git地址) 中间需要输入你的Git账号和密码: 第二步: git brach 查看分支类型第三步: git branch -a 查看所有分支类型第四步: git checkout + “分支名字”原创 2017-03-03 15:06:50 · 8038 阅读 · 0 评论 -
SVN禁止提交部分文件
前言:对于我们使用SVN的开发者来说,项目经常需要改动,这个时候就要提交代码,但是有些时候会附加一些我们不想提交的东西在里面,比如一些配置信息,这个时候我们就可以将这些信息不提交忽略掉。这里我们只需要两步:第一步:如图所示 第二步:如图所示原创 2017-03-03 15:17:46 · 7800 阅读 · 0 评论 -
遍历一个ul设置各个li不同的样式
这里经常会遇见用CSS操作一个数组,设置第一个元素的样式与其他元素的样式不一样,这里分析一下常见的几种类型:第一种:数组第一个元素和其他元素设置不同的样式var arry = [11,22,33,44,55,66]<div class="setColor"> <ul> <li v-for="item in arry "></li> </ul></div>.setCol原创 2017-05-11 17:24:31 · 11792 阅读 · 0 评论