js ts css html
不只是浏览器才能运行的语言,webpack,git 等等
争取一行
该用户懒,什么都没有写
展开
-
position: fixed定位带来的白色横线
1.使用fixed可以帮我们快速的相对屏幕固定位置,但是页给我们带来的很多问他,比如滚动,层级,还有手机设备可能会出现一条横线。原创 2023-07-12 15:38:22 · 1267 阅读 · 0 评论 -
关于Object.assgin()
1.有什么用Object.assgin()能快速合并多个对象,够方便吧2.Object.assgin()参数参数:target—>目标对象source—>源对象返回值:target,即目标对象示例:是不是的确很方便,接下来我要说的页数最重要的,要是项目中用到不小心很难找出问题这不后面相同的属性会覆盖前面的欢迎大家观看,希望var target={name:'guxin',age:18}var source={state:'signle',age:22}var r.原创 2022-05-21 22:34:39 · 1123 阅读 · 0 评论 -
关于js你找不知道的运算符
可能你学过可能不一样的语言与算法每个都各具优点,但是关于js 的运算符你知道完吗,下面跟着我们的代码演示一起看看吧!1. + - * / 看到这些大家都会直接跳过吧2. i++ ++i --i i–这个你应该遇到不少吧!一个是先复制后加一个是先加后赋值减也是如此3.**4. || && !与或非相信大家都熟悉不过吧5.扩展运算符,是不是很方便6.??注意观察undefined和null的区别你就会明白7.关于》》《《 %等等大家自己去试吧...原创 2022-04-24 15:50:38 · 1117 阅读 · 0 评论 -
js拖拽图片到浏览器上传
拖拽的事件有很多,这个懂的都懂不懂的就…<!doctype html><html><head><meta charset="utf-8"><title>js拖拽文件</title><meta name="keywords" content=""><meta name="description" content=""></head><body> <div.原创 2021-11-23 12:30:36 · 2707 阅读 · 0 评论 -
div颜色样式根据数组变化可用于模拟地图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-11-22 15:00:25 · 187 阅读 · 0 评论 -
原生canvas绘画自己的可视化图表
我们经常使用类似echarts这样的可视化图表,虽然提供给我们的生态已经够完善了,但是缺不能满足我们的自定义和好奇心,现在我们用简单的canvas来绘画柱状图(代码不想优化了建议用面向对象书写) var heightc, widthc; var w = document.getElementById("barChart") var heightc = w.height - 50; var widthc = w.width - 50; var s = document.原创 2021-11-20 20:40:37 · 4648 阅读 · 0 评论 -
canvas drawImage 渲染视频导致视频模糊
今天小编在做canvas渲染视频的时候发现渲染出来的视频跟打了马赛克一样但是检查了一下发现根本没有放大或者宽度不够的问题如图:如图下方的图片非常的模糊(视频来自网页快手,如有需要联系删除)解决方案导致视频模糊的问题很多,希望本贴能解决你的问题,...原创 2021-10-16 21:40:23 · 2902 阅读 · 0 评论 -
ajax上传excel文件 express处理数据保存导入数据(实用后台直接批量导入不用一个一个数据添加)
<input type="file" name="file" id="file" onchange="uploadFile(this)"/><body> <script>var file = document.querySelector('file');var upload = document.querySelector('upload');var xhr = new XMLHttpRequest();// 点击上传function uploadF原创 2021-10-10 17:42:26 · 7573 阅读 · 0 评论 -
javascript去重
1.Set去重//代码量是不是特别少var s=[15,4,45,6,64,649,94,8] console.log(new Set(s))2.indexofvar arr = [1, 2, 1]; var newArr = []; for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) == -1) { newArr.push(arr[i])} .原创 2021-09-26 21:43:48 · 6108 阅读 · 0 评论 -
js建议正则表达式判断是否有数字
表达式描述[abc]查找方括号之间的任何字符。[0-9]查找任何从 0 至 9 的数字。\d查找数字。\s查找空白字符。\b匹配单词边界。\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。n+匹配任何包含至少一个 n 的字符串。n*匹配任何包含零个或多个 n 的字符串。n?匹配任何包含零个或一个 n 的字符串。test()判断是否符合正则返回布尔值 match(),可在字符串内检索指定的值,或找...原创 2021-09-12 12:35:21 · 2619 阅读 · 0 评论 -
不能在简易的canvas刮刮乐效果
直接上效果图直接上代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title></head><div> <canvas.原创 2021-04-15 14:14:50 · 3591 阅读 · 0 评论 -
canvas根据鼠标画线案例小代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc原创 2021-04-11 01:47:35 · 908 阅读 · 2 评论 -
原生js实现购物车数据响应驱动+响应式原理
由于本文只关注逻辑的实现代码所以简陋了ui界面但恰好也说明了数据变化的问题可能您的经常使用{computed,watch}vue等框架实现了实时更新的数据变化省去了很多操作,但是本文将带你了解响应原生的实现。示例图假如我们添加了几个商品输入框模拟变化的价格数量,那么在现实的js代码中你是否是通过绑定每个事件对每次商品的加减进行总价的重新计算呢,上代码:<!DOCTYPE html><html lang="en"><head> <me.原创 2021-06-25 18:27:30 · 6974 阅读 · 1 评论 -
js面试高级找出素组中三位数相加得16的多种组合
简介思路;进行深度多个循环取出结果<script> var searnmber=16;//想要找出的数 var s = [1, 5, 8, 10, 12,52,6,5,4,3,2] for (var i = 0; i < s.length - 1; i++) { for (var j = 0; j < s.length-1-i; j++) { if(s[j]+s[i]+s[j+1]==searnmber){ .原创 2021-06-03 13:47:30 · 5035 阅读 · 0 评论 -
js面试找出数组中任意两个数相加起来得9的多种组合
<script> var searnmber=9;//想要找出的数 var s = [1, 5, 8, 10, 12] for (var i = 0; i < s.length - 1; i++) {//第一轮循环 for (var j = 0; j < s.length-1-i; j++) {//第二轮 if(s[j]+s[i]==searnmber){ console.log(s[j],原创 2021-06-03 13:40:39 · 1489 阅读 · 0 评论 -
你只认识js的for循环吗!
for循环每个数组var eos=[a,b,c,d,e]for(var i=0;i<=eos.length;i++){console.log(eos[i])//a b c d e}foreach同样遍历三个参数您可以试试看加深自己记忆,大佬就跳过 var eos=['a','b','c','d']eos.forEach((element,index,item) => { console.log(element);}map返回处理以后的数据 var eo.原创 2021-04-20 09:48:41 · 4554 阅读 · 3 评论 -
css3简单的媒体查询
可能您会误以为媒体查询是什么算法查询方式,但其实不是(开头总要说些话,大家就让我找个凑字的理由滑稽)那么正片来了设置媒体以后颜色没有改变!真的是这样吗?那当我们把宽带f12调试看看代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">.原创 2021-04-19 12:55:46 · 743 阅读 · 1 评论 -
css3过渡transition
我们先来看看transition参数和支持的版本属性描述transition简写属性,用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的 CSS 属性的名称。transition-duration定义过渡效果花费的时间。默认是 0。transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。transition-delay规定过渡效果何时开始。默认来看看未加过度的效果吧原创 2021-04-19 12:26:39 · 2650 阅读 · 0 评论 -
css3 transform
translate() 平移//html: <div class="img_translate"> <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2753860582,1141882953&fm=26&gp=0.jpg"/> </div> //css .img_translate img{ .原创 2021-04-18 21:14:45 · 936 阅读 · 0 评论 -
vue项目css样式使用中文
对于起样式洁癖的朋友可以这样试着这样玩,避免了你item1 item2 item3 box1 box2的烦恼,项目中不可能这样做,还是请规范统一,皮一下请勿吐槽偷笑.png原创 2020-07-27 17:30:47 · 413 阅读 · 0 评论 -
详讲flex布局案例演示
flex介绍:FlexiableBox即是弹性盒,用来进行弹性布局,和groid网格布局无太大差异,但是flex更加简便参数少,灵活性大,目前手机端包括pc,小程序等大多数开发者喜欢使用flex布局,flex兼容版本参数//父元素属性flex-direction//是布局方向flex-wrap//是否换行flex-flow//上面参数的总和justify-contentalign-itemsalign-content//项目属性orderflex-growflex-s原创 2020-06-20 11:21:02 · 3161 阅读 · 0 评论 -
一图轻解DOM的clientX layerX offsetX screntX区别
原创 2020-06-10 11:00:58 · 3063 阅读 · 1 评论 -
ES6结构赋值
对象赋值会按对应属性名称赋值,但如果不存在则为undefinedvar people={ name:'小明', sex:'女', get:'特别会干饭'}const {name,sex,get,error}=people;console.log(name,sex,get,error);//index.html:36 小明 女 特别会干饭 undefined数组赋值数组也类如此<script>let arr = [1, 2, 3];.原创 2021-04-19 16:04:55 · 1259 阅读 · 0 评论 -
Object.defineProperty
1.Object.defineProperty大家都知道vue2.0双向数据绑定原理是这个,但是你有使用过吗(标题客套话,其实大家都比我懂 滑稽**)2.语法:Object.defineProperty(obj, prop, descriptor)3.语法:Object.defineProperty(obj, prop, descriptor)引用MDN的话语configurable当且仅当该属性的 configurable 键值为 true 时,该属性的描述符才能够被改变,同时该属.原创 2021-04-18 20:57:21 · 1100 阅读 · 0 评论 -
前端vue实现获取七天时间和星期几功能
前端vue实现获取七天时间和星期几功能功能展示代码<div v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']" @click="select(item)" :key='index'> <span>{{item.name}}</span> <span>{{item.week}}</span></div&原创 2020-05-22 10:58:51 · 6398 阅读 · 4 评论 -
js时间倒计时js
效果未上传github所以各位亲请使用npm安装安装命令:npm install timesdown引入使用<script type="text/javascript" src="./timecountdown.js"></script><script>//参数1当前时间//参数2结束时间//参数3时间结束触发函数 console.log(time("2017-07-10","2017-07-12",name)); function name(.原创 2021-02-07 11:03:02 · 204 阅读 · 2 评论 -
js模块化
什么是模块化?模块化的运用在旧时的项目中我们不可能把所有的js逻辑都写在一个文件里面,这样的方式太过于臃肿,js模块化就是把我们的js拆分为多个不同的js文件进行暴露引入方法分解复杂的js逻辑在很多场景中,我们需要考虑模块化:基于以上场景,所以,当前 JS 模块化主要是这几个目的:代码复用性功能代码松耦合解决命名冲突代码可维护性代码可阅读性1.CommonJS 2. AMD 3. CMD 4.es6CommonJS主要用在Node开发上,每个文件就是一个模块,const fs.原创 2020-11-19 00:19:01 · 1360 阅读 · 0 评论 -
js es6(class理解)
//普通的构造函数 function gou(qq,weixing){ this.qq=qq; this.weixing=weixing; this.login=function(){ console.log("登录方法") } } let app=new gou(2020,'我没想到') app.login() // *js 如何定义一个class类 .原创 2020-10-24 22:20:14 · 194 阅读 · 0 评论 -
vue滚动到一定位置显示置顶元素,点击返回顶部
效果图正常页面废话不多说直接上逻辑代码 <div class="box_rtop" v-if="top" @click="tops()"> //if先将元素隐藏,if浪费性能重新渲染mod,可以使用show可跟你你个人方式使用 //top默认为false不显示 <img src="../../../static/icons/联合 15.png" /></div> <div class="box_ri" v-if="top">重要</.原创 2020-06-06 16:40:24 · 3498 阅读 · 0 评论