h5
白鹭凡
这个作者很懒,什么都没留下…
展开
-
H5新特性——requestAnimationFrame
和定时器 setTimeout()、setInterval() 是相关的,因为requestAnimationFrame 是H5新增的API,是为了解决定时器时间间隔不稳定的问题,屏刷新频率是 60HZ ==> 也就是每秒60次. ==> 相当于1000毫秒60次 = 16.67ms一次。也就是说每16.67毫秒刷新一次是浏览器显示的最大刷新频率。我们一般设置16或者17 接近这个频率。// 是异步API,必须要等待同步任务后执行,具体说要等待微任务完成才会执行。原创 2023-07-05 10:12:10 · 677 阅读 · 0 评论 -
canvas 面向对象小球
canvas原创 2022-09-02 18:01:16 · 225 阅读 · 0 评论 -
H5移动端下拉 - mobileSelect
H5移动端下拉 - mobileSelect <link rel="stylesheet" type="text/css" href="/css/mobileSelect.css"> <div class="row_val inputs" id="triggerSel"></div> <script type="text/javascript" src="/js/mobileSelect.min.js">原创 2022-04-25 14:26:02 · 1561 阅读 · 0 评论 -
js计算日期时间距离现在多久
js计算日期时间距离现在多久//距离现在时间多久function dateDiff(hisTime, nowTime) { if (!arguments.length) return ''; var arg = arguments, now = arg[1] ? arg[1] : new Date().getTime(), diffValue = now - new Date(arg[0].replace(/-/g, '/')).getTime(),原创 2021-10-18 10:57:46 · 1407 阅读 · 0 评论 -
js 金额转大写
/******************************************* * 金额转换大写 *******************************************/ function showChinaValue(val) { var totalValue = val; var minusFlag = false; if (totalValue < 0) { minusFlag = true; totalValue = M.原创 2021-07-07 12:01:08 · 226 阅读 · 0 评论 -
CSS 流星雨
流星雨效果代码<!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"> &l原创 2021-05-28 09:34:20 · 704 阅读 · 0 评论 -
前端特效(仿博客)
效果蜘蛛网 + 点击向上飘不同颜色的爱心<!DOCTYPE html><html lang="en"><style> .heart { width: 10px; height: 10px; transform: rotate(45deg); margin-top: 4px; margin-left: 4px; } .heart::before {原创 2021-05-26 16:13:30 · 198 阅读 · 0 评论 -
网页简单Live2D动画插入
《Live2D》是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用,缺点是Live 2D人物无法大幅度转身,开发商正设法让该技术可显示360度图像。效果代码 <html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa原创 2021-05-25 17:34:07 · 1577 阅读 · 0 评论 -
wangEditor 富文本编辑器
wangEditor 富文本编辑器效果如下:代码:<div id="fdEmailContext" style="width: 99%;"></div>导入<script type="text/javascript" src="../wangEditor/wangEditor.min.js"></script>javascript const E = window.wangEditor const editor = new E("#原创 2021-05-14 16:28:06 · 894 阅读 · 0 评论 -
css炫酷的按钮
css炫酷的按钮效果一 <style> body { display: flex; justify-content: center; align-items: center; background: #000; min-height: 100vh; } a { position原创 2021-03-28 21:06:38 · 337 阅读 · 0 评论 -
Observer监听输入框值的变化
html 代码<input type="text" id="username" name="username" autoComplete='off'>要监听输入框值的变化可以使用$('#username').bind('input propertychange', function() { console.log($(this).val())});在输入框输入值的时候就会触发事件执行相关代码但是如果我们要监听影藏的输入框,或者监听js、jquery 修改value的值的时原创 2020-12-24 15:13:43 · 621 阅读 · 1 评论 -
three.js —— 3D球体旋转
运行效果代码<!doctype html><html><head> <meta charset="utf-8"> <title>3D球体</title> <style> * { padding: 0; margin: 0; } </style> <script src="htt转载 2020-10-30 10:50:30 · 2210 阅读 · 0 评论 -
css3新特性
现在前端要求越来越高,界面体念要求更高,难免需要用到些动态感的效果,今天有空整理写了些例子css3新特性新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}弹性盒模型 display: flex;多列布局 column-count: 5;媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}个性化字体 @font-face{font-family:BorderWeb;src:url(B.原创 2020-10-24 11:31:35 · 352 阅读 · 0 评论 -
js解析EXCEL考勤打卡记录
公司的打卡记录是直接发我们的。要自己一条条核对,相当困惑于是自己写了个导入EXCEL道勤记录的,友好查看打卡记录。导入后,输入姓名,点击查询<!doctype html><html><head> <meta charset='utf-8'> <!-- <link rel='stylesheet' href='外部的css文件路径' /> --> <title>demo</title原创 2020-09-25 10:16:59 · 351 阅读 · 0 评论 -
js解析excel数据时间格式转换问题
导入excel的日期是 44081.73594907407 这种格式的 function formatDate(serial, format) { var utc_days = Math.floor(serial - 25569); var utc_value = utc_days * 86400; var date_info = new Date(utc_value * 1000); var returnDate = date_info.g原创 2020-09-25 10:09:11 · 957 阅读 · 4 评论 -
jQuery拖拽代码drag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; chars原创 2020-09-16 10:46:20 · 631 阅读 · 0 评论 -
h5直播点击飘心效果
h5直播点击飘心效果代码如下<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="apple-touch-fullscreen" content="YES" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0原创 2020-09-15 17:09:08 · 395 阅读 · 0 评论 -
移动端下拉刷新、上拉加载更多插件
用了一上午时间找各种插件开始找的iscroll 网上找了很多例子。测试了很几遍,可以上拉下拉但是就是不执行对应的方法。估计自己道行太浅了。后来终于找到了dropload 这个插件,简单好用。给大家推荐一下<!doctype html><html lang="zh-cn"><head> <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charse原创 2020-09-15 12:56:04 · 556 阅读 · 0 评论