html+css
coder阿龙
这个作者很懒,什么都没留下…
展开
-
纯JavaScript实现表单验证提示框
效果jsvar errorTip = { show:(ele,text)=> { if(ele && text){ var mustEle = document.getElementById(ele+""); if(mustEle){ console.log('已找到该节点',mustEle) mustEle.innerHTML = ''原创 2020-09-08 19:06:25 · 1068 阅读 · 0 评论 -
uniapp和vue无法(长按)复制解决方案
body:{ -webkit-user-select: text; }搞上去原创 2020-08-31 17:26:59 · 2339 阅读 · 0 评论 -
HTML背景图片自适应全屏幕
margin: 0px; background-image: url(/resource/error-bg.png); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%;原创 2020-01-03 10:23:34 · 3298 阅读 · 1 评论 -
使用LayUI时表单为什么会提交两次?问题已解决
文章目录1 form使用不当2 layui class="layui-btn"问题有两种情况,一种是使用form的时候使用不当,一种是使用了layui的问题1 form使用不当上面写了个action,底下又去提交这样的话,会提交两次2 layui class="layui-btn"问题之前是这样写的,发现不管页面怎么输入,点这个按钮的时候,直接提交了表单?????<bu...原创 2019-12-20 09:50:42 · 2666 阅读 · 0 评论 -
html下拉框有搜索功能 使用select2
js<link href="https://cdn.bootcss.com/select2/4.0.6-rc.1/css/select2.css" rel="stylesheet"><script src="https://cdn.bootcss.com/select2/4.0.6-rc.1/js/select2.js"></script>html...原创 2019-03-26 10:11:30 · 9531 阅读 · 4 评论 -
前端zrender框架使其可拖拽
废话不多说,上代码,代码都有注释 loadCamera: function (item, i) { //加载方法 item是实体类参数 //两个miter是为了适应屏幕自适应 let widthMiter = 1920/document.body.clientWidth; let heightMiter = 1080/document.body.clientHeight;...原创 2019-03-13 10:30:17 · 4983 阅读 · 0 评论 -
JavaScript对象集合取差集
js&layui window.getSubtract = function(dataA,dataB) { for (let i = dataA.length - 1; i >= 0; i--) { for (let j = 0; j < dataB.length; j++) { ...原创 2019-03-21 13:05:57 · 1656 阅读 · 0 评论 -
Jquery下拉框默认选择某一项代码(两种方式)
1.静态选项方式下拉框<option value="1">普通成员</option><option value="2">项目经理</option><option value="3">项目总监</option>逻辑 if(data.userRole!=null){ var optList = d...原创 2019-03-20 15:28:37 · 2547 阅读 · 1 评论 -
HTML5输入框输入负数和字母及中文
页面代码 <input name="projectMoney" id="projectMoney" placeholder="请输入项目金额" type="number" min="0" class="layui-input" maxlength="20" lay-verify="required" required/>js //去掉...原创 2019-03-27 16:09:04 · 972 阅读 · 0 评论 -
jQuery正则表达式匹配IPV6
jQuery.validator.addMethod("ip", function(value, element) { var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; var ipv6 = /...原创 2019-04-11 22:13:58 · 654 阅读 · 0 评论 -
HTML|Java 后端返回wav音频base64或byte数组前端如何播放
文章目录场景后端前端场景调用第三方接口,获取到一个音频流(wav : byte[]) ,然后要在前端进行播放后端 public static void main(String[] args) throws Exception { File file = new File("F:\\test.wav"); byte[] bytesArray = new byte[(int) f...原创 2019-07-22 11:16:13 · 4927 阅读 · 2 评论 -
HTML+JS实现省市区三级联动
在线调试预览https://codepen.io/acelibin/pen/wGooev1.html代码<html> <head></head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody>...原创 2019-07-10 14:24:41 · 6583 阅读 · 4 评论 -
基于jQuery两种方式实现下拉框模糊搜索
基于select2<script type="text/javascript" src="../../assets/js/plugins/select2/select2.js"></script><link href="../../assets/css/plugins/select2/select2.css" rel="stylesheet">$("[i...原创 2019-07-03 14:22:53 · 1770 阅读 · 0 评论 -
HTML解决下拉框设置readonly依旧可以修改的问题
请看代码页面发现使用readonly并不会使下拉框只读,依旧可以切换,这里需要使用disabled即可原创 2019-07-08 15:14:55 · 2575 阅读 · 0 评论 -
【小技巧】后端渲染前端字符串 如何判断是否全部加载完成
文章目录1.需求分析2.代码逻辑1.需求分析后端不做重点,前端框架也不做重点,现在已知页面上的某些dom$(function(){ //获取数据})无法通过以上方法去获取数据,例如页面上有异步的ifream,那该怎么监听页面全部加载完成呢?2.代码逻辑$(function() { youMethod();})利用jquery的onload的事件去执行我们的方法方法里面需...原创 2019-05-29 14:22:56 · 599 阅读 · 0 评论 -
【小技巧】外部js 通过url的数据 赋值给Vue表单
环境 vue + jquery文章目录1.获取url数据的方法2.配置3.内容渲染4.封装参数5.执行注意,千万不要用jquery的选择器去替换,否则替换失败,必须要用原生的h5选择器!1.获取url数据的方法//获取url参数function getUrlParam() { //取参数 var url = window.location.search; //定义一个空对象 var...原创 2019-05-29 14:16:01 · 1080 阅读 · 0 评论 -
HTML+CSS实现五角星评分效果
文章目录1.效果:2.HTML3.CSS4.图片1.效果:技术栈 H5+CSS3+JQ+Bootstrap2.HTML<!DOCTYPE html><!--suppress CssUnusedSymbol, JSUnresolvedLibraryURL --><html lang="zh-CN"><head> <meta...原创 2019-06-05 13:40:19 · 19015 阅读 · 11 评论 -
HTML/JQuery/CSS实现滚动公告特效组件(可配置)
文章目录1 需求2 js插件1 需求需求是需要在几个页面上去滚动,可经过后端可配置2 js插件本人自己写了个插件,首先先在页面上去创建一个div和引入一个js<div id="main"></div><script src="js/welcom.js"></script>js插件内容$(function(){ //获取首次url...原创 2019-05-13 14:17:52 · 1580 阅读 · 0 评论 -
CSS使图片变模糊
文章目录效果图html代码css代码效果图html代码<div class="blur container"> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548676269108&di=64...原创 2019-01-28 17:08:34 · 12735 阅读 · 0 评论 -
HTML5使用原生JS实现碎片化轮播图(响应式)
文章目录效果JScss页面效果JSbanner.js;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)};window.cancelAnimationFrame = window.cancelAnimationFrame||cl...原创 2019-01-22 19:15:15 · 2099 阅读 · 3 评论 -
JavaScript实现截图并下载
文章目录1.引入相关js2.触发事件按钮3.展示div4.js5.样式1.引入相关js<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script><script type="text/javascript"...原创 2019-01-28 10:36:27 · 4240 阅读 · 0 评论 -
tracking.js实现前端人脸识别
1.下载https://trackingjs.com/2.运行例子纳总一下发现效果里面的代码为&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&原创 2019-01-28 10:24:32 · 16627 阅读 · 5 评论 -
JavaScript高性能模块化库之Lodash框架
文章目录1.下载地址2.开始使用1.chunk方法2.compact方法3.uniq方法4.reject方法5.shuffle方法6.pick方法7.keys方法8.cloneDeep方法9.forEach方法10.merge方法11.random方法12.find方法13.keyBy方法14.filter方法15.map方法16.max/.min/_.sum方法17.pad/.padStart/...原创 2019-01-27 01:20:48 · 564 阅读 · 0 评论 -
一行js代码让浏览器可编辑
javascript:document.body.contentEditable='true';document.designMode='on'; void 0原创 2019-01-25 11:36:27 · 1602 阅读 · 0 评论 -
JS三目运算符运算三个条件
let str = ""; //未使用前 if(val=='1'){ str = "one"; }else if(val == '2'){ str="two"; }else if(val == '3'){ str="three"; } //使用后 str = val == "1"?原创 2019-01-25 11:26:11 · 8475 阅读 · 0 评论 -
百度地图api调用公交车路线和驾车路线
contollerpackage com.cpic.caf.user.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.servl...原创 2018-12-30 10:05:01 · 868 阅读 · 0 评论 -
使用百度地图api制作地图名片
调用:http://api.map.baidu.com/mapCard/setInformation.html 制作地图名片 注意:街道地址定位一下,如果不准确就拖动改变位置 然后点击开始制作生成的链接直接复制套用即可 ...原创 2018-12-30 10:04:47 · 1424 阅读 · 0 评论 -
html如何让div有下拉框
加上下面一句话即可 padding-left: 24px; padding-right: 24px; min-height: calc(100% - 160px); height: calc(100% - 120px); overflow-y: auto;原创 2018-12-28 23:52:10 · 5283 阅读 · 0 评论 -
如何搭建微信小程序+WeApp环境
下载weapp的examplehttps://github.com/TalkingData/iview-weapp复制里面的dist到小程序里面使用里面的组件里面需要什么组件就根据weapp的官网去引用相关组件原创 2019-01-28 18:27:54 · 1085 阅读 · 0 评论 -
JavaScript开启flash并检测是否安装或开启
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;style type="原创 2019-02-14 17:53:51 · 2190 阅读 · 0 评论 -
密码校验 长度8位数字和字母混合+密码生成
密码生成public class PwdGenderUtils { private static Integer length = 8; //生成的密码长度 //生成随机数字和字母, public static String getStringRandom() { String val = ""; Random random = ne...原创 2019-03-08 17:44:37 · 9434 阅读 · 2 评论 -
checkbox单选框点击显示或隐藏输入框密码操作
需求代码 <div class="layui-input-block"> <input name="password" placeholder="请输入密码" type="password" class="layui-input" maxlength="20" lay-verify原创 2019-03-08 17:42:55 · 1583 阅读 · 0 评论 -
在Canvas上进行标注和自适应分辨率获取标注的绝对精准坐标并完成标注的增删改查
文章目录1.在canvas上进行标注1、首先先获取鼠标的x,y2、鼠标移入canvas后,鼠标变成标注icon3、点击canvas后,进行标注4、取消绘制2.删除标注1、渲染一个删除按钮在每个标注上1.在canvas上进行标注连接后台,需要有添加标注的后端接口1、首先先获取鼠标的x,y // 获取X 和 Y windowToCanvas(canvas,x,y){ ...原创 2019-03-05 10:04:29 · 3128 阅读 · 3 评论 -
前端Chrome控制台报错汇总
文章目录1、 Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'2、Invalid or unexpected token3、2 arguments required, but only 1 present.系列4、 XXX(变量名) is not defined5、Identifier XXX(...原创 2019-03-01 10:00:31 · 3359 阅读 · 0 评论 -
使用Chameleon制作移动端多平台前端开发入门
文章目录1.概念1.介绍2.背景3.设计理念4.跨端目标5.学习全景图6.开发语言2.安装1.安装环境2.创建项目与启动3.目录与文件结构1.概念1.介绍Chameleon/kəˈmiːlɪən/,简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案。2.背景研发同学在端内既追求h5的灵活性,也要追求性能趋近于原生。 面对入口扩张,主端、独立端、...原创 2019-01-29 14:28:13 · 1593 阅读 · 0 评论 -
前端渲染base64格式的图片
在页面上写<img src="data:image/jpeg;base64,[code]">[code] 写图片的base64编码在线转换网址:http://tool.chinaz.com/tools/imgtobase原创 2019-02-15 10:32:59 · 4587 阅读 · 0 评论 -
skrollr-menu页面点击定位插件
文章目录1.skrollr-menu简介2.引入方法3.Demo4.功能1.animate滚动至某个hash2. 滚动至某hash前150px的位置3. 滚动至1000px的位置4. 页面滚动75%5. 设置滚动动画时间详细参数本文参考 : https://www.xuanfengge.com/skrollr-menu-page-click-on-anchor-plug-in.html1....原创 2019-02-15 10:10:17 · 563 阅读 · 0 评论 -
原生JavaScript精选好用的代码片段
文章目录1.实现base64解码2.实现utf8解码3.半角转换为全角函数4.全角转换为半角函数5. 清除html代码中的脚本6.获取当前元素样式7.格式化CSS样式代码8.压缩CSS样式代码9.常用的正则表达式10.格式化数字、金额11.操作DOM class12.分解url1.实现base64解码function base64_decode(data){ var b64 = "AB...原创 2019-02-15 10:05:47 · 323 阅读 · 0 评论 -
鼠标悬浮上去显示小手CSS
鼠标悬浮上去显示小手CSS只需要添加一句css代码即可cursor:pointer;原创 2018-12-28 23:51:13 · 10082 阅读 · 0 评论