随笔分类 - 前端
1
html,css,javascript
摘要：效果： 代码： <div class="container"> <div class="item" style="height:50px"></div> <div class="item" style="height:20px"></div> <div class="item" style="hei
阅读全文
摘要：HTML实现一个脱离video标签可拖拽的进度控制条 主要用到html5的 input range 标签。 <!DOCTYPE html> <html> <body> <video id="myVideo" width="320" height="240"> <source src="http://
阅读全文
摘要：方式一：给target起一个固定的名字，这样每次点击链接或者window.open时都在同一个页签加载网页。 <a href="aaa.html" target="mypage">打开</a> window.open('aaa.html', 'mypage'); 方式二：js判断 let windo
阅读全文
摘要：js修改css变量值实现主题切换 /** * 主题颜色主要包含强调色（比主色更深一点）、主色（文本色）、辅色（比主色浅一点）、浅色、超浅色、灰色、白色， * 前4个颜色依次由深到浅 * 强调色、辅色、浅色、超浅色通过主色调整颜色深度计算得出。 */ // 主色 const themePrimaryC
阅读全文
摘要：可在任意两个元素之间插入伸缩控件，不需要改元素代码，添加插件代码即可。 效果： 用法： 引入js <script src="./flexible-bar.js"></script> 在需要伸缩的两个元素之间添加伸缩块： <flexible-bar size="10px" lineColor="#40
阅读全文
摘要：主要是利用css滤镜的投影drop-shadow来实现，方法是将原svg或png图片移动到网页看不见的地方，然后对svg或图片投影到原位置，影子实心不虚散，对影子进行颜色控制。 其实也就是在元素位置显示元素的影子，这个影子颜色是可以随意指定的。 css: :root { --color: #7a65
阅读全文
摘要：MP4格式有两种编解码类型，即h264、h265。chrome浏览器对h265的mp4支持性有限，可能会出现播放时只有声音没有画面的情况。 对于h264，chrome采用软解码，所以可以完全支持，而由于没有买h265的使用专利，不可以软解码，对于h265 chrome交给了显卡去解码（硬解码），但是
阅读全文
摘要：最近公司赛事较多，一些大型赛事部署了多台服务器，为了实时了解的运行状态，保障服务器正常运行，我用前端实现了一个服务器健康检查程序，可设置自动轮询检查或手动检查。 使用fetch发送ajax请求（服务器需要设置允许跨域），判断请求状态和结果来得出正常、超时、连接失败状态。代码使用vue3了浏览器版前端
阅读全文
摘要：最近做一个投票功能，为了防止用户恶意刷票，必须鉴别用户身份，对每个人投票次数限制。但投票是开放的，任何人都可以投，并非仅平台注册用户，因此只能使用用户最广泛的微信来识别用户，通过获取微信openid来判定用户是否已经投过票。 在vue中，需要添加一个静态html（weixinOAuth.html）来
阅读全文
摘要：海报图片生成前后端都能实现，个人喜欢在前端生成，主要是前端可以用html+css灵活的实现非常漂亮海报样式，后端比较麻烦，且前端也更便于调试，对于熟悉前端代码的小伙伴来说再好不过。 以下是在vue项目中的实现，非vue前端同理。 思路及步骤： 1. 用html实现海报效果 制作海报模板图，用js二维
阅读全文
摘要：系统里有个搜索框，搜索框是input type="text"的标签，不知为何，始终会显示登录后的用户名在里面。 虽然浏览器开启了自动填充，但是这个文本框的name也不是登录框的name，也不是密码框，但是依然自动填充了。 这个问题困扰了我很久。可能是浏览器的bug？ 尝试了多种方法都无法解决，后来经
阅读全文
摘要：原理： 实现这个特效需要做3个层，所以要用到CSS绝对定位和层级z-index以及设置top、left、bottom、right的值。大体结构是一个容器，容器里放3个层，底层是4个角的边框效果容器，中间层是要扫描的图片容器，顶层是扫描线容器，这3个层通过z-index来实现层级，它们的高宽度都取父容
阅读全文
摘要：用json数据模拟后端传回来的结果，Extjs tree支持两种类型的结构，一种是带children属性的嵌套式的数据，一种是扁平的，每条记录带pid的数据，带pid的添加配置项可以自动解析成树形结构。 { "text": "根目录", "children": [ { "id": "1", "nam
阅读全文
摘要：原文： 本文只是稍有变化，主要是遍历，取行的数据。 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Excel批量处理</title> 7 <script src="https://c
阅读全文
摘要：一个有趣的程序。 主要技术包含图片拖拽、粘贴、双击上传，然后通过canvas获得图片每一像素的rgb颜色值，然后按颜色值总体大小使用相应的字符代替形成字符画。 原图： 转换后： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
阅读全文
摘要：先分享一个好用的聚合搜索引擎，https://www.tomfind.com/ ，支持谷歌、百度、搜狗、bing、360一键切换，支持网页、音乐、购物、视频搜索，支持抖音、快手、哔哩哔哩、微信、头条、知乎搜索、支持顶部栏、左侧栏两种界面模式。 进入正题： 首先要赞一下kindeditor，一个十分强
阅读全文
摘要：首先说，javascript没有多线程这样一个说法，我说的只是类似那种效果。其次，不建议使用这种方式解决问题，多线程应该交给后台去做。 但是，如果非要这样用，有什么方法呢？ 我在工作中就遇到了这样的问题，由于功能等着急用，整体改进会涉及到前后台，改动会非常大，所以先想了一个临时性的解决方法。问题场景
阅读全文
摘要：抱歉，此文章代码缺失，暂不可用。 什么是对搜索引擎友好的图片延迟加载？ 即在不改变元素及其属性的标准写法基础上实现延迟加载 现状问题 目前几乎所有的图片延迟加载库都是使用的临时属性代替src属性实现的，这样有两个问题： 1. 对SEO不利。2. 代码侵入。 实现目标 对SEO友好，支持原生src属性
阅读全文
摘要：这个标题有些绕口，鄙人愚笨，实在找不到一个比较准确的说法，总之就是： 一个页面内显示多个iframe，一个变宽，另一个就变窄，一个变高，另一个就变矮的这种可自由伸缩的效果。它们之间有一个可多拽的分隔条。 我们公司的电算化考试平台需要这样的效果。最开始用的frameset，框架集，但有些问题，比如分隔
阅读全文
摘要：前段时间我注册了 w3c.run域名，打算做一个W3C相关技术在线试验工具。没错，就是在线编写html、css、js代码然后在线运行，查看效果。 在设计首页时，我打算首页提供三个代码编辑器，介于界面大小限制，不宜同时显示三个编辑器，考虑采用tab选项卡切换的方式展现。 另外考虑到页面加载速度问题（我
阅读全文
1
