朱nw-CSDN博客

原创 Canvas 原生实现图片涂抹打马赛克功能

就是通过创建多个canvas，一个用来绘制原图，一个用来绘制全马赛克图，一个用来绘制笔迹或者叫打码的区域，最后一个canvas用来将三个canvas绘制到一个canvas之上。

2021-12-27 21:24:26 1535

原创 React全Hook项目实战在线聊天室历程（完结）：删帖功能

前情提要：React全Hook项目实战在线聊天室历程（一）：基本功能React全Hook项目实战在线聊天室历程（二）：引用与话题功能React全Hook项目实战在线聊天室历程（三）：加个音乐直播？管理员的权限只要是在线提供服务的网站一定会有管理员的存在，那我们也给聊天室加一个管理员，不过简单一些，这个管理员只有删帖的功能。实现思路为了简单，直接使用SubmitContainer来作为登录窗口，后端根据“tag”属性是否等于特定字符串，来判断前端发来的消息是否是登录的账号密码。登录成功后，后端生

2021-12-04 23:26:29 1078

原创 A*算法JS实现

A*寻路算法就是启发式探索的一个典型实践，在寻路的过程中，给每个节点绑定了一个估计值（即启发式），在对节点的遍历过程中是采取估计值优先原则，估计值更优的节点会被优先遍历。所以估计函数的定义十分重要，显著影响算法效率。<html><head></head><body> <canvas id="canvas" width="800" height="800"></canvas> <script>

2021-12-03 10:30:44 1150

原创 Unit8Array 转 Unit16Array

vat u8 = new Unit8Array(data);const buf = Buffer.from(u8)const u16 = new Uint16Array(buf.buffer, buf.byteOffset, buf.byteLength / Uint16Array.BYTES_PER_ELEMENT);

2021-11-17 10:47:55 1657 1

原创 React全Hook项目实战在线聊天室历程（三）：加个音乐直播？

前情提要：React全Hook项目实战在线聊天室历程（一）：基本功能React全Hook项目实战在线聊天室历程（二）：引用与话题功能正文聊天应该有什么？背景音乐，茶与酒，零食，后两个我是没法实现了，但是我们可以给我们的在线聊天室加一个背景音乐的功能。初步设想就是写好一堆音乐的外链在前端，然后让它自动播放，但是这样没有背景音乐的感觉，因为大家听到的歌都不一样呀。那么能不能做一个“直播”呢，让大家听到的是同一首歌，同一个进度？通过查阅资料，我大概找到两个方法，一个是用RTMP协议+ffmpeg推流

2021-11-16 17:07:09 2060

原创 React全Hook项目实战在线聊天室历程（二）

啊啊啊

2021-11-11 15:36:39 602

原创 React全Hook项目实战在线聊天室历程（一）

不知道kotchan的小伙伴们现在过得怎么样了

2021-11-11 15:36:25 2100

原创 jQuery 利用其 AJAX 下载后端返回的 application/octet-stream 二进制数据

业务场景需要用POST传输文件的筛选条件，post的数据格式需要时 application/json，那么就不能使用<Form>元素来模拟POST1，因为form元素的contentType只能设置为application/x-www-form-urlencoded， multipart/form-data， text/plain，这三种2。设置form enctype属性指定为application/json，最后还是会强制的设置为“Content-Type:application/x-w

2021-06-11 12:29:07 4928 2

原创文字与符号自动换行

两个关于文字换行的CSS属性：1.word-wrap.它有两个属性值：normal.默认情况，表示单词不自动换行break-word.表示强制换行2.word-break.它有三个属性值：normal.默认情况break-all.单词到边界时,下个字母自动到下一行keep-all.表示单词不断一般用下面的两行就行。word-wrap: break-word;word-break: keep-all;...

2021-05-13 12:25:43 372

原创 js ResizeObserver 监听 DOM元素宽度高度改变

let a = document.getElementById('a')let obverser = new ResizeObserver(entries => { for (let entry of entries) { console.log(entry.contentRect.width) }})obverser.observe(a)注意ResizeObserver 这是一个实验中的功能

2021-05-12 12:32:27 749

原创利用AudioContext与MediaDevices实现实时的音频可视化

书接上文，上一篇博客我们知道了怎么通过MediaDevices获得用户的麦克风数据。这篇博客我们就实现将用户的音频数据实时的绘制出来。<!DOCTYPE html><head></head><body> <canvas id="canvas" width="500" height="500"></canvas> <script> var constraints = { audio: tr

2021-03-31 19:52:34 422

原创如何使用 javascript 获取语音数据并播放

该网站想要使用你的麦克风在我们开发网页的时候，偶尔会有需要用户录音的情况。那么就需要用到这个API：navigator.mediaDevices.getUserMedia一调用这个方法，一般浏览器就会弹出标题的这句话，这是在问用户索要权限。该方法可以问用户索取麦克风以及摄像头的权限，不过这里我们就只需要麦克风就足够。var constraints = { audio: true, video:false };var promise = navigator.mediaDevices.getUserMe

2021-03-30 22:21:04 2468

原创 Web Animation API 以及实现点击后元素抖动消失

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2021-03-28 13:41:30 394

原创 Vue3教程：英雄指南（四）

前言最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8之前的内容请看：Vue3 教程：英雄指南（一）Vue3 教程：英雄指南（二）Vue3 教程：英雄指南（三）

2020-12-06 17:46:45 221

原创 Vue3教程：英雄指南（三）

前言最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8之前的内容请看：Vue3 教程：英雄指南（一）Vue3 教程：英雄指南（二）组合式API组件不应该直接获

2020-12-03 22:21:51 448

原创 Vue3教程：英雄指南（二）

前言最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8之前的内容请看Vue3教程：英雄指南（一）编写子组件此刻，Heroes.vue同时显示了英雄列表和所选英雄的详

2020-12-02 22:58:09 312

原创 Vue3 教程：英雄指南（一）

前言最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。Vite创建项目Vite. 是一个基于 Vue3 单文件组件的非打包开发服务器。使用Vite与使用Vue-CLI创建的Vue项目相比，Vite是使用原生的ES模块导入，能提

2020-12-02 22:40:16 604

原创 React三子棋教程后续练习

1. 在游戏历史记录列表显示每一步棋的坐标，格式为 (列号, 行号)。game.state.history中不仅需要记录棋盘，还需要记录此步落子的坐标class Game extends React.Component { // 修改Game构造函数中的history constructor(props) { super(props) this.state = { history: [{ squares: Array(9).fill(null),

2020-08-12 20:25:08 291

原创一键切换壁纸为Bing首页图片（Python实现）

一键切换壁纸为Bing首页图片一把梭代码# 一把梭代码import requestsimport reimport sysimport osfrom PIL import Imageimport win32gui, win32con, win32api# 访问今日BINGhtml = requests.get("https://cn.bing.com/").text# Bi...

2019-01-18 13:01:32 934

转载 ubuntu16.04搭建web服务器

本篇文章来源于 Linux公社网站(www.linuxidc.com)  原文链接：https://www.linuxidc.com/Linux/2017-01/139570.htm推荐：https://www.linuxidc.com/Linux/2016-10/136327.htm1.打开ubu...

2018-10-16 10:35:24 1762

转载 WINDOWS上的MySQL LOAD DATA LOCAL INFILE无法正常工作？

尝试：文件 Z:\Path\To\MySQL\Files\my_file.csv::1,“a string”2,“a string containing a , comma”3,“a string containing a " quote”4,"a string containing a “, quote and comma”MySQL命令行：Z:>mysqlEnter pa...

2018-10-14 16:31:16 1913

原创利用Mojo::Webqq在QQ群中当一个复读机

参考文档sjdy521/Mojo-Webqq Mojo-Webqq插件使用文档简单的代码#!/usr/bin/env perl#作者：znw#作用：自动复读机# 当QQ群冷群了，或者某人发了一条消息，超过一定时间没人回复，复读之。use Mojo::Webqq;my ($host,$port,$post_api);my $group;#指定群my %grou...

2018-08-26 16:49:12 3599 1

原创 pygame学习手册（三）：精灵与碰撞检测

第一部分写的对打乒乓是用像素进行碰撞判定的，这样会导致有许多的问题，这次我们改用精灵（Sprite）来修改pygame学习手册（一）中的内容。继承pygame.sprite.Sprite首先要创建一个自己的精灵类，把修改精灵坐标的方法封装一下，方便外界调用。class MySprite(pygame.sprite.Sprite): def __init__(self, i...

2018-08-20 13:05:32 17428 4

原创 pygame学习手册（二）:手动操作

既然是游戏，那么就必须让玩家自己参与进来。这次我们就上一次的全自动对打乒乓进行改造，让玩家能够参与到这个游戏之中。Pygame 事件pygame支持许多长剑的事件，比如QUIT，KEYDOWN，KEYUP，MOUSEMOTION，MOUSEBUTTONUP，MOUSEBUTTONDOWN等等，我不打算在这里介绍所有的pygame时间。我们可以在一个死循环 While True 里调...

2018-08-19 14:13:54 1439

原创 pygame学习手册（一）:从画矩形到打乒乓

pygame简介Pygame是跨平台Python模块，专为电子游戏设计，包含图像、声音。建立在SDL基础上，允许实时电子游戏研发而无需被低级语言（如机器语言和汇编语言）束缚。是否你曾想当个游戏开发者，或者你是一个热爱游戏的玩家有时候也想自己做一两款游戏出来给大家带来欢乐呢？pygame，python+SDL（Simple DirectMedia Layer）,只要稍作了解很快就能做出属于你...

2018-08-05 13:04:59 4798 4

原创 Ken Lambert著《数据结构》第九章编程项目

列表迭代器"""File: linkedlistiterator.pyAuthor: Zhu nw"""from node import TwoWayNodeclass LinkedListIterator(object): """Represents the list iterator for an linked list.""" def __init_

2018-07-29 18:05:40 260

原创 Ken Lambert著《数据结构》第八章编程项目

完善的超市结账模拟程序根据要求修改 marketmodel.py 文件，添加顾客随机选择收银员与比对左中右三队收银员的队列长度，选择最短的队列进行排队"""File: marketmodel.py"""from cashier import Cashierfrom customer import Customerimport randomclass MarketMode...

2018-07-28 15:37:23 191

原创 Ken Lambert著《数据结构》第三章编程项目

Ken Lambert著《数据结构》第三章编程项目第一题"""最好情况下O(1)最坏情况下O(n)平均O(n)"""def search(lyst,target): """ lyst ：升序序列 target ：搜索目标 """ i = 0 while i < len(lyst): if ta

2018-07-26 19:39:50 196

翻译 HeaFirst《软件开发》读书笔记（二）

项目计划任何软件在开发中都需要制定一个可行的开发计划。和客户一起确定优先顺序确定某个使用情节是何等级的优先度是客户的权利。要求客户按照优先度把使用情节理顺，接着把所有需要在软件的第一版开发的功能选择出来。里程碑1.0里程碑（Milestone）1.0 是你向客户发布的第一个主要版本。这1.0版本需要聚焦在最重要且最基本的功能上。如果功能太多，重新进行优先排序 1...

2018-05-05 21:05:58 196

翻译 HeaFirst《软件开发》读书笔记（一）

让客户满意软件开发人员需要做到的就是，将客户模糊不清的想法转化为可以运行的代码，但前提是这个代码能让客户满意。大多数项目除了最终要完成的效果之外，还有两点——钱和时间。Big Bang 开发法最不可取的开发方法，即在项目开始时与客户确定需求之后，立刻着手项目开发，期间不与客户进行沟通，与需求确认，很容易造成最终完成的成品与客户理想的效果相去甚远。所以Big Bang开发法又被称为人...

2018-05-03 15:55:00 389

原创用 python3/tk 介绍MVC

MVC：Model View Controller通常MVC，看起来是这样的Created with Raphaël 2.1.2用户用户视图视图控制器控制器模型模型点一下我被点了改下数据更改我被改了让我看看你哪被改了你看结果接下来让我们看看代码：#!/usr/bin/env python3#coding=utf-8"""用python/tk实现简单的MVC参考资...

2018-05-02 16:38:26 640

原创 python3 tkinter 刷新标签图片

# coding=utf-8import tkinter as tkimport osclass RuKou(tk.Frame): """ 登入的入口将要做成运行时显示接口所返回的图片并展示 """ def __init__(self, master=None): """ 在这里展示一个图片，初步设想是 ...

2018-05-01 20:24:21 5153 4

原创 python3.6 服务端使用CGI脚本处理POST的Json数据

有两种方法第一种：利用CGI脚本首先写一个agent，往里面发送json#!/usr/bin/env python3#coding=utf-8#agent.pyimport requestsimport jsonimport urllib.requesturl='http://127.0.0.1:8000/cgi-bin/post.py' data={'openid':...

2018-05-01 16:20:12 2589

原创使用py3.6 urllib 库进行POST

首先导入# coding=utf-8import urllib.parseimport urllib.requestclass NeiRong(): """ 使用对象进行POST数据的封装 """ def __init__(self, resto, content, **dictArg): """ resto是回复的串...

2018-04-28 16:43:03 247