前端
文章平均质量分 52
awk_bioinfo
向前进。
展开
-
纯原生javascript手写轮播图案列
纯原生javascript手写轮播图案列代码,欢迎交流学习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale原创 2022-02-28 16:18:31 · 139 阅读 · 1 评论 -
浏览器快捷键大全(各大浏览器通用)
浏览器所有能用到的快捷键转载 2022-08-13 16:13:12 · 5044 阅读 · 0 评论 -
pillow Image.alpha_composite Image.blend Image.paste 图像合并方法汇总
pillow 图像合并转载 2022-07-14 11:55:55 · 620 阅读 · 0 评论 -
js表格分页,点击表头排序实现(通用脚本)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-05-14 18:18:54 · 478 阅读 · 0 评论 -
htmlwidgets实现js动态表格创建、表头固定、关键字搜索、高亮搜索、表头排序实现(通用脚本)
html模板<div id="htmlwidget-1111" class="rhandsontable html-widget"></div><script type="application/json" data-for="htmlwidget-1111">{"x":{"data":[{"p_val": 0.0, "avg_log2FC": 1.0440443913178, "pct.1": 0.919, "pct.2": 0.688, "p_val_adj":原创 2022-05-07 11:33:41 · 576 阅读 · 0 评论 -
js中includes()、indexOf()、search()、match()几种方法的区别
includes()includes() 方法用来判断一个数组(或字符串)是否包含一个指定的值,如果是则返回 true,否则返回false。let d = [‘a’,‘b’,‘c’].includes(‘a’)console.log(d); //true12indexOf()indexOf() 方法可返回数组中某个指定的元素位置。该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返转载 2022-05-06 17:09:01 · 1063 阅读 · 0 评论 -
js超大表格瞬间加载实现
javascript <script>var rainData = [{ "id": 1, "name": "5-(2,5-Dimethylphenoxy)-2,2-Dimethylpentanoic Acid" }, { "id": 4, "name": "5-Aminosalicylic Acid" }, { "id": 5, "n...原创 2022-05-04 18:08:58 · 805 阅读 · 0 评论 -
js数组切片
const arrChunk = (arr,size) =>{ if(arr.length === 0){ return []; } const tempArr = []; const chunkLen = Math.ceil(arr.length / size); let last = 0; for(let i = 0;i<chunkLen;i++){ if(size * i >= arr.length){转载 2022-05-04 18:00:13 · 3313 阅读 · 0 评论 -
js固定表格表头(高扩展性)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2022-04-29 21:52:57 · 904 阅读 · 0 评论 -
前端必会的图片懒加载(三种方式)
何为懒加载🌃:在我们访问一个图片展示比较多的网页时,加载速度慢很多时候正是因为图片多导致,大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面,若用户只查看了网页的前面部分便离开,许多已经加载却因为处于网页底部而未呈现在视口区的图片,它们极大加重服务器压力了但是用户看都没看,白白浪费了性能。 为了解决上面的问题需要引入图片懒加载,懒加载其实很好理解,重点就是一个‘懒’字。当用户滚动相应可视区域,若可视区域有图片便加载,而在可视区域外未加载过的图片它们先不原创 2022-04-10 09:49:56 · 4425 阅读 · 4 评论 -
原生javascript堆叠式轮播图
html代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />转载 2022-03-06 20:12:11 · 1781 阅读 · 0 评论 -
flex布局解决align-items失效,无法居中问题
1.flex布局#main{ display: flex; justify-content: center; align-items: center; }#content{ width: 100px; height: 100px; background-color: #1890FF;}上面的布局会出现无法垂直居中的问题这是因为main缺少高度,100%的高度仍然不起作用,最好使用100vh来设置,这样就可以解决这个问题。在#main样式里加上:height: 100vh;#m原创 2022-02-27 20:58:23 · 11552 阅读 · 0 评论 -
手写数字时钟源码
手写数字时钟源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2022-02-25 14:32:51 · 145 阅读 · 0 评论 -
div居中方法(共9种)
div居中方法(共8种)水平居中行级元素:为该行级元素的父元素设置text-align:center配合line-height样式<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span></div>块级元素:为其自身设置margin:auto样式<di转载 2022-02-25 08:13:23 · 76748 阅读 · 1 评论 -
img标签 src 引用图片资源无法显示问题
img标签 src 引用图片资源无法显示的问题img标签 src使用网络资源在浏览器中无法加载显示##### 解决方案:在 header 加入 meta<meta name="referrer" content="never">原创 2021-12-28 21:17:14 · 3970 阅读 · 0 评论 -
nodejs为什么express,get的res.sendFile返回的是html纯文本?
第一个你设置了headerres.header(“Content-Type”, “application/json;charset=utf-8”);浏览器就会按照json解析没设置,默认就是Content-Type:text/html; charset=utf-8自然就按照 html解析原创 2021-12-28 21:03:34 · 1114 阅读 · 0 评论 -
javascript多个元素列表遍历方法总结
先上下面这段代码:const parent = this.el.parentElementconsole.log(parent.children)parent.children.forEach(child => {console.log(child)})会报错:Uncaught TypeError: parent.children.forEach is not a function解决办法一:const parent = this.el.parentElement;Array.pro原创 2021-12-22 14:58:13 · 862 阅读 · 0 评论 -
CSS3制作文字背景图
文字带上渐变色,或者说让文字透出图片。这些效果 CSS 属性也可以完成。方法一、利用CSS3属性mix-blend-mode:lighten;实现使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下:核心代码如下:<div class="container"> <div class="pic"></div> <div clas转载 2021-12-19 13:02:00 · 436 阅读 · 0 评论 -
在div里如何让图片居中(4种方法)
方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。结构如下: <div> <img src="images/tt.gif" width="150" height="100" /> </div>CSS样式如下: div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:ce转载 2021-11-25 17:13:41 · 16963 阅读 · 0 评论 -
CSS3之 transform和animation区别
CSS3之 transform和animation区别CSS3 有3种和动画相关的属性:transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用一、transform 描述的是元素静态样式 transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。 必须是鼠标移上或者点击执行属性变化,鼠标离转载 2021-11-25 15:52:22 · 593 阅读 · 0 评论 -
document.body.scrollTop的值总为零的解决办法
document.body.scrollTop的值总为零的解决办法1、document.body.scrollTop的值总为零的原因有一个功能需要判断下拉的距离,设置头部固定导航栏的颜色。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-转载 2021-11-25 10:47:04 · 893 阅读 · 0 评论 -
centos7配置nginx服务+gunicorn+flask web网页
1.安装nginx服务yum -y install nginx启动Nginxservice nginx start 或者 nginx2.配置web网页文件:vi /etc/nginx/nginx.conflocation /:指一个server里面没有其他的路径的时候,默认为/,即都进入到location里面访问,root:location里面返回的页面的路径,即存放首页的路径index:定义首页是哪个页面,上面配置的默认首页为index.html,如果没有找到index.html,原创 2021-11-23 11:26:32 · 337 阅读 · 0 评论 -
两个div并列一行显示的多种方法
以下提供了5种实现两个div并列一行显示的方法,其中最常用的为浮动,还有定位等方法可以实现。方法一:float浮动,float:left;为左浮动,也可以设置为float:right;右浮动,也可以实现两个div并列一行。#div1{width:50%;height:300px;background:blue;float:left;}#div2{width:50%;height:300px;background:green;float:left;}方法二:display:tab转载 2021-11-18 16:08:24 · 33510 阅读 · 2 评论 -
在HTML中实现两个div并排显示
在HTML中实现两个div并排显示在HTML中让两个div并排显示,通常情况下有三种实现方式,包括:(1)设置为行内样式,display:inline-block(2)设置float浮动(3)设置position定位属性为absolute以下为三种方式的具体实现代码:个人觉得float浮动方式比较好用。1、设置每个div的展现属性为行内样式,示例代码为:<div class="app"><div style="display:inline-block;backgroun转载 2021-11-18 16:06:13 · 9436 阅读 · 0 评论 -
cmatrix黑客帝国屏保
Linux下 cmatrix的安装和使用(黑客屏保)1.安装ncurses支持包yum install ncurses* # 安装相关ncurses支持包2.下载屏保软件源码包wget https://jaist.dl.sourceforge.net/project/cmatrix/cmatrix/1.2a/cmatrix-1.2a.tar.gz3.解压缩源码包tar -zxvf cmatrix-1.2a.tar.gz4.进入源码包目录cd cmatrix-1.2a/5.释放编译文件.转载 2021-11-15 08:56:06 · 596 阅读 · 0 评论 -
html中选取下拉框,显示对应的图片的两种方法
方法一(使用jquery库):<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>魔兽世界八大种族</title><!-- 导入 jQuery 库 --><script type="text/javascript" src="jquery-1.7.2.js"></script>&l转载 2021-11-11 16:57:28 · 6273 阅读 · 0 评论 -
利用html + css + javascript 创建环形进度条
利用html + css + javascript 创建环形进度条<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s原创 2021-11-11 15:34:18 · 882 阅读 · 0 评论 -
HTML中行内元素(内联标签)与块级元素(块级标签)的区别
HTML中行内元素与块级元素的区别1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(l转载 2021-11-10 15:32:51 · 856 阅读 · 0 评论 -
用js实现下拉框跳转和下拉框选择图片
用js实现下拉框跳转和下拉框选择图片Javascript下拉框跳转<select name="select" style="width:100px;" οnchange="javascript:window.open(this.options[this.selectedIndex].value)"><option selected>NCBI</option><option value="#">ENSEMBLE</option><o原创 2021-09-26 14:39:51 · 725 阅读 · 0 评论