可视化图表视频制作 数据可视化网站

经常在视频网站看到一些数据可视化视频,例如:https://www.bilibili.com/video/BV1wf4y1a7Ms大家肯定很好奇这些数据可视化的动效是如何制作的?其实很简单,只要会excel会整理数据即可,其它交由在线工具完成,例如如下这个外文网站。flourishStudio:https://flourish.studio/

使用ajax实现文件上传

ajax文件上传主要用到了FormData,其API使用教程如下:https://developer.mozilla.org/zh-CN/docs/Web/API/FormDatahtml<input type="file" name="fileName1" id="fileName1"/><input type="button" onclick="sendToUser()" id="sendToUser" value="提交" />js function sendToUser(){ //在这里进行ajax 文件上传 用户的信息 var $file1 = $("input[name='fileName1']").val();//用户文件内容(文件) // 判断文件是否为空 if ($file1 == "") { alert("请选择上传的目标文件! ") return false; } //判断文件类型,我这里根据业务需求判断的是Excel文件 var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase(); if(fileName1 != "xls" && fileName1 !="xlsx"){ alert("请选择Execl文件!"); return false; } //判断文件大小 var size1 = $("input[name='fileName1']")[0].files[0].size; if (size1>104857600) { alert("上传文件不能大于100M!"); return false; } boo1 = true; var type = "file"; var formData = new FormData();//这里需要实例化一个FormData来进行文件上传 formData.append(type,$("#fileName1")[0].files[0]); //多文件上传在这里继续append //eg : //formData.append(type,$("#fileName1")[0].files[0]); $.ajax({ type : "post", url : "uploadToFile", data : formData, processData : false, contentType : false, success : function(data){ if (data=="error") { alert("文件提交失败!"); }else{ $("input[name='userUrl']").val(data); alert("文件上传成功!"); }} }); }重点最后一段代码即可

input[type=file]上传按钮隐藏“未选择任何文件”

1、关联调用,隐藏上传框<button onclick="chooseFile.click()">上传文件</button><input type="file" id="chooseFile" style="display:none;">参考https://blog.csdn.net/qq_28306215/article/details/853229442、使用label for指定标签css.upload_bp input[type='file']{ display: none;}.loadbp{ padding: 0 30px; height: 40px; border: 1px solid #dd5923; color: #dd5923; font-size: 16px; display: flex; align-items: center; box-sizing: border-box;}.loadbpsuccess{ height: 40px; background: #f5f7f9; border-radius: 2px; font-size: 16px; line-height: 40px; padding: 0 30px; color: #262626; letter-spacing: 0; text-align: center; margin-left: 15px; box-sizing: border-box; position: relative;}.loadbpsuccess span{ font-size: 20px; color: #000; position: absolute; top: -10px; right: 2px;}html<div style="display:flex;align-items: center;"> <label class="upload_bp" for="fileinp"> <input type="file" id="fileinp"> <p class="loadbp">上传附件</p> </label> <p class="loadbpsuccess">附件1.pdf <span>×</span></p> </div>参考:https://blog.csdn.net/Dilemma_me/article/details/100120542

Windows系统美化仿Mac OS系统软件与win11壁纸

第一款:MyDockFinderhttps://www.mydockfinder.com/第二款:bitdockhttp://www.bitdock.cn/个人推荐第一款MyDockFinder以下顺便分享一波Windows11壁纸,刚好可以与mac风格匹配:下载:https://hik.lanzoui.com/iUxPaqplboh

Windows系统美化仿Mac OS系统软件与win11壁纸

小米手环6太空人液晶表盘下载

小米6液晶表盘以及下载链接下载:https://amazfitwatchfaces.com/mi-band-6/view/393上述可能有点问题,太空人有拖影,可下载这款,记得解压后使用:https://hik.lanzoui.com/b010k31ja 密码:8k09若不知道怎么安装bin文件可参考前贴:小米手环增强工具Notify & Fitness for Mi Band下载小米手环更换自定义表盘教程下载:https://amazfitwatchfaces.com/mi-band-6/view/382下载:https://amazfitwatchfaces.com/mi-band-6/view/291下载:https://amazfitwatchfaces.com/mi-band-6/view/4下载:https://amazfitwatchfaces.com/mi-band-6/view/577

小米手环6太空人液晶表盘下载

Windows11预览版下载 win10网盘下载

win11将带来全新的开始菜单、操作中心、任务栏、上下文菜单、弹出窗口等UI、视觉风格上的调整以及大规模的调度器更新。百度网盘下载https://pan.baidu.com/s/1iI7-ikbG7FwLK7L0r_B15g提取码:7bpv阿里云盘下载分享码(需油猴脚本):aliyunpan://Windows 11.zip|FDA28083548E3FAB317DA8C9D5334C8552FD79C4|4723533239|application/oct-stream

Windows11预览版下载 win10网盘下载

js解析Markdown文件并在前端显示

需要js:1、jquery.min2、marked.min.js可点击下载js:https://hik.lanzoui.com/iBqQeq7hlta代码:<!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>README</title> <link type="text/css" rel="stylesheet" href="css/markdown.css"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/marked.min.js"></script></head><body> <div id="content" class="markdown-body"></div></body><script> $(document).ready(function(){ //读取md文件 显示 $.ajax({ url: "README.md",//md文件位置 type: "GET",//请求方式为get dataType: "text", //返回数据格式为text async: false, success: function (data) {//请求成功完成后要执行的方法 $("#content").html(marked(data)); $('a').attr("target","_blank"); } }) })</script></html>

哔哩哔哩新开软件应用专区

以前软件评测类或网站类视频投稿都没分区选,现在新增软件分类,选择路径为:科技->软件应用(说明为软件、网站相关皆可)

哔哩哔哩新开软件应用专区

前端解析Excel文件-xlsx.core.min.js使用

需要的JS:https://code.jquery.com/jquery-3.1.1.min.jshttps://cdn.bootcss.com/xlsx/0.12.7/xlsx.core.min.js读取Excel代码示例:<!DOCTYPE html><html><head> <title></title></head><body><input type="file" id="excel-file"></body><script type="text/javascript" src="xlsx.core.min.js"></script><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script> $('#excel-file').change(function (e) { var files = e.target.files; var fileReader = new FileReader(); fileReader.onload = function (ev) { try { var data = ev.target.result, workbook = XLSX.read(data, { type: 'binary' }), // 以二进制流方式读取得到整份excel表格对象 persons = []; // 存储获取到的数据 } catch (e) { console.log('文件类型不正确'); return; } // 遍历每张表读取 for (var sheet in workbook.Sheets) { if (workbook.Sheets.hasOwnProperty(sheet)) { var fromTo = workbook.Sheets[sheet]['!ref']; console.log(fromTo); var datas = workbook.Sheets[sheet]; console.log(datas); // 处理不规范的数据 没有可以省略 for (var nums in datas) { console.log(nums); var num = nums.replace(/[^0-9]/ig, ""); console.log(num); var row_data = new Array(); row_data[0] = "A" + String(num); row_data[1] = "B" + String(num); row_data[2] = "C" + String(num); row_data[3] = "D" + String(num); row_data[4] = "E" + String(num); row_data[5] = "F" + String(num); row_data[6] = "G" + String(num); row_data[7] = "H" + String(num); row_data[8] = "I" + String(num); row_data[9] = "J" + String(num); row_data[10] = "K" + String(num); row_data[11] = "L" + String(num); row_data[12] = "M" + String(num); var arry_row = new Array(); var count = 0; for (var i of row_data) { if (datas[i]) { arry_row[count] = datas[i].v.replace(/\s*/g,""); count += 1; } } // 找到正确数据的列名 if (arry_row.indexOf("单位") < 0 || arry_row.indexOf("数量") < 0) { for (var i = 0; i < row_data.length; i++) { delete datas[row_data[i]]; } } else { // 修改读取范围 datas["!ref"] = row_data[0] + ":" + datas['!ref'].split(':')[1]; break; } } persons = persons.concat(XLSX.utils.sheet_to_json(datas)); break; // 只读了第一张表 } } console.log(persons); }; // 以二进制方式打开文件 fileReader.readAsBinaryString(files[0]); });</script></html>

jQuery点击按钮弹出窗口播放视频

jQuery点击按钮弹出窗口播放视频。点击图片区域或者按钮即可弹出一个窗口,然后在窗口进行视频播放。可以将class="videolist" vpath="./img/Estorage.png" ipath="http://127.0.0.1:8848/page/abc.mp4"加在按钮或a标签上实现任意元素点击播放。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>点击播放视频</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body { background-color: #0964 } .videolist { position: relative; float: left; width: 540px; height: 300px; margin-left: 230px; } .videolist:hover { cursor: pointer; } .videoed { width: 50px; height: 50px; position: absolute; left: 45%; top: 40%; z-index: 99; border-radius: 100%; } .videos { display: none; border: 1px solid #080808; position: fixed; left: 50%; top: 50%; margin-left: -320px; margin-top: -210px; z-index: 100; width: 640px; height: 360px; } .vclose { position: absolute; right: 1%; top: 1%; border-radius: 100%; cursor: pointer; } .con { height: 430px; width: 1000px; margin: 0 auto; } .masklayer { position: fixed; display: none; width: 100%; height: 1000px; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div class="video"> <div class="con" style="margin-top: 100px"> <div class="videolist" vpath="./img/Estorage.png" ipath="http://127.0.0.1:8848/page/abc.mp4"> <img src="./img/Estorage.png" width="540px" height="300px" /> <!--背景图片--> <img src="./img/circle.png" class="videoed" /> <!--播放按钮 --> </div> <div class="masklayer"> <!--遮罩层--> <div class="videos"></div> <!--存放视频--> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script> $('.videolist').each(function() { //遍历视频列表 $(this).click(function() { //视频被点击后执行 var img = $(this).attr('vpath'); //获取视频预览图 var video = $(this).attr('ipath'); //获取视频路径 $('.videos').html("<video id=\"video\" poster='" + img + "' style='width: 640px' src='" + video + "' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"./img/close.png\" width=\"25\" height=\"25\"/>" ); $('.videos').show(); //视频窗口弹出 $('.masklayer').show(); //遮罩层弹出 $('body').css('overflow', 'hidden'); //禁止滚动 winHeight = document.body.clientHeight; $(".masklayer").height(winHeight + 5000 + "px"); }); }); function close1() { var v = document.getElementById('video'); //获取视频节点 $('.videos').hide(); //点击关闭 $('.masklayer').hide(); //遮罩层隐藏 v.pause(); //停止 $('.videos').html(); $('body').css('overflow', 'auto'); } </script> </body></html>

jQuery点击按钮弹出窗口播放视频