11 2019 档案
摘要：1.基本理解 骨架屏实现原理很简单，就是通过占位线框元素，渐进式加载数据。 骨架屏是结合了懒加载功能，在页面没有加载完成之前，先呈现页面基本结构。 效果图 注意点： 1, 引入组建后, template 标签内加入<skeleton selector="skeleton" bgcolor="#FFF
阅读全文
摘要：原始页面是网页端demo，我从0开始学习，并调整为移动端H5页面。 另外对原文做了部分调整：修改了index页面循环不停止，部分代码冗余等问题，并增加注释。 本文为游戏的loading页面。初始化canvas，加载音乐，背景图片等游戏资源，显示开始游戏按钮。 效果图： 两点疑问： 1、RAF为什么不
阅读全文
摘要：（1）天气网：http://www.tianqi.com/plugin/（2）中国天气网：https://cj.weather.com.cn/（3）天气API：http://www.tianqiapi.com/
阅读全文
摘要：动画实现： 通过setInterval方法不停的调用context.clearRect()方法清理画布，然后再重新绘制页面。 此外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 init(); function init
阅读全文
摘要：效果图： 知识点： 1、ctx.save(); //保存ctx状态 ctx.restore();//回到之前ctx的状态 一般ctx.save()与ctx.restore()是成对出现的，比如我们在绘图的时候需要使用多种颜色，颜色需要不时的切换。那么使用save()和restore()方法即可比较方
阅读全文
摘要：效果图： 知识点： 1、五角星顶点坐标 (r*cos(deg)+x,-r*sin(deg)+y) 2、画圆 ctx.arc(x,y,r,0,2*Math.PI); //后两个参数开始弧度，结束弧度。0表示开始弧度为3点钟方向，0.5PI为90度。 代码： <!DOCTYPE html> <html>
阅读全文
摘要：效果图： 知识点： 1、context.beginPath(); 2、context.closePath(); 3、context.Rect(x,y,width,heght); context.fllRect(x,y,width,heght); context.strokeRect(x,y,widt
阅读全文
摘要：<canvas> 标签是 HTML5 中的新标签。 <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 <canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。 <canvas id="canvas"> 您的浏览器不支持canvas </canvas> 兼容性
阅读全文
摘要：效果图： 知识点： 1、transform-origin 2、弧度计算公式 (2*Math.PI/360)*角度 3、表盘数字计算方法 x=r(1+Math.cos(弧度))； y=r(1+math.sin(弧度))； 完整代码： <!DOCTYPE html> <html> <head> <met
阅读全文
摘要：var a = 2.255; var b = a.toFixed(2); console.log(b); 以上代码，按预期正常四舍五入得到结果应该是2.26，但实际返回值为2.25 js浮点数精度作为前端必踩坑，谁也逃不过，不过我们可以改写原型上的方法达到目的 Number.prototype.to
阅读全文
摘要：效果： 在线运行 http://oa.hopenchina.com:8086/project/newyear/index.html（建议用手机查看） 知识点： 1、box-sizing:border-box 2、:before 3、first-of-type 4、设置box背景渐变、阴影、边框 ba
阅读全文
摘要：效果图： 图片： 完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星级评分</title> <style> *{ padding:0; margin: 0; } .rating{ width:140px; heigh
阅读全文
摘要：效果： 点击“在线运行”查看效果 完整代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ padding: 0; margin: 0; } body,html{ height:100%; } .rightmenu{
阅读全文
摘要：（网络图片、如侵权必删除） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .fire{ width:166.7px; height:29
阅读全文
摘要：共同点 animation动画与transition过渡都可以实现动画效果，拥有下面共同的属性 animation:mymove 2s linear infinite alternate; transition: width 1s ease-out; 1、动画名称（name）@key-frame 2
阅读全文
摘要：JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量， 一个函数参数是另一个函数，这种函数就称之为高阶函数。 一个最简单的高阶函数： function add(x, y, f) { return f(x) + f(y); } Map 定义和用法： map() 方法
阅读全文
摘要：在HTML表单中，可以上传文件的唯一控件就是 通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件： File API 由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不
阅读全文
摘要：在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。 document.
阅读全文
摘要：window innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽。 还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。 navigator navigator
阅读全文
摘要：meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！
阅读全文
