菜鸟丶攻城狮
码龄6年
关注
提问 私信
  • 博客:42,037
    问答:26
    42,063
    总访问量
  • 32
    原创
  • 447,154
    排名
  • 8
    粉丝
  • 0
    铁粉

个人简介:喜欢和热爱前端,编程是一门艺术,让我如此着迷

IP属地以运营商信息为准,境内显示到省(区、市),境外显示到国家(地区)
IP 属地:上海市
  • 加入CSDN时间: 2018-12-20
博客简介:

qq_44197554的博客

查看详细资料
个人成就
  • 获得40次点赞
  • 内容获得25次评论
  • 获得158次收藏
  • 代码片获得279次分享
创作历程
  • 2篇
    2022年
  • 2篇
    2021年
  • 22篇
    2020年
  • 6篇
    2019年
成就勋章
TA的专栏
  • 前端 javascript
    17篇
  • 算法编程
    1篇
  • 前端插件
    1篇
  • js小游戏
    1篇
兴趣领域 设置
  • 前端
    javascriptcssvue.jses6前端框架
创作活动更多

HarmonyOS开发者社区有奖征文来啦!

用文字记录下您与HarmonyOS的故事。参与活动,还有机会赢奖,快来加入我们吧!

0人参与 去创作
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

前端明水印到隐水印你了解了吗

水印的目的是为了防止信息泄漏,保护版权,在很多网站里都有用到了水印,水印真的只是看到的这么简单吗?
原创
发布博客 2022.01.23 ·
5194 阅读 ·
6 点赞 ·
0 评论 ·
20 收藏

前端常用布局大全——细致讲解

作为一名前端开发者,每天都在和浏览器打交道,而浏览器中展示的网页需要做的很美观,并且可以吸引住用户浏览网页,提升用户体验是很重要的,所以不可避免的就要用到各种各样的布局。今天就来列举一下各种常用布局以及实现方法。...
原创
发布博客 2022.01.07 ·
3701 阅读 ·
0 点赞 ·
0 评论 ·
22 收藏

(請益)html指定圖片隨機生成區間數字??

答:

使用canvas来绘制这个图片,在图片onload时使用canvas绘制这个图片,同时使用random方法来生成随机数,最后导出就可以了。

        var canvas = document.getElementById('canv')
        var ctx = canvas.getContext('2d')
        var img = new Image()
        img.src = 'xx.png'
        img.onload = function() {
            const random = Math.floor(Math.random() * (20 - 10) + 10);
            // 使用canvas的api来绘制上面的random,并且可以自由设置颜色、字体等等
            ctx.drawImage(img, 0, 0)
            const base64 = ctx.toDataURL(); // 想要的图片
        }

回答问题 2021.12.24

前端安全——XSS攻击与防御原理详解

前端开发人员必备安全防范知识——XSS攻击与防御,希望大家可以认识到xss攻击的危害
原创
发布博客 2021.12.13 ·
5694 阅读 ·
2 点赞 ·
0 评论 ·
21 收藏

canvas绘制文字位置偏移

前言今天在做一个小功能,也就是给图片添加水印时发现,我用canvas绘制水印文字时,水印的位置总是和理想中的不一样,总是会发生偏移。解决方法遇到这个问题其实可以有两种解决方法:根据偏移的距离找出一个合适的反向移动的距离。是不是不太理解这句话的意思,没关系,大家可以看我的另一篇文章拖拽水印插件这里有讲到距离怎么实现,以及源码。也可以通过canvas的原生API:textBaseLine这个来实现,canvas在绘制文字的时候会有一个对齐的标准,同时也会受到字体的影响,我的解决方式是通过设置text
原创
发布博客 2021.08.10 ·
3366 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

编程题-----任务调度所需时间

题目给定一系列的任务,这些任务可能有依赖关系,有依赖关系须相继执行,没有依赖关系则可以同时执行。写一个函数,计算完成给定所有任务需要的时间。//例如下面这些任务执行总时间为 4const tasks = [ { "name": "task1", "time": 1, "dependency": "", }, { "name": "task2", "time": 2, "depend
原创
发布博客 2020.12.16 ·
3099 阅读 ·
1 点赞 ·
2 评论 ·
4 收藏

功能插件---水印插件

前言还就没写博客了,最近实在是太忙了,马上还要做毕业设计和论文,今天抽时间写一写关于添加水印的问题吧添加水印如果只是想简单的给图片添加一个水印,其实很简单,只需要使用canvas,将需要的图片画出来之后再画上文字,最后导出成为base64格式的图片即可const parentImg = new Image()parentImg.src = imgSrcparentImg.onload = () => { let canvas = document.createElement('ca
原创
发布博客 2020.11.28 ·
687 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

webpack学习之编译结果分析

什么是webpack当开发一个具有规模的程序,将会遇到非常多的非业务问题,这些问题包括:执行效率、兼容性、代码的可维护性、可扩展性、团队协作、测试等等、我们将这些问题称之为工程问题。工程问题与业务无关,但它深刻影响哦开发难度,如果没有一个好的工具解决这些问题,将使得开发难度变得极其缓慢,同时也让开发者陷入技术的泥潭。在浏览器端,开发时态和运行时态的侧重点不一样。开发时态:模块划分越细越好支持多种模块化标准支持npm或者其他包管理器下载的模块能够解决其他工程化的问题运行时态:文件越少越
原创
发布博客 2020.09.04 ·
297 阅读 ·
1 点赞 ·
0 评论 ·
1 收藏

简单易懂——手动实现事件模型

前言这几天准备加深一下自己对Vue的理解,所以决定开始看Vue的源码,看到了事件模型,觉得可以很好地锻炼自己的思维能力,所以就手写下来了,现在分享给大家,希望有所帮助。功能事件模型有包括三个功能函数:on、off、emit。on事件函数负责注册各种事件,off事件函数负责注销已经注册的函数,emit事件函数负责触发已经注册的函数。这些功能是很常用的。代码把这个代码写在一个立即执行函数中,这样可以防止变量污染,虽然写这个功能也没啥可以污染的,但是也要养成良好的编码习惯不是_。var event =
原创
发布博客 2020.07.27 ·
280 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

算法---二进制求和

前言距离上一次写博客已经过去大半个月了,主要原因是找到了实习,一直在忙于入职和熟悉公司里的项目,在我的不懈努力下自己动手模仿公司的项目写了一个简易版的出来之后,终于把项目搞懂了,再加上今天在LeetCode上刷了一下算法题,遇到了一个很有意思的题目,现在就把它分享给大家吧,题目很简单,不过给我印象挺深刻的。题目LeetCode上的第题,二进制求和,题目:给你两个二进制字符串,返回它们的和(用二进制表示)。输入为 非空 字符串且只包含数字 1 和 0。示例:输入: a = "11", b = "
原创
发布博客 2020.07.11 ·
598 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

前端存储——Cookie的基本概念

学习cookie笔记,作为复习使用一个不大不小的问题假设服务器有一个接口,通过请求这个接口,可以添加一个管理员但是,不是任何人都有权力做这种操作的那么服务器如何知道请求接口的人是有权力的呢?答案是:只有登录过的管理员才能做这种操作可问题是,客户端和服务器的传输使用的是http协议,http协议是无状态的,什么叫无状态,就是服务器不知道这一次请求的人,跟之前登录请求成功的人是不是同一个人由于http协议的无状态,服务器忘记了之前的所有请求,它无法确定这一次请求的客户端,就是之前登录成功的那个
原创
发布博客 2020.06.10 ·
1110 阅读 ·
3 点赞 ·
0 评论 ·
10 收藏

CORS原理详解

JSONP并不是一个好的跨域解决方案,它至少有着下面两个严重问题:会打乱服务器的消息格式:JSONP要求服务器响应一段JS代码,但在非跨域的情况下,服务器又需要响应一个正常的JSON格式只能完成GET请求:JSONP的原理会要求浏览器端生成一个script元素,而script元素发出的请求只能是get请求所以,CORS是一种更好的跨域解决方案。概述CORS是基于http1.1的一种跨域解决方案,它的全称是Cross-Origin Resource Sharing,跨域资源共享。它的总体思路是
原创
发布博客 2020.05.31 ·
4947 阅读 ·
2 点赞 ·
4 评论 ·
29 收藏

原生JS实现三级联动

效果展示在我们使用某个APP或者网站的时候,需要注册,那么会有地区选择,选择某个省,会自动列出这个省的所有城市,选择城市,会自动列出所有村镇,我们要实现的就是这个效果,在这里村镇就用每个省的学校来替代,完整代码已经上传到github:https://github.com/caohongyu-crypto/Three-level-,所有的省市信息我放在一个js文件里,省会是一个数组,城市和学校是对象(下面是部分信息截图):所有不需要向后台请求数据,效果如下:是不是感觉很简单,没错,就是很简单HTM
原创
发布博客 2020.05.21 ·
1073 阅读 ·
2 点赞 ·
0 评论 ·
7 收藏

520必备---程序员也可以很浪漫

明天就是520了,所以呢写了个小demo,用来表白也不失为一个很好的选择,先看一下效果吧,不能放gif图,超过了最大限制,具体效果可以克隆下来代码然后运行就可以啦代码放到github上了:https://github.com/caohongyu-crypto/Love-520HTML部分html部分很简单,这个demo其实是两个小demo组合成的,所以大家拿到代码完全可以自己DIY<canvas id=q></canvas><div id="clock"><
原创
发布博客 2020.05.19 ·
297 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

vue---剖析vue响应式原理

1. 前言在vue中,只要数据变化,页面就会重新渲染,这个是怎么做到的呢?在创建vue实例时,vue会将data中的成员代理给vue实例,目的就是实现响应式,监控数据变化,然后执行某个事件函数。在vue2.0中使用的是Object.defineProperty来实现数据的劫持,配合发布-订阅者模式来实现。2. Object.defineProperty首先我们来看一下怎么使用Object.defineProperty,其实使用方法很简单。这个函数接收三个参数:1.需要监控的对象2.需要监控的对象
原创
发布博客 2020.05.08 ·
192 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

头脑风暴--原生JS实现汉诺塔游戏

介绍今天写了一个汉诺塔游戏,我想大家应该都玩过,先给大家看看具体是什么样吧。源码已上传github:github链接很遗憾,也就只有3个圆盘我可以顺利通过,哈哈~~~,如果谁可以玩更高的级别,还请不吝赐教啦。话不多说,先看怎么实现吧。游戏规则整个小游戏是可以自己调整难度的,演示里我是使用的3个圆盘,大家可以自行调整。当然,也可以改成闯关模式,这就靠大家发挥啦。汉诺塔游戏规则:只有宽度...
原创
发布博客 2020.05.06 ·
1264 阅读 ·
4 点赞 ·
0 评论 ·
13 收藏

vue-----手写实习vue基本功能

现在用来手写实现vue的简单功能,主要就是可以和Vue一样渲染页面,这个是很简单的一个,没有实现指令操作,想看指令操作的可以看一下我的github:github地址这是html代码 <div id="app"> <p>姓名:{{name}}</p> <p>年龄:{{age}}</p><button...
原创
发布博客 2020.05.03 ·
993 阅读 ·
2 点赞 ·
7 评论 ·
7 收藏

JS进阶---事件循环

事件循环//输出结果是多少呢,先输出'abc'还是先交叉输出//还是先输出i呢setTimeout(function func1() { console.log("abc") }, 0); for (var i = 0; i < 10000; i++) { console.log(i); }概念ps:最后有面试题哦浏览器、JS、执行引擎的关系JS:一...
原创
发布博客 2020.04.16 ·
244 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

js原型和原型链学习笔记详解

首先做到题看看对原型和原型链的理解如何//第一题var F = function () {}Object.prototype.a = function () {}Function.prototype.b = function () {}var f = new F();console.log(f.a, f.b, F.a, F.b);//第二题function A() {}fu...
原创
发布博客 2020.04.10 ·
348 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

react封装翻页插件

插件演示今天用react封装一个翻页插件,先给大家看一下效果:翻页插件上面的文字是从后台获取的。插件说明这个插件有五部分组成:首页、上一页、中间显示数字、下一页、尾页。具体的功能是:如果当前页面是第一页,那么首页和上一页就不能点击,下一页和尾页也是如此。插件原理接下来就是怎么写这个插件。在这里我是用的react封装的,本篇文章就先解释原理,具体代码我会附上链接。那么,该如何下手呢,首...
原创
发布博客 2020.04.04 ·
681 阅读 ·
1 点赞 ·
0 评论 ·
0 收藏
加载更多