前端
文章平均质量分 78
晓未苏
一个需要技术提升的且茫的码农
展开
-
前端js导出excel
第一种<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出</title> <script language="JavaScript" type="text/javascript"> var idTmr; //获取当前浏览器类型 function getExplorer()转载 2021-07-26 17:29:31 · 325 阅读 · 0 评论 -
springMVC和HTML SEE完成消息推送
HTML5 服务器发送事件(Server-Sent Events)服务器发送事件(Server-sent Events)是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。这种技术封装在 SSE EventSource API里,打开链接可以阅读。SSE EventSource API 被W3C制定为HTML5的一部分。...原创 2021-05-09 14:40:36 · 443 阅读 · 1 评论 -
js生成二维码并下载、批量生成二维码和压缩下载
生成二维码并下载需要引入js文件<script type="text/javascript" src="/scripts/qrcode.min.js"></script><div id="code"></div>//这个是必须要的div<div class="layui-form-item" style="padding-left: 110px;"> <button class="layui-btn layui-btn" on原创 2021-01-14 13:07:33 · 1513 阅读 · 1 评论 -
标签的添加和删除
<span id="navId" class="layui-breadcrumb"> <a id='a0' style='cursor:pointer;'>全部</a></span>在标签后边添加标签$("#navId a:last").after("<a href='javascript:void(0);' style='cursor:pointer;' id='a"+id+"'> / "+code+"</a>");移除原创 2020-12-03 18:19:27 · 346 阅读 · 0 评论 -
LayUI导入excel功能
第一种导入<div class="layui-form-block"> <input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel" multiple="multiple"></div>$(function () { // 监听上传文件的事件 $('#LAY-excel-import-excel').change(function (e) {原创 2020-11-27 15:04:27 · 3822 阅读 · 0 评论 -
js点击按钮复制内容
我这里是调用接口返回的内容,因为内容在弹出框中显示,点击弹框按钮复制内容,看了很多案例都是在有input框的情况下进行复制,所以我这里就先创建input标签,复制完后再删除。function copyText(text) { var textarea = document.createElement("input");//创建input对象 document.body.appendChild(textarea);//添加元素 textarea.setAttribute("value",text);原创 2020-11-22 10:15:23 · 355 阅读 · 0 评论 -
js生成随机的颜色数组
//生成随机颜色 function getColorRandom(num){ var colorarr = []; //构成颜色的字符元素 var cArray=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"]; for(var i=0;i<num;i++){ var color = "#"; for(var j=0;j<6;j++){原创 2020-11-12 15:41:30 · 2256 阅读 · 0 评论 -
js中对象数组的去重求和以及获取对象在数组中的下标的方法
[ 0: {total: 1, configid: 44, contentid: 46, name: "上班"} 1: {total: 2, configid: 44, contentid: 47, name: "上班"} 2: {total: 2, configid: 20, contentid: 48, name: "测试"} 3: {total: 3, configid: 20, contentid: 49, name: "测试"} 4: {total: 3, configid: 2原创 2020-11-12 10:54:15 · 4472 阅读 · 1 评论 -
LayUI下拉框中取值和获取属性方法
<div class="layui-col-md12" style="padding-bottom: 10px;"> <ul class="layui-row layui-col-space10 layadmin-backlog"> <li class="layui-col-md4 layui-col-xs6"> <div class="layui-inline"> 标签: <div class="layui-inline"&原创 2020-11-11 21:35:12 · 3550 阅读 · 0 评论 -
web app jsp页面使用vue+vant展示和预览图片
效果图:![在这里插入图片描述](https://img-blog.csdnimg.cn/20200805152348546.png关键的三个文件必须引入:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"/><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>原创 2020-08-05 15:28:12 · 815 阅读 · 0 评论 -
web app jsp页面用vue和vant上拉加载和下拉刷新
<body><div class="list-details" id="app"> <div class="header flex-normal"> <div class="left flex-normal"> <img src="${base}/images/app/bussines/left.png" alt="" height="17px"> <a href="javascript:history.原创 2020-07-22 22:33:02 · 393 阅读 · 0 评论 -
js调用百度API显示全景图
<button class="btn light-btn" οnclick="liveAction()">实景</button><div id="showMapAbout" class="weui-popup__container"> <div class="weui-popup__overlay"></div> <div class="weui-popup__modal" > <span id = "clos.原创 2020-07-17 09:27:01 · 1223 阅读 · 1 评论 -
echarts饼图嵌套关联
效果图:这是点击中间饼图扇形所打印的数据,dataIndex是该扇形在data集合中的下标,unitTypeList集合的数据就是该扇形对应的数据在外圈展示。注意:dataIndex是echarts中自带的属性,unitTypeList是我下面添加进去的代码://查询路段的总数的市政部件总数 function findUnitTotalByRoad(){ $.ajax({ url: '${path}/getData', type: 'POST', dataTy原创 2020-07-10 18:53:08 · 3161 阅读 · 0 评论 -
CSS页面定位多个div不重合
效果图:之前是想高度写死,但是屏幕不适应z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 .lightNum-div{ height: 15px; left:10px; top: 10px; position: absolute; width: 10%; z-index: 999; } //定位在左上部分,高度占40% .pie-div{ height: 40%; left:10px; top原创 2020-07-06 15:58:49 · 1836 阅读 · 0 评论 -
Echarts饼图自定义提示框内容
效果图:首先在后台把数据包装成下面格式,lightTypeList集合中的数据格式//获取饼状图的数据function finLightRoadTotal(){ var lightType = $("#lightType").combobox('getValue'); // var areaId = $("#areaId").combobox('getValue'); var roadId = $("#roadId").combobox('getValue'); progressL原创 2020-07-02 21:06:51 · 9260 阅读 · 0 评论 -
js调用百度地图api接口显示单个路径轨迹和多个路径轨迹
地图div盒子://地图<div id="roadMap" style="width:100%; height: 100%;"></div>js代码:var map;$(function() { map = new BMap.Map("roadMap"); map.centerAndZoom("九江市", 15); map.enableScrollWheelZoom(); //设置鼠标滚轮缩放 map.enableKeyboard(); //开启键盘方原创 2020-06-19 17:36:53 · 2596 阅读 · 2 评论 -
easyUI时间日期选择器
日期选择器: 到达日期 <input id="arriveDate" name="arriveDate" value="${arriveDate}" style="width: 200px;" class="easyui-datebox" data-options="required:true" /> $('#arriveDate').datebox({ required:true });时间日期选择器:开始时间<input id="arriveBeginTi原创 2020-06-12 17:23:40 · 1355 阅读 · 0 评论 -
js中百度地图接口查询地址,获取地址经纬度
//用地图的div盒子<div id="fixPointAdd-map" style="display:none;height:100%;"> <div style="position: absolute;z-index: 999;"> <div class="form-group"> <label fo...原创 2020-03-05 11:18:33 · 1618 阅读 · 0 评论 -
easyUI下拉框默认选中和联动、内容回显
<td> <input id="Area" name="Area" type="text" style="width:125px;padding-left: 10px;" /></td>$(function() { //乡镇 $("#Area").combobox({ url : "${path }/geocodi...原创 2020-03-06 11:13:54 · 1030 阅读 · 0 评论 -
vue-router query和params传参(接收参数)route的区别
转载自:https://segmentfault.com/a/11900000127351681.query方式传参和接收参数传参: this.$router.push({ path:'/xxx', query:{ id:id } }) 接收参数:this.$route.query.id注意:传...转载 2020-05-08 09:26:20 · 160 阅读 · 0 评论 -
echarts折线图添加警戒线
var option = { color: ['#00FF00', '#FFD700', '#EE2C2C'], tooltip: { trigger: 'axis' }, legend: { }, grid: { left: '3%', right: '4%', bottom:...原创 2020-01-19 10:59:14 · 6242 阅读 · 0 评论 -
web端页面视频播放
//视频播放所需要的插件<script type="text/javascript" src="${staticPath}/js/sewise-player/sewise.player.min.js"></script><script src="${staticPath}/js/ezuikit/ezuikit.js"></script>...原创 2020-01-19 11:23:13 · 2479 阅读 · 2 评论 -
rtmp视频播放
<script src="${path}/js/lib/video/video.min.js"></script> <script src="${path}/js/lib/video/videojs-flash.min.js"></script> <script type="text/javascript" src="$...原创 2020-02-10 17:04:59 · 253 阅读 · 0 评论 -
把echarts饼状图在div中移动位置
var assetTotalChar = echarts.init(document.getElementById('assetTotalId')); var assetTotalOption = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c...原创 2020-03-03 21:48:05 · 4261 阅读 · 0 评论 -
bootStrap table的方法
{ field : 'checked', checkbox : true, //跟据返回每行的数据 formatter :function(value,row,index){ return row.id; }},//获取选中的数据var ids = $('#tree_table') .bootstrapTable('getAll...原创 2020-03-04 14:39:41 · 1639 阅读 · 0 评论 -
web App jsp页面使用下拉选项框
//获取所有乡镇function getAreaAll(){ $.ajax({ type: 'post', dataType: 'json', url: "路径", success: function (data) { var areaItem = []; $.each(data,function(...原创 2020-03-11 11:31:16 · 1235 阅读 · 0 评论 -
echarts折线和柱状结合的图表、X轴下标字体倾斜和柱顶显示数字
//y轴数量var lineData = data.map(function (item) { return item.number});//结案率var lineRate = data.map(function (item) { if(item.number == 0 || item.finishNum == 0) return 0; return (((item.fini...原创 2020-03-09 13:49:57 · 890 阅读 · 0 评论 -
web App中使用WeUI中popup弹出层嵌套页面或显示地图
//weUI的模板<div id="showPatrolDetail" style="z-index: 501;" class="weui-popup__container"> <div class="weui-popup__overlay"></div> <div class="weui-popup__modal" > ...原创 2020-03-12 10:00:13 · 1639 阅读 · 0 评论 -
使用WeUI图片显示和点击图片放大、点击图片缩小
<!-- [weui] --><link rel="stylesheet" href="${staticPath }/css/weui.min.css"><link rel="stylesheet" href="${staticPath }/css/jquery-weui.min.css"><script type="text/javascript...原创 2020-03-18 15:26:32 · 3013 阅读 · 0 评论 -
weUI中调用手机摄像头拍照上传
//图片上传<div class="weui-cells weui-cells_form" style="margin-top: 0px;"> <form id="importFileForm" method="post" enctype="multipart/form-data"> <input name="imgType" value="93...原创 2020-03-19 09:42:38 · 2712 阅读 · 0 评论 -
js调用百度地图API获取区域边界线
var map = new BMap.Map("div的id");map.centerAndZoom(new BMap.Point(经度, 纬度), 5);// 左上角,添加默认缩放平移控件var top_left_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT});map....原创 2020-03-20 09:39:34 · 1710 阅读 · 5 评论 -
layUI时间选择框和日期间隔
<input type="test" class="date-input pull-left" id="startTime" placeholder="选择回放开始时间"><input type="test" class="date-input pull-left" id="endTime" placeholder="选择回放结束时间">layui.use('lay...原创 2020-03-20 10:49:11 · 673 阅读 · 0 评论 -
Flex 布局
Flex 布局教程:语法篇作者:阮一峰日期:2015年7月10日网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地...转载 2020-03-25 15:21:50 · 229 阅读 · 0 评论 -
vant的Collapse 折叠面板和单元格中使用v-for
import Vue from 'vue';import { Cell, CellGroup} from 'vant'; <van-cell:key="index":title="item.title":value="item.grade"v-for="(it...原创 2020-03-26 09:22:28 · 12291 阅读 · 2 评论 -
vue中用v-charts做图表
//van-tab是vant中的tab切换组件<van-tabtitle="学生异常统计"><template><ve-ring:data="studentData"></ve-ring> //<ve-ring>是v-charts中的组件<...原创 2020-03-26 15:11:39 · 2016 阅读 · 0 评论 -
vant中使用时间选择器和popup弹出层
<template><divclass="page"> <van-cell-group><van-celltitle="选择日期":value="datetime"arrow@cl...原创 2020-03-26 22:32:57 · 4753 阅读 · 7 评论 -
vue之require与import之间的区别
转载自:https://www.cnblogs.com/caiguangbi-53/p/11757508.htmlvue之require与import之间的区别首先我们要明白require与import的基本语法:require的基本语法:在导出的文件中定义module.export,导出的对象的类型不予限定(可以是任何类型,字符串,变量,对象,方法),在引入的文件中调用require...转载 2020-03-27 11:05:45 · 334 阅读 · 0 评论 -
ES6中的Promise作用
Promise概念:1、Promise是一个构造函数,既然是构造函数,就可以new Promise() 得到一个Promise实例;2、Promise有两个函数,分别叫做resolve(成功之后的回调函数)和reject(失败之后的回调函数);3、在Promise构造函数Prototype属性上,有一个.then()方法,只要是Promise构造函数创建的实例,都可以访问到.then方...原创 2020-03-27 15:30:04 · 356 阅读 · 0 评论 -
vue中的computed计算属性和method区别
computed计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。用 computed 属性方法编写的逻辑运算,在调用时直接将返回时 aDouble 视为一个变量值就可使用,无需进行函数调用。computed 具有缓存功能,在系统刚运行的时候调用一次。只有只有当计算结果发生变化才会被调用。用 methods 方法...原创 2020-03-31 22:05:26 · 508 阅读 · 0 评论 -
vue数组的响应式方法
1、push()方法,在数组中最后添加元素;2、pop()方法,删除数组中的最后元素;3、shift()方法,删除数组中的第一个元素;4、unshift()方法,在数组最前面添加元素;5、splice(start,end)方法,删除元素、插入元素、替换元素;删除元素:第二个参数传入你要删除的几个元素(如果没有传就删除后面所有元素);替换元素:第二个参数,表示我们要替换几个元...原创 2020-04-01 15:04:56 · 963 阅读 · 0 评论