![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript+css+html
JavaScript+css+html基础
依赖_赖
这个作者很懒,什么都没留下…
展开
-
vue3.0 通过ref 动态绑定与获取 dom
vue3.0动态设置ref并获取dom原创 2023-07-12 11:39:26 · 1600 阅读 · 0 评论 -
formData 实现文件上传或导入
html部分: 结合input标签<div class="panel-btn btn-box"> <el-button class="audit-btn" size="mini" :loading="importLoading">导 入 </el-button> <input class="import-input-file" :disabled="!manipulatio原创 2021-12-01 11:00:20 · 743 阅读 · 0 评论 -
h5移动端适配
px:是分辨率的尺寸单位em:相对于父元素rem:相对于HTML根元素vw:视口宽度的 1/100,vh:视口高度的 1/100rem结合js实现适配新建rem.js方法,在main.js引用该方法// 设置 rem 函数const baseSize = 32;// 设置 rem 函数function setRem() { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。 const scale = document.documentElement.clientW原创 2021-06-22 17:58:10 · 761 阅读 · 0 评论 -
通过svg实现动画效果
1.拿到psd格式文件,选中相应图层,右键复制svg或者导出为svg2. 使用svg标签渲染,复制的svg中width和height单位是cm<div class="svg-streamline"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="203" height="110.5"> &l原创 2021-04-30 09:46:16 · 1653 阅读 · 0 评论 -
树结构之递归查询
1.通过节点name,查找对应节点id//instrumentList: 数据集合(树状)//name: 节点名称this.seekSameName(this.instrumentList, name)// 遍历寻找相同的id seekSameName (list, name) { list.map((t)=>{ if (t.name === name) { this.dataQueryForm.instrumentId = t.id //找到id,赋值原创 2021-02-02 13:58:01 · 455 阅读 · 0 评论 -
axios的二次封装
在common文件夹下新建一个axioRequest.js文件import axios from "axios";export default { get:function (url,headers,success,params={}) { axios({ url: url, method: "get", ...原创 2019-06-25 17:28:12 · 272 阅读 · 0 评论 -
短信验证码登录
1、新建一个ems.ejs文件<div> <label for="phone">手机号:</label> <input name="phone" id="phone" type="text"> <button onclick="sendCode()"&原创 2019-01-11 10:24:12 · 2910 阅读 · 0 评论 -
promise-mysql的使用
1、下载:npm install promise-mysql2、创建config文件夹下的mysqlpool.js文件,代码如下:const mysql=require("promise-mysql");//连接数据库const pool=mysql.createPool({ host:"localhost",//ip地址 user:"root",//用户名原创 2019-01-11 09:11:42 · 3551 阅读 · 0 评论 -
使用session和cookie存储用户登录信息
1.配置静态资源下载session模块:npm install express-session -s导入session,保存在服务器,传的内容是session在服务器中的内存地址const session =require(&amp;quot;express-session&amp;quot;)下载cookie模块:npm install cookie-parser -s导入cookie,保存在客户端硬盘上,传的内容是用...原创 2019-01-07 18:29:16 · 2680 阅读 · 0 评论 -
jQuery的ajax方法——请求数据
1、使用nodejs配置本地服务器 window.function () { getData() }2、在浏览器运行程序,并发送数据请求3、在路由中拦截请求,调用控制器中相应方法getStuData,返回数据router.get(&quot;/ajaxGetData.do&quot;,stuCtrl.getStuData)4、使用ajax获得数据...原创 2019-01-04 13:25:09 · 423 阅读 · 0 评论 -
原生JavaScript的ajax方法——请求数据
1、使用nodejs配置本地服务器 window.function () { getData() }2、在浏览器运行程序,并发送数据请求3、在路由中拦截请求,调用控制器中相应方法getStuData,返回数据router.get(&amp;amp;amp;quot;/student.do&amp;amp;amp;quot;,stuCtrl.getStuData)4、使用ajax获得数据原创 2019-01-04 13:11:33 · 299 阅读 · 0 评论 -
Promise、Generator、Async的对比
实现功能如下,通过axios发送请求,获得giuthub的用户,再通过第一个用户名获的该用户的reposPromise的写法 <script src="http://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> <script> let use...原创 2019-07-04 18:13:40 · 230 阅读 · 0 评论 -
primise的all和race的用法
1、Promise是异步编程的一种解决方案,其实是一个构造函数,有all、race、reject、resolve这几个方法,原型上有then、catch等方法。2、promise.all主要用于一次性执行多个异步方法,并且按传入顺序执行。该方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后并且执行结果都是成功的时候才执行then方法。//成功的时候返回的是一个结果数组,而失败的时...原创 2019-07-04 11:45:58 · 740 阅读 · 0 评论 -
es6标签模版字符串
css代码: <style> .hightlight{ color: red; } </style>js代码: <script> //标签模版字符串 function highlight(strings,...values) { // strings...原创 2019-06-28 18:59:24 · 708 阅读 · 0 评论 -
文字隐藏与显示
1、设置文字不被鼠标选中 -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;2、文字超出部分显示省略号// 单行文本overflow: hidden;text-overflow:ellipsis;white-s...原创 2019-09-05 18:12:41 · 300 阅读 · 0 评论 -
less的基本使用
less编译器1、less.js当页面运行的时候,把less编译成css2、考拉编译写的时候就把less编译成css,html直接引用css下载地址:http://www.openkoala.org/download.html3、node编译less变量1、变量的定义@变量名:值2、变量的使用作为属性值使用:@变量名作为选择器或者属性名使用:@{变量名}变量的作用域先...原创 2019-07-08 18:51:26 · 557 阅读 · 0 评论 -
Flex弹性布局
块级元素:.box{ display: flex;}行内元素:.box{ display: inline-flex;}设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。flex-direction属性:.box { flex-direction: row | row-reverse | column | column-...原创 2019-04-04 13:06:28 · 207 阅读 · 0 评论 -
居中对齐的方法汇总
水平居中对齐:1、文本内容居中 text-align: center;2、块级元素,且有固定宽度margin: 0 auto;3、块级元素width: 百分数;margin-left: (1-百分数)/2;垂直居中对齐1、单行文本,设置行高等于所在区域的高度height: 200px;line-height: 200px;2、多行文本居中高度不固定时,高度只能通...原创 2018-11-14 17:47:01 · 1687 阅读 · 0 评论 -
设置隐藏的方法
1.元素不占位,直接消失display: none;2.隐藏元素,占位visibility: hidden;3.不占位,超出部分隐藏overflow: hidden;4.设置透明度,全部透明,opacity: 0到1;5.调整rgba,背景透明background-color: rgba(68,166,255,0到1);...原创 2018-11-09 10:29:51 · 197 阅读 · 0 评论 -
margin小问题
1.为第一个div子元素设置margin-top,子元素会将其div父元素一起拽下来解决方案:1.在子元素前面增加内容2.给父元素加边框3.给父元素设置overflow:hidden(推荐使用)2.给两个div盒子之间设置margin外边距时,上下取最大值,左右取和值...原创 2018-11-09 10:09:18 · 113 阅读 · 0 评论 -
css3之背景渐变
在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。语法格式:background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色);background:-webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色位置…);&lt;!doctype html&gt...原创 2018-10-13 10:51:27 · 312 阅读 · 0 评论 -
flex伸缩布局
1.flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配min-width 最小值 max-width: 最大值min-width: 280px 最小宽度 不能小于 280max-width: 1280px 最大宽度 不能大于 12802.flex-direction调整主轴方向(默认为水平方向)flex-direction: column 垂直排列...原创 2018-10-13 10:07:36 · 554 阅读 · 0 评论 -
CSS3之3D变形,实现大海波涛
animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;@keyframes 动画名称 {from{ 开始位置 } 0%to{ 结束 } 100%}实现代码:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8&am原创 2018-10-12 19:52:41 · 351 阅读 · 0 评论 -
CSS3之2D变形
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果1、 移动 translate(x, y)使定位的盒子水平垂直居中div{ width: 220px; height: 200px; background-color: pink...原创 2018-10-08 22:01:34 · 270 阅读 · 0 评论 -
经过图片时添加透明边框
效果图html部分代码: &lt;div&gt; &lt;img src="img/pic.jpg"/&gt; &lt;/div&gt;css部分代码: div{ height: 150px; width: 150px; position: relat原创 2018-09-30 10:51:36 · 336 阅读 · 0 评论 -
css3 新增
1、属性选择器选取标签带有某些特殊属性的选择器 我们成为属性选择器 div[class=demo] { /* 选出div中类名为demo的标签 */ color: pink; }div[class^=font] { /* 选出div中类名以font开头的标签 */ color: pink; }div[class$=footer] { /* 选出div中类名以foo...原创 2018-09-30 10:11:43 · 152 阅读 · 0 评论 -
通过css切割隐藏外边框,实现十字架或者网格效果
实现代码: &lt;style type="text/css"&gt; div{ margin: 40px; width: 320px; height: 300px; overflow: hidden;/*超出部分隐藏,切割掉下边框和右边框*/ } div ul{ /*一个li元素宽度为81px,width大小只要大于(81 x...原创 2018-09-29 15:16:34 · 1438 阅读 · 0 评论 -
网页标题添加ico图标
每个网站都有自己的标题和logo,当访问某个网站时,浏览器窗口会显示该网站的logo+标题,以便清晰的知道我们正在访问的是哪一个网站,如:实现步骤:1、找到logo,访问https://www.网站名.com/favicon.ico2、右键保存该图标至根目录3、引用该图标实现代码: &amp;lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&a原创 2018-09-27 09:16:00 · 1392 阅读 · 0 评论 -
字体图标
图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 在移动端响应式中,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了, 这就是字体图标字体图标优点:1、可以做出跟图片一样可以做的事情,改变透明度、旋转度等… 2、但是本质其...原创 2018-09-26 15:34:49 · 641 阅读 · 0 评论 -
滑动门技术
为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。html布局如下: &lt;a href="#"&gt; &lt;span&gt;我的首页&lt;/span&gt; &lt;/a&原创 2018-09-22 11:00:13 · 237 阅读 · 0 评论 -
去除图片之间的空白缝隙
在设置css边框样式中,图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。解决的方法就是:给img 添加vertical-align:middle | top等等。 让图片不要和基线对齐。(网易做法)img{ /*vertical-align: bottom;*/ vertical-align: top; ...原创 2018-09-21 11:35:34 · 3499 阅读 · 1 评论 -
显示与隐藏——仿土豆视频
通过现实与隐藏,实现仿土豆视频的做法,即当鼠标经过图片时显示播放按钮,代码如下:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/ti原创 2018-09-21 10:59:47 · 304 阅读 · 0 评论 -
关于清除浮动的五种方法
清除浮动的本质:为了解决父级元素印子级浮动引起内部高度为0的问题。方式1:额外标签法(w3c推荐的方法): 在最后一个浮动标签后,新添加一个标签优点:通俗易懂,书写方便。缺点:添加许多无意义的标签,结构化较差。.clear{ clear:both;}方式2:父级添加overflow属性方法.father{ overflow:hidden;overfl...原创 2018-09-19 09:25:19 · 902 阅读 · 0 评论 -
css中文本(text)和字体(font)属性
text-decoration属性在html语言中表示文本的修饰 none:取消装饰 underline :下划线,与标签、效果相同 overline :上划线 line-through :贯穿线(删除线),与标签、效果相同 blink :闪烁(因兼容性问题很少使用) ...原创 2018-09-12 10:31:18 · 5972 阅读 · 1 评论 -
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过 编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般存在服务器的内存中),通过m3u8解析出来路径,然后去请求。这样每次请求很小一段视频,可以做到近似于实时播放的效果。 目前WEB上主流的直播方案主要是HLS和RTMP,移动端主...转载 2020-04-27 14:47:34 · 17870 阅读 · 0 评论 -
canvas——往下跳小游戏
链接:https://pan.baidu.com/s/1p58D9oBs8qRKHPco7acW2w提取码:vaja原创 2018-12-28 21:32:28 · 466 阅读 · 0 评论 -
canvas——俄罗斯方块小游戏
链接:https://pan.baidu.com/s/1EMYeQEgYuwhUaQ1bWlw9Aw提取码:ez6e原创 2018-12-28 21:30:24 · 178 阅读 · 0 评论 -
内嵌元素和块级元素
块级元素:一般用来搭建网站架构、布局、承载内容内嵌元素:用以“强调、区分样式、上标、下标、锚点”等等inline-block:既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性,也可以设置 vertical-align块级元素与内嵌元素的区别:1、块级元素默认独占一行。垂直方向排列内联元素默认会再一条直线上,是在同一行的。水平方向排列2、块级元素...原创 2018-11-02 16:02:28 · 396 阅读 · 0 评论 -
html5新增表单属性
常用新属性1、placeholder用法:&amp;lt;input type=&quot;text&quot; placeholder=&quot;请输入用户名&quot;&amp;gt;含义:占位符 ,当用户输入的时候里面的文字消失 。删除所有文字,自动返回2、autofocus用法:&amp;lt;input type=&quot;text&原创 2018-09-29 16:54:30 · 275 阅读 · 0 评论 -
pdf.js结合iframe实现文件(word,pdf)预览,且可通过手势缩放
1.下载pdf.js ,存放在public文件中地址https://download.csdn.net/download/weixin_39150852/131052742.获取需预览的文件信息,存在sessionStorage组件中使用iframe预览文件<template> <div class="main-page-container"> <div>文件名: {{pdfName}}</div> <div class=原创 2020-11-11 17:46:02 · 7389 阅读 · 7 评论