案例测试
文章平均质量分 53
测试单独某一个知识点,或者局部的知识点
新生代农民工官方认证码农小拽
实践是检验知识的唯一标准!
展开
-
随滚动条变动的圆环滚动进度条,goTop按钮整合案例
随滚动条变动的圆环滚动进度条,goTop按钮整合案例原创 2022-08-31 21:21:45 · 106 阅读 · 0 评论 -
2021.11.26每天进步一点点: 你还记得第1s打印1、第2s打印2...这个面试题吗?
这里写目录标题试题回顾题解应用场景思路实现代码试题回顾记得曾经看到过这样一道题目:写一个函数,实现第1s打印1, 第2s打印2 ... 第10s打印10之前一直不理解这种题目是为了什么,有点无聊。 直到最近要写一个简单动画, 用到了这种思想,此时此刻,才恍然大悟。–题解这个题写起来非常简单:for(var i = 1; i < 11; i++) { (function(i) { setTimeout(function() { console.log(i); },原创 2021-11-26 20:07:06 · 422 阅读 · 0 评论 -
只执行一次函数使用注意事项
先来看两个例子:例子1:// once()函数里不加参数<!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原创 2021-10-21 21:36:39 · 177 阅读 · 0 评论 -
对用户上传的图片的尺寸进行等比缩放,size大小进行压缩
这里写目录标题操作背景背景1背景2背景3知识结构核心要点功能拓展案例操作参考文档操作背景背景1当前手机相机的像素极高,随便拍个照片都是尺寸3000*4000 px的,大小都在5M以上。背景2而服务器在接收图片时,为减轻服务器压力,一般对大小和尺寸是有限制的,比如限制尺寸为650*650 , 大小不得超过5M .背景3智能手机应用普及率极高,且手机照片在手机app里上传文件的使用越来越普遍。这时就出现了矛盾。 用户想用手机上传大照片,而服务器希望用户用小照片。于是, 作为前端,就要闪亮登原创 2021-10-19 20:50:01 · 483 阅读 · 0 评论 -
左右按钮控制移动的demo
不知道怎么封装起来更方便使用, 先把demo放这里吧,以便参考。和轮播图相同的地方是,都可以用到节流阀,不同的地方是,轮播图可以一直点击其中一个按钮,会一直切换,而这种左右按钮的功能,左移到一定位置就不能再移动,右移到一定位置也不能再移动。<!-- demo.html --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e原创 2021-07-15 14:40:09 · 631 阅读 · 0 评论 -
页面布局(1):淘宝首页
大家好,我是梅巴哥er。入职前端后,我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的。比如活动页面,活动详情页,活动某项交互等。为了快速适应开发需求,在较短时间内完成手头工作,以便挤出更多时间来充实自己,我个人觉得,有必要强化一下单页面快速开发的能力。在公司里的页面开发流程,一般是先从产品手上拿到需求和交互,随后(可能要好久好久)设计(UI)开始做出各种图和页面布局,交给前端。前端根据需求和UI界面来写代码。也就是说,我们需要做的是,研究产品需求 -- 设计交互 -- 切图和整理 -- 页原创 2021-05-15 11:33:28 · 3667 阅读 · 5 评论 -
简单说说svga的应用,留个案例自己用
项目上临时要用到svga,所以就去官网看了看用法。 写了个demo,记录一下,以便不时之需。自己看的,也懒得排版了…svga的github:https://github.com/svga/SVGAPlayer-Web按照步骤操作即可url一定是http这样的全链接形式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-原创 2021-05-13 10:36:20 · 618 阅读 · 0 评论 -
JSdemo:上下滚动的轮播图封装
记录一下,方便后续用。<!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>De原创 2021-05-07 12:11:47 · 182 阅读 · 0 评论 -
JSdemo:点击抽奖,然后展示所有奖品,最后复原抽奖界面(简化版)
做一个简单的demo,需求如下:一个ul里有6个小li点击其中任意一个li,让这个li变红色。紧接着如果点击了其他小li中的任意一个,点击事件失效,即小li不变红色1秒后,让所有的li都变红色再过2秒后,让所有的li都复原成黑色现在用的电脑上没有装插件,不能快速生成gif图。这次就不传了。核心思路:准备一个空数组arr,把所有li的类名放进去。如果这个数组里有变色的类名了,就不让其他li的点击事件生效了。做完整个事情后,要清空arr里面的类名。方便下次操作用递归,可以一直重复流程原创 2021-05-06 18:26:02 · 285 阅读 · 0 评论 -
jsonp跨域获取腾讯天气信息并用原生JS把天气添加到页面
大家好,我是梅巴哥er。 本篇介绍jsonp跨域获取腾讯天气信息并用原生JS把天气添加到页面。时间匆忙,我先把代码放上来,抽空再排版和做注释.封装好的jsonp()跨域函数function jsonp(options) { // 因为src是获取资源 jsonp的请求都是get请求 // 所以 我们需要把参数拼接一下 var params = '' for(var k in options.data) { params += '&' + k +原创 2021-03-17 11:18:00 · 469 阅读 · 0 评论 -
分享几个面试题(一)
大家好,我是梅巴哥er。本篇分享几个简单的面试题。一个思维题<!-- 案例要求: 1,点击show按钮,隐藏提示框,再点击,显示提示框 2,点击提示框的确定按钮,提示“我要退出了”,过3秒后提示框消失 3,点击取消按钮,清除提示框 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-原创 2021-03-13 22:14:41 · 101 阅读 · 0 评论 -
html css js肝撸淘宝官网代码(淘宝web端官网页面+部分js功能实现)
棒棒糖!要原味的~老规矩:直接上货,先看效果图~~上传的图片有大小要求。内容目录:hmtl代码css代码js代码用到的font字体图标说明:js代码都有详细注释。不做赘述了~~html代码:<!DOCTYPE html><html> <head> <title>淘宝网-淘!我喜欢</title> ...原创 2020-05-05 23:08:47 · 23239 阅读 · 26 评论