黑月DM-CSDN博客

原创 vue文字首尾相连无限轮播

前言工作中用到了这么个东西，时间紧急搜索了一种写法临时用。空闲下来准备自己写一个，简单花了一点时间写了个demo，分享一下。（注意：这个demo只经过了简单测试，你要是在实际项目中用是需要自己调整的）代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...

2021-11-18 14:44:58 811

原创使用express读写本地文件时遇到的问题记录（一）

前言近来学习node服务端相关框架，主要学习express，按照惯例总要写个demo来测试。写了个小游戏雏形，使用本地JSON文件来存储游戏数据，读取文件的操作搜索一下，有人给出了如下代码router.get("/heros", function (request, response) { var data = require('E:/data/heros.json'); // 要获取的json文件 response.send(data);})这个方法确实可以获取到指定文件内容，但问题在于

2021-05-06 14:30:34 622

原创 VUE实现一种有趣的图片展示方式

写在前面在网上找找一些有趣的网页设计，结果发现了这么一个Paolo Prendin，效果很好看觉得这种设计很有意思，但是他的设计里图片总是半张半张的，只有少部分图片会刚好拼成一个，觉得不太好，就自己实现一个，我实现的是这个样子的，中间的图片总是能拼成完整的一张页面结构从这个页面效果就能很容易看出页面分成上下两部分，两个部分都不能滚动，然后再配上两组不换行的图片行就可以了。Html代码如下 <div id="app" class="img_wall"> <!--

2021-02-20 11:35:36 2355

原创 VUE实现的简单拼图游戏

写在前面最近玩游戏的时候玩到游戏内置的拼图小游戏，突然唤起我对拼图游戏的热爱了，结果这内置游戏要花钱，在steam上找到的免费拼图游戏也不能自定义图片，想玩其他的图还要花钱。这让我很不爽，就索性自己写一个拼图游戏。但是要说明的是，我做出的拼图游戏是非常简单的版本，甚至也不能算是个拼图，因为它的具体样子是这样的这游戏的玩法是把拼图块以正确的方式放入正确的卡槽中的，拼图块还是正方形的（正在考虑如何做成真实的那种拼图块），也没有相互关联的拼图块拼成一个的时候，可以一起移动的效果。非要说跟拼图游戏有什么关系

2021-02-18 15:41:54 1607 7

原创 python + vue + electron实现本地音乐播放器

前言因为受够了一般音乐播放软件的各种没什么用的功能以及各种垃圾广告，所以想自己搞一个音乐播放器来用，花了几天时间就搞了这么个东西，跟大家分享一下。这个文档并不是针对前端新手的，所以如果你接触前端不久就简单了解一下就好。代码已经在我的Github上了，代码里也加了点注释，真的对这个很感兴趣的可以下载下来自己试试。这篇文章的叙述思路跟我实际开发的思路相同，主要分成三个步骤，下面将一步一步地说。第一步，使用vue做个网页播放器这是这个项目的重点，毕竟我本身就是个前端，先实现一个网页版来满足基本要求。

2021-01-28 16:45:15 2677 3

原创 css实现文字竖排

在研究input默认样式时，发现了个很有趣的css属性whiting-mode，查看MDN文档，发现了这个用于竖排文字非常简便。MDN文档writing-mode属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置书时，应在根元素上设置它（对于 HTML 文档应该在html元素上设置）此属性指定块流动方向，即块级容器堆叠的方向，以及行内内容在块级容器中的流动方向。因此，它也确定块级内容的顺序。可设置的值horizontal-tb 对于左对齐(ltr)脚本，...

2021-01-08 09:41:36 978

原创使用VUE实现的数独游戏

写在前面数独游戏是个很有意思的数学游戏，实现一个数独游戏对自己的思维逻辑也有那么一点挑战，所以用VUE实现了一个。如果你喜欢这个游戏,，这是完整代码Github地址，下载下来可以直接玩；如果你也想自己做一个数独游戏，那么我可以把我的思路分享给你。详细思路解析数独规则数独的结构是个9x9的九宫格布局，每个九宫格内是不重复的1-9数字，然后每行每列都是不重复的1-9数字，规则不算复杂DOM结构 <div class="sudoku_area" :class="{'sudoku_start

2021-01-06 15:28:28 1192

原创使用JS实现表格宽度任意竖轴滚动时表头固定

前言：在实际项目开发中遇到类似需求，本来想当然地用**table-layout** ，但是这个属性并不能很好的应用在任意宽度的表格上。至于其他解决方案就是给td手动设置固定宽度，这种方法并不具有通用性，但是给我提供了一个思路，自动计算并设置表格宽度就可以很好地实现想要的效果。DOM结构<div class="table_area"> <div class="table_head"> <table> <tr>

2020-12-30 16:21:08 659

原创数字标准化为x,xxx,xxx的方法

简单提供一个传入任意数字转为x,xxx,xxx的方法function numberFormate(num) { // 数字格式化为x,xxx,xxx,xxx num = parseFloat(num); if (!Number.isNaN(num)) { let str = Math.abs(num).toString().split('.'); const a = Math.ceil(str[0].length / 3); st

2020-11-27 09:31:45 1878

原创 React--简单的抽卡模拟器

写在前面这是我练习React的练手作业，毕竟官方给的井字棋还是有些简单了用到的图片来源是网络，主要是三国杀的素材，所以严禁用于商业用途这个模拟器主要是主页、抽卡动画页与抽卡记录页三个部分，动画用的css动画，记录则用的是indexedDB，所以看我的代码前最好了解一下这些东西用到图片可能存在图名不对应的情况，因为我也不知道图片画的是谁，就随便猜了个名字代码中可能存在一些问题，这很正常，毕竟这是练习用的，有问题欢迎大家指出样式基本没采用响应式与浏览器兼容，所以最好在最新版的谷歌浏览器上查看本来

2020-10-30 11:07:09 3472 2

原创 indexedDB学习小结

闲来无事学习一下indexedDB，看前提示，我这不是学习文档，我只是把我学习的成果代码跟大家分享一下，因为我自己看文档的代码偶尔也会困惑，边写边理解，我这个代码只是给刚接触indexedDB的人一点提示。一、学习文档1、学习前端知识首选：MDN--indexedDB文档https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB2、阮一峰老师的分享文档：http://www.ruanyifeng.c

2020-07-01 16:05:21 1188

原创规避浏览器自动填写账号密码的一种思路

很多浏览器都会加入记住密码并且自动填充用户名和密码来方便使用者，但在有些情况下这种方便反而会带来不便，因为它会填充当前网页IP地址下面的页面上的text和password类型输入框组合，会带来一点麻烦。其实网上有很多关于如何解决这种问题的方法，我简单谈一下我个人比较喜欢的一个方法，因为浏览器填充用户名和密码是按照text与password类型组合来判断的，所以本来type应该是password...

2020-04-10 10:48:13 314

原创阿拉伯数字转换为中文大写数字

这个功能使用场景不多，百度也能找到很多相关代码，只不过我找了几个看的不是很明白，为了锻炼自己的思维能力，所以就干脆自己写了一个，不仅分享代码，同时也分享一下我的思路JS代码let moneyCaseFold = (num) => { // 存在精度问题，拾万亿级数字可用 let regZero = new RegExp('零') num = num.toStri...

2019-05-15 10:00:18 3746

原创 VUE —— 移动端div拖动demo

手机上会偶尔用到拖动div的效果，虽然我自己还没遇到，先写一个以防万一，需要注明的是，具体实现代码是我在网上找的，但是那个代码存在一些问题，我又搜集了其他资料对其修改，达到了现在的样子，所以还是要感谢写这段代码的大神与万能的搜索引擎1、分享代码html代码<template> <div class="main"> <div ref="move...

2019-02-20 14:38:16 1511 8

原创 vue —— 带农历的日历功能

闲来无事做一些简单功能，一边练习VUE的使用，一边锻炼逻辑思维能力。之前有个项目需要自己写一个月份选择器，由此想起来做一个简单的日历，做起来有一些自己感兴趣的东西，也为了记录一下，发个帖首先，我做的日历是没有农历的，因为我不知道农历的历法是怎么计算的，从网上找了一个似乎是很多年前的代码，功能不错，代码太乱就自己整理了一下，当然这段代码还是归写代码的大神所有，跟我没啥关系，特此声明1、分享代...

2019-02-20 14:24:59 9591 4

原创关于在jQuery源码中，argument = +argument语句的含义记录

粗略察看JQuery源码，学习大神的编码风格、编码思路以及其他让人感兴趣的内容，在查阅至/** * Returns a function to use in pseudos for positionals * @param {Function} fn */function createPositionalPseudo( fn ) { return markFunction(func...

2019-01-15 16:48:02 209

原创不使用canvas与图片绘制折线图

学习思路自由发挥，发挥到了统计图表的领域里，准备做个折线图。做折线图用canvas当然是非常方便了，也有极其丰富的插件可用，之所以非要搞个不使用canvas与插件实现的折线图，那就是我开拓思路（闲的无聊）的成果，简单和大家分享一下先说说思路，最早实现折线图的思路是先百度，看有没有现成的例子，当然，我找到一个https://www.jb51.net/jiaoben/81610.html，做的很好...

2019-01-07 14:01:13 493

原创简单的实现画任意长度圆弧的DEMO

最近一直在自己瞎捣鼓，也不知怎么思绪就跑到了画图表的上面来了（估计是思绪总是希望能飞一会），然后简单实现了加载进度条的demo当然这个非常简单就没必要贴源码了然后又看着360体检那个小球做了个这个当然这个实现起来也非常简单，做起动画也没什么阻碍然后障碍就来了，其实就是想做个这个玩意就是个圈儿，当然是任意长度的圆弧，可以不闭合那种，看起来非常简单，确实也实现了...

2019-01-05 16:03:52 1429

原创 anime.js的学习小结

1、关于anime.js的引入$ npm install animejs# OR$ bower install animejsimport anime from 'animejs'或者直接引用anime.js文件<script src="anime.min.js"></script><!-...

2018-12-10 10:42:19 3570

qq_32109661的博客