![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web
KjPrime
欢迎讨论加个人QQ:1840599574
展开
-
前端高度变化实现过渡动画
* 必须将子元素的最小高度设置一下,不然没有效果,因为0fr选取的就是文字自动撑开的高度 *//* 反正动画一直在,可以写好动画 */// 如果去掉这句话,那么动画就不会生效。/* 将父设置为grid布局 *//* 设置子高度为0fr *//* 设置子高度为1fr *//* 过度动画持续1s *//* 过度动画持续1s *//* 过度动画持续1s *//* 恢复到原本大小 *//* 初始最大高度 *//* 最终最大高度 *//* 恢复初始高度 */// 恢复最开始的状态。/* 初始高度 */原创 2023-09-14 08:45:00 · 1876 阅读 · 0 评论 -
JavaScript-节流防抖
【代码】JavaScript-节流防抖。原创 2022-11-30 18:26:20 · 355 阅读 · 0 评论 -
JavaScript-随机产生字符串
【代码】JavaScript-随机产生字符串。原创 2022-11-29 10:19:36 · 908 阅读 · 0 评论 -
box-shadow的使用
属性解释x-shadow必需的,水平方向偏移的距离,正数则向右,负数向左y-shadow必需的,垂直方向偏移的距离,正数则向下,负数向上blur可选,阴影向内的模糊半径,正数有效,负数无效 (默认0)spread可选,阴影向外的拓展半径,正数放大,负数缩小(默认0)color可选,阴影的颜色值(默认黑色)position可选,外阴影(默认不填)和内阴影(inset)初始化原创 2022-10-18 17:51:35 · 618 阅读 · 0 评论 -
JavaScript-?.、??、??=、,运算符
在非对象的变量中使用?.,就会返回undefined。如果在??左边是null或者undefined的时候,返回右边的结果。注意:在的版本下,使用??=会报错;??=就是当左边是null或者undefined的时候,赋值右边的结果。,运算符从左到右依次计算,然后返回,最右边的结果。原创 2022-10-18 13:18:01 · 758 阅读 · 0 评论 -
Uniapp入门
使用Vue.js语法(标签靠近小程序的规范)进行移动端开发的一个框架,只需要编写一套代码,就可以发布在不同的平台(iOS、Android、H5以及各种的小程序)。原创 2022-09-20 11:19:19 · 369 阅读 · 0 评论 -
JavaScript-Object.defineProperty函数
JavaScript-Object.defineProperty函数语法解释例子语法Object.defineProperty(obj, prop, descriptor)obj: 要操作的对象prop: 要操作的对象的属性名字descriptor: 官方文档给的名字是描述符,我更喜欢叫他为配置对象descriptor配置对象中的所有参数参数 默认值 作用 配置属性 存取数据configurable false 为true时,以后才能修改属性(prop)的配置 ✔ ✔enumer原创 2022-08-02 16:27:24 · 110 阅读 · 0 评论 -
JavaScript-垃圾回收
JavaScript-垃圾回收机制:什么是垃圾回收、为什么要使用垃圾回收、怎么进行垃圾回收原创 2022-06-01 00:00:11 · 248 阅读 · 1 评论 -
JavaScript-标签语句
标签语句来源?是什么?怎么用?注意来源?标签语句是我看JavaScript高级程序设计这本书查漏的,一般写代码很少用到这个,现在到这里总结一下。是什么?标签语句配合break或者continue使用,这个标签的作用起的是一个代码块的作用。怎么说呢,就是标签把这一整块当作一个代码块。怎么用?用例子来理解吧block: for(let i = 0; i < 10; i++){ for(let j = 0; j < 10; j++){ console.原创 2022-04-25 17:34:29 · 2390 阅读 · 0 评论 -
JavaScript-Number对象的总结
Number对象的总结语法Number类属性.MAX_SAFE_INTEGER.MIN_SAFE_INTEGER.NaN.EPSILON.prototype.MAX_VALUE.MIN_VALUE.NEGATIVE_INFINITY.POSITIVE_INFINITYNumber类方法.isNaN().isFinite().isInteger().isSafeInteger().parseFloat().parseInt()Number实例方法.toExponential([value]).toFixed(原创 2022-04-21 15:33:10 · 1090 阅读 · 0 评论 -
JavaScript-数组.reduce方法总结
JavaScript-数组.reduce方法总结.reduce语法参数例子数组累加二维数组转换成一维数组数组去重参考资料.reduce语法.reduce(function(previousValue, currentValue, currentIndex, array){ /* 代码 return xx */}, initialValue)有返回值,不会改变当前数组参数function(previousValue, currentValue, currentIndex, array):返原创 2022-04-14 10:51:43 · 609 阅读 · 0 评论 -
JavaScript-各进制间的互相转换
代码此代码可以实现整数和浮点数之间各进制间的互相转换。/** * @author kjprime * @description 进制之间的相互转换 * @param {number} base 原数据进制 * @param {number | string} num 原数据 * @param {number} tobase 现数据的进制 * @returns {string} 返回tobase进制字符串数字*/const baseChange = (base, num, tobas.原创 2022-03-16 00:59:16 · 855 阅读 · 0 评论 -
前端js下载表格
说明没有用到后端nodejs,就是纯前端js实现表格类型是.csv(直接改后缀变成.xlsx文件)下面的代码包括自己封装的函数和例子,直接复制下面的代码可以用。代码和样例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-03-11 22:51:21 · 1660 阅读 · 0 评论 -
JavaScript-柯里化和链式反应
题目// 请用javscript编写一个累加函数sum,可用如下方法使用。// 请按你的实际需求修改参数function sum(…args) {// 在这⾥写代码}sum(1).valueOf() // 返回 1sum(1,2,3).valueOf() // 返回 6sum(1,2,3)(4).valueOf() // 返回 10sum(1,2,3)(4, 5)(6).valueOf() // 返回 21简介这道题目是我在安信证券公司笔试的时候做的,没有做出来。刚开始我一度觉得是原创 2022-03-03 17:26:20 · 565 阅读 · 0 评论 -
Web网站常见攻击XSS、DDOS、CSRF、SQL注入
这里写目录标题XSS概叙解决办法DDOS概叙解决办法CSRF概叙解决办法SQL注入概叙解决办法参考资料XSS概叙XSS(Cross Site Scripting)中文意思就是跨站脚本攻击。一般网页都会有评论功能或留言功能,或类似可以让用户写东西的地方,然后写的东西直接存入数据库。然后下次把数据库中的评论或者写的东西渲染到前端页面,网页解析器会把用户的信息也当成html代码给解析了,这就出问题了。你想啊,既然当成html代码给解析,那么如果写的是一些代码,那么就可以为所欲为了了。解决办法知原创 2022-03-03 09:36:20 · 3998 阅读 · 0 评论 -
JavaScript事件委托
事件委托是什么我的理解:事件委托就是当有很多个儿子辈的时候,利用JavaScript中的冒泡机制(不懂就看下面的参考资料),在父节点上处理子节点触发的事件,而不是直接在儿子元素中写事件。如果看不懂,可以看下面的参考资料,他们讲的挺好的。事件委托封装成函数/** * @author kjprime * @param {object} obj 对象 * @description 事件委托的封针 */function eventDelegation(obj){ if(obj.dom.原创 2022-03-01 19:25:25 · 279 阅读 · 0 评论 -
JavaScript中字符串的常用方法和属性总结
字符串的常用方法和属性表格字符串方法返回值是否改变原字符串作用.length整数否返回字符串的长度.charAt(num)字符否返回在num位置的字符.concat(str)字符串否连接字符串。.indexOf(str(要查找字符串,必须), num(从什么位置开始往后查找,可选))整数否从头检索字符串,找到了返回第一个索引值,没有找到返回-1。.lastIndexOf(str(要查找字符串,必须), num(从什么位置开始往前查找,原创 2022-03-01 16:13:59 · 182 阅读 · 0 评论 -
js-对Math对象中数学函数的总结
Math对象的总结绝对值(abs)PI(π)平方根(√)最大值(可以取多个数的最大值max)最小值(可以取多个数的最小值min)取幂(pow)取随机值(大于0小于1,包括0不包括1 random)取32位二进制数中前导零的数量(clz32)自然数(e)取符号函数(sign)取浮点函数取整函数向上取整( > x)向下取整( < x)四舍五入取整取整(取数字的整数部分)指数函数自然数e的x次方(exp)自然数e的x次方减1(exp - 1)幂函数平方根√1/2(1/2的平方根)√2(2的平方根)三次原创 2022-02-28 17:36:10 · 843 阅读 · 0 评论 -
JS-DOM事件总结
使用方式常用事件事件事件介绍onclick鼠标点击完成onkeydown、onkeyup按键被按下、按键被松开 (常使用用来检测按键类型并执行对应的函数)onmousedown、onmouseup鼠标被按下、鼠标被松开onmouseout、onmouseover鼠标离开某元素、鼠标移到某元素onload、onunload进入页面、离开页面(常用于检测访问者浏览器类型和版本,方便加载对应的代码)onchange内容改变并且失去焦点以.on原创 2022-02-27 20:18:13 · 57 阅读 · 0 评论 -
js为标签添加事件的方式和区别
js为标签添加事件的3种方式// 方法一 函数表达式dom.onclik = function(){ /* 代码 */}// 方法二 添加事件div.addEventListener('click', function(){ /* 代码 */})// 方法三 在html标签中添加相应的函数function funName(){ /* 代码 */}<tag onclik="funName()">text</tag>3种方式区别我们已代码为切入点&l原创 2022-02-27 19:59:43 · 3045 阅读 · 0 评论 -
js获取DOM元素
方法代码参数返回值避坑iddocument.getElementById()id名称获取一个元素存在多个相同id,取最先出现的classdocument.getElementsByClassName()class名称获取一组元素是类数组,不是数组,某些数组方法不能使用tag(标签名)document.getElementsByTagName()tag名称获取一组元素是类数组,不是数组,某些数组方法不能使用选择器获取一个document.q...原创 2022-02-27 19:20:12 · 161 阅读 · 0 评论 -
CSS选择器总结
CSS选择器总结一、选择所有元素二、id选择器三、class选择器3.1 单个class3.2 多个class3.2.1 紧挨一起3.2.2 空格分离四、tag(标签)选择器4.1 单个tag4.2 多个tag4.2.1 逗号分离4.2.2 空格分离4.2.3 大于号(>)分离4.2.4 加号(+)分离4.2.5 波浪号(~)分离五、tag和class紧挨着六、attr(属性)选择器6.1 单属性6.2 attr 符号 value一、选择所有元素*二、id选择器#id三、class选择器原创 2022-02-27 19:19:07 · 379 阅读 · 0 评论 -
js获取数组最后一个元素
获取方法第一种.length属性获取let arr = [4, 5, 7, 9]console.log(arr[arr.length - 1])第二种.slice(-1)[0]获取let arr = [4, 5, 7, 9]console.log(arr.slice(-1)[0])第三种.pop()获取let arr = [4, 5, 7, 9]console.log(arr.pop()) // 从数组的末尾删除最后一个数据,并返回删除后的数组数据。获取方法的效率对比总结:原创 2022-02-24 13:13:16 · 972 阅读 · 0 评论 -
js测试代码运行时间
运行时间console.time(lable)console.timeEnd(lable)测试的时候,在测试两边分别写以上两个函数,并且lable必须相等,这样才能让程序明白我从哪里开始,到哪里结束。测试用例let arr = [4, 5, 7, 9]console.time("arr.length:")console.log(arr[arr.length - 1])console.timeEnd("arr.length:")console.time("arr.slice:")co原创 2022-02-24 13:01:36 · 1310 阅读 · 0 评论 -
js异步成同步
这里写目录标题题目解答Callback(回调函数)PromiseGeneratorasyncjs异步成同步有4种方法:Callback/Promise/Generator/async,下面我以题目为例子演示这四种方法。题目现有打印红色、绿色和黄色三个函数,要求等待三秒后打印一次红色,然后等待2秒后打印一次绿色,接着等待一秒后再打印一次黄色;按此规律不断循环打印红绿黄。// 亮灯函数如下:function red(){ console.log(‘red’); }function gree原创 2022-02-22 21:44:10 · 15824 阅读 · 4 评论 -
webApp使用字体@face-face
我们在网上大部分搜索字体都是ttf格式的,这种字体在有的浏览器可以使用,但是在一部分的浏览器上就用不了,如ie浏览器。解决方法先找到你需要字体的ttf格式文件在这个网站-TTF 转换器-将ttf格式的文件,转化为woff格式的文件引用woff格式文件即可@font-face { font-family: "huawenkaiti"; src: url('../font/huawenkaiti.woff') format('woff');}...原创 2022-02-20 19:42:32 · 292 阅读 · 0 评论 -
JavaScript-ES6
原创 2022-02-17 16:47:04 · 232 阅读 · 0 评论 -
JavaScript中数组的常用方法
数组常用方法1arr.xxx(function(value, index, array){ /** * xxx: 下列表中的数组方法 * value: 数组当前遍历的值 * index: 数组当前遍历的下标 * array: 当前数组arr */ /* 函数过程 */ // return *****})数组方法是否返回(return)新的数组作用.forEach否适合于不改变数据的时候,而只是想用数据做原创 2022-02-16 12:39:46 · 380 阅读 · 0 评论 -
原生js编写Ajax
代码/*** @author: kjprime* @description ajax* @param {object} obj* @return {void}*/function ajax(obj){ // 创建XMLHTTPRequest对象 let xhr = new XMLHttpRequest() || new ActiveXObject("microsoft.xmlhttp") || window.XMLHttpRequest // 设置默认POST原创 2021-09-26 14:02:02 · 350 阅读 · 1 评论 -
如何给windows系统安装新字体?
先用ps拾取文字的字体名称到百度搜索"XXX’ 下载”, 其中的XXX就是字体名称下载得到的压缩包中有一个.ttf文件一就是字体文件把字体文件拷贝到C:/Windows/Fonts,就是安装此字体原创 2021-08-04 07:21:12 · 543 阅读 · 0 评论 -
图片与同一行中的文字竖直对齐方式
img { vertical-align: middle;/*(默认值:基线对齐) baseline top middle bottom */ }img的父元素 { line-height: 15.19vw; /* 行高 */}在图片中增加上述属性即可原创 2021-07-31 20:28:29 · 95 阅读 · 0 评论 -
HTML如何实现文本显示不下时自动添加省略号
/*文字自动变省略号步骤1 :宽度*/width: 34vw;/*文字自动变省略号步骤2 :不允许文字(在空白处)折行*/white-space: nowrap; /*wrap :换行*//*文字自动变省略号步骤3 :溢出的文本- -律隐藏 */overflow: hidden;/*文字自动变省略号步骤4 :如果发生文本溢出,则使用省略号代替*/text-overflow: ellipsis;...原创 2021-07-31 20:10:21 · 981 阅读 · 0 评论 -
页面元素的定位方式
static:默认,静态定位,不能随便改变位置 //没有定位+fixed:固定定位,定位参照物是屏幕的四个边缘,不随内容的滚动而滚动relative :相对定位,定位参照物是自己静态定位时的位置,通常作用: 1)位置微调 2)为绝对定位的子元素提供参照物 //不会改变位置absolute:绝对定位,定位参照物是距离自己的最近的已定位的 父元素,应用场合:在某个小范围内,玉覆在其它内容上方 跟随父元素static称为“未定位”; 另三个称为“有定位”...原创 2021-07-31 20:08:52 · 291 阅读 · 0 评论 -
CSS3中的元素变形
fransform: 对页面元素实施某种变形效果,且对周围其他元素不会产生影响。共有四种变形。缩放变形:scale() 。平移变形:translateX() translateY()旋转变形:rotateX() rotateY() rotateZ() 第四象限图 30 deg:度扭曲变形: skewX() skewY() 30 deg:度...原创 2021-07-31 20:07:36 · 113 阅读 · 0 评论 -
CSS3中的关键帧动画的实现
frame :帧,就是指连续的动画过程中某一个静止的画面keyframe:关键帧,创建动画时,无需把每一帧都画出来,只需要指定开始和结束时若干个固定的重要的节点帧即可(称为关键帧) ,中间的过渡帧由系统自动补全。创建和使用关键帧动画的过程: /*创建一个关键帧动画*/ @keyfram 动画名称{ 0%{属性名:值;} 15%{属性名:值;} 60%{属性名:值;} 100%{属性名:值;} } /*步骤2 :使用关键帧动画*/ div{ animation: xuan.原创 2021-07-31 20:05:59 · 333 阅读 · 0 评论 -
渐变色文字实现
/* 渐变色文字步骤1:文字颜色变透明 */color: transparent ;/* 渐变色文字步骤2:添加渐变色背景 */background-image: linear-gradient( to top, #43d5eb, #fff); /* 线性渐变 *//* background-image: radial-gradient(); 雷达渐变 */ /* 渐变色文字步骤3: 以文字以依据进行背景图裁切 */-webkit-background-clip: text; /* 只有谷歌浏原创 2021-07-31 20:02:41 · 116 阅读 · 0 评论 -
CSS3提供的新技术:媒体查询
媒体:media,指浏览页面的设备,如screen、speech、print、handheld…媒体查询:media query,根据设备类型的不同或者是宽高等特性的不同,有选择性的执行某些代码。/* min-width width height同下 */@media screen and (max-width:500px){ /* 意思就是最大宽度为500px的时候,执行下面的样式 写样式 */}...原创 2021-07-31 19:56:33 · 83 阅读 · 0 评论 -
HTML中转义字符是什么?
有些字符不能直接呈现,需要使用转义字符 < > × ®分别对应< > × ®原创 2021-07-31 19:44:37 · 173 阅读 · 0 评论 -
Web中常用的图片格式
.ico:专用于PC网站标题栏中的图标.jpg:色彩丰富细腻,压缩比高;不能透明和动画; 常用于人物、风景、物品等图片.png:色彩比较细腻,压缩比较低,不能动画,图标.gif:色彩不够丰富、压缩比很低、支持透明也支持动画。常用于动态。.svg:矢量图片格式,可以无限缩放不失真,颜色表现力很差。.webp:色彩丰富细腻,压缩比高,支持透明也支持动画2015年,谷歌公司提出的新格式。但是Adobe设计 Apple苹果全线产品不支持。...原创 2021-07-31 13:44:41 · 1333 阅读 · 0 评论 -
web工程师需要具备的基础PS功能
PSPS快捷键PS重要概念图层:Layer图层组:Layer Group切图PS工具栏中的常用的工具移动工具矩形选择工具文本工具前/背景色选取器其他技巧和功能智能对象不能编辑ps中制作GIF动画图片调节字体变像素注:PS版本2019PS快捷键Crtl + ;隐藏/显示参考线alt + 滚轮放大/缩小空格 + 鼠标拖到 显示设计图的其他区域tab 隐藏/显示周边窗口F7 隐藏/显示图层窗口Ctrl + r 隐藏/显示标尺PS重要概念图层:Layer英文Layer ,设计师会把不原创 2021-07-31 13:18:30 · 142 阅读 · 0 评论