- 博客(9)
- 收藏
- 关注
RSS订阅原创 前端canvas实现贪吃蛇小游戏
最近对canvas特别感兴趣，尝试着写了一个贪吃蛇小游戏，话不多说，代码如下，注释很清楚：*{ margin: 0; padding: 0; } div{ text-align: center; } #canvas{ margin-top: 50px; box-shadow: 0 0 10px #333; } <div> <canvas id="canvas" width="800
2021-08-12 22:54:42
289
原创 JS实现放大镜功能
首先说下放大镜原理：其实是一张原图和一张等倍数放大的原图，移动放大部分让大图跟着反向移动同等倍数即可，最后别忘了给大图套一个放大倍数的div让其yi'chu'bu'fen'yin'cang
2021-05-29 22:47:10
403
原创 2021-05-23
JavaScript事件委托何为委托？假设a让b去帮他带饭。这时候a就叫委托方，b是代理方，事件是b执行的但是受益方是a。先看一个例题：<button id="btn">添加节点</button> <ul id="oul"> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li>
2021-05-23 22:06:52
57
原创 2021-05-17
事件流和阻止事件冒泡的方法首先看看事件冒泡是什么：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级。看下面一个例题会更好地理解，<div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div>* { margin: 0px; padding: 0px; } div {
2021-05-17 23:21:28
46
原创 2021-05-17
目标对象target与this的区别首先看菜鸟教程上的原话是：target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。我个人的理解是target是目标对象或者说是触发对象，即事件是由谁引起的看一个例子：<ul id="oul"> <li id="oli">111</li> <li>222</li> <li>333</li> </ul>
2021-05-17 23:07:57
65
原创 2021-05-11
挺好玩的便携小空调夏天将至，鉴于微信里传的很火的一个便携小空调，笔者这里花了一个多小时用前端也模仿写了一个玩玩话不多说首先放图功能比较简单，用的纯JS写的，点击开关显示温度和热冷，同时开关按钮颜色改变，点击热冷按钮切换热冷，点击加减按钮改变温度(16到32度)，Html代码如下：<div id="box"> <span>便携小空调</span> <br /> Tip:为你的夏日带去清凉! <!-- .
2021-05-11 22:53:38
147
原创 2021-05-06
企业工程实践第二课，移动端的rem适配问题在我们创建移动端的web页面时，由于视口的存在和移动端设备宽度不同，我们如何才能让内容在不同宽度的设备上显示同等的像素大小呢？首先我们知道，css提供了三个字体大小的单位，px，em，rem。在移动端开发时我们该如何选用呢？首先看，px，px指的是逻辑像素，显而易见在不同宽度的设备上px的值是不会改变的，故不可以直接使用。然后看，em，1em指的是一个字体的大小，即1em 就等价于一个font-size的大小，如：你设置了font-size:20
2021-05-06 23:08:11
54
原创 2021-05-05
JS——文档碎片操作何为文档碎片？在编写代码时，我们可以把生活中的一些经验放到代码中，借此提高代码运行速度和效率，从而实现优化代码的功能。我们先看一个例题：创建十万个节点插入到页面上。按常规写法，我们可以创建一个节点插入到页面上，然后进行这种操作十万次即可，代码如下。window.onload = function() { console.time("test1") for (i = 0; i < 100000; i++) { let newdiv = do
2021-05-05 22:32:42
85
原创 2021-04-29
企业工程实践第一节课，视口总结首先你要知道，我们在制作pc端网页时会先把这个页面放到一个虚拟容器中，然后再显示到浏览器上面，而这个虚拟容器的宽度就是980px这是目前人为规定的，当pc端的页面超过这个虚拟容器的宽度时就会自动生成滚动条，小于或等于这个宽度时则正好可以放的下去，如果你把pc页面放到手机端，只有当手机端的宽度也是980时才会正常显示，但是手机宽度在出厂时就是被设置好的，例如：iPhone6的宽度是375px(这里的宽度设备独立像素，并非分辨率)，所以你把一个980宽度的虚拟容器放
2021-04-29 17:12:36
66
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人