随笔分类 - HTML
视频全屏自适应
摘要:<video id="vi" controls style="width:100%; height:100%; object-fit:fill"> <source src='Img/3.mp4' type="video/mp4"></source> </video>
阅读全文
div 自动滚轮2
摘要:HTML: <div class="cal_bottom" style="height:78%;margin-top:2%;overflow:auto;" id="gridtablejw"> <ul id="zbry1"></ul> <ul id="zbry2"></ul> </div> JS为di
阅读全文
js 实现全屏预览(F11功能)--转
摘要:参考文档 http://t.zoukankan.com/ghfjj-p-6322415.html HTML代码 <body> <div id="content"> <div>内容1</div> <div>内容2</div> <img id="btn" src="img/icon/btn_fd.png
阅读全文
HTML悬浮div
摘要:需求,html底部为地图,上层是各个div HTML<body> //地图 <div id='map' id="demo1"></div> <div class="middleTop" id="demo2"> </div> </body> css样式 .middleTop { width: 100%
阅读全文
通过【leaflet】 调用高德离线瓦片地图
摘要:官网:https://leafletjs.com/ 首先在官网下载【leaflet.css】和【leaflet.js】 引用js和css <link href="js/leaflet.css" rel="stylesheet" /> <script src="js/leaflet.js" type=
阅读全文
table 实现自动滚动
摘要:JS $(function (){ let text = $("#fTbody:first"); let clear; //定义需要清除动画的部分 $("#fTbody>tr:odd").addClass("odd"); //添加鼠标悬停事件 text.hover(function () { cle
阅读全文
div 滚动条自动滚动
摘要:css 滚动条样式,将滚动条隐藏 .cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/ width:0.5px;/*高宽分别对应横竖滚动条的尺寸*/ height:4px; } .cal_bottom::-webkit-scrollbar-thumb {/*滚动条里
阅读全文
echarts 立体柱状图,渐变柱状图
摘要:说一千道一万,图标样式在【series】中修改,边距在【grid】中修改,鼠标指向显示数据在【tooltip】中修改 JS引用: <script src="js/echarts.min.js" charset="utf-8" type="text/javascript"></script> HTML
阅读全文
js 获取时间
摘要:H5 页面中,js获取时间 var newdate = new Date();//当前时间 结果 Fri Feb 11 2022 14:43:26 GMT+0800 (中国标准时间) var currYear = newdate.getFullYear();//当前年 结果:2022 var cur
阅读全文
H5 调起车牌号码键盘
摘要:效果图: HTML页面 <!--键盘输入框--> <div class="weui-cell weui-cell_active" id="js_cell"> <div class="weui-cell__hd"><label class="weui-label">车牌号码</label></div>
阅读全文
H5 生成带图片的二维码
摘要:标明,此处非原创。另,感谢原创大神。但是我找不出您老人家的原创作品了。只好在这里做一次记录。 HTML代码: <div id="qrcode" class="qrcode"></div> JS代码: <script type="text/javascript" src="../js/jquery.j
阅读全文
微信扫码下载,H5引导页
摘要:效果图: 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-sc
阅读全文
网页禁止用户复制粘贴方法汇总
摘要:右键复制失效方法: 亲测有效,以下方法是针对整个页面的,如果只想对某一个div的内容不让用户复制,你需要这样做把body换位对应div 1、 <script language="Javascript"> document.oncontextmenu=new Function("event.retur
阅读全文