随笔分类 -  01-01. 前端经典小demo

数独小游戏
摘要：效果图： 有兴趣的可以联系我，获取完整代码 游戏功能： 可以纯鼠标操作，也支持键盘输入，键盘填答案（数字键19），键盘填备注（Shift + 数字键19）。 可“开启提示”，开启后增加辅助线，正确提示。（注意：开启后只能提示预设的唯一答案，而数独的答案可能并非唯一，和预设答案不一样，不会影响最后的结 阅读全文
posted @ 2021-07-02 16:42 真的想不出来 阅读(544) 评论(0) 推荐(0)
《翻页时钟特效》或者《日历翻页效果》的 css 部分原理实现
摘要：介绍： 这篇文章，并没有完整的实现翻页时钟、日历，只写了如何实现一个可连续翻页的 css 效果。在此基础上实现翻页时钟、日历还不是手到擒来。 Demo： 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <me 阅读全文
posted @ 2021-06-11 17:14 真的想不出来 阅读(2460) 评论(0) 推荐(0)
点击滚动到任意位置
摘要：滚动到任意位置 涉及知识点： window.scrollTo(x, y) requestAnimationFrame(()=>{}) //帧动画,优点：按浏览器的刷新频率渲染，更加流畅。特点：类似 setTimeout 只执行一次 原生的写法： <!DOCTYPE html> <html lang= 阅读全文
posted @ 2021-03-23 16:22 真的想不出来 阅读(180) 评论(0) 推荐(0)
react 高阶组件如何写，一个高阶组件的小demo
摘要：高级组件 higherOrderComponent （HOC） 是个纯函数，接收一个组件，返回一个组件 例子： 效果图 js部份 import React, { Component } from "react"; import "./Blackboard.less"; const defaultPa 阅读全文
posted @ 2020-10-22 22:56 真的想不出来 阅读(655) 评论(0) 推荐(0)
方向键控制运动，躲避多个障碍物
摘要：效果图： 功能简介： 通过方向键控制，让移动物体（需要运动的元素）在一定范围（定位父级）内移动。 碰撞到障碍物时停止前进，可以同时设置多个障碍物。 可以控制速度 碰撞之后，开启回调，返回移动方向，碰撞面，和障碍物Dom，等信息 点击查看：完整代码 js 部分： class keyMoue { con 阅读全文
posted @ 2020-09-23 09:11 真的想不出来 阅读(391) 评论(0) 推荐(0)
让 antd Model 变成可拖动弹窗
摘要：本想自己模仿 antd 写一套可以拖拽的弹窗，后来对如何让 antd 的 Model 拖拽起来 更感兴趣， 我把实现方式的关键点贴出来，供大家讨论。 1. 封装成一个公用组件 // 目录 ├── src/ │ ├── components/ │ │ └── DragAntdModal/ │ │ ├─ 阅读全文
posted @ 2020-09-01 18:50 真的想不出来 阅读(1886) 评论(1) 推荐(0)
实现右键，一键复制工能。以及防复制工能。
摘要：一键复制工能 <div> <span id="copyMy" onmousedown="copyFn(event)" oncontextmenu="doNothing()">右键复制</span> </div> <script> function doNothing() { // 取消右键弹出的菜单 阅读全文
posted @ 2020-07-13 12:00 真的想不出来 阅读(328) 评论(0) 推荐(0)
轮播图 V1.0
摘要：知识点：css 画箭头，transform: rotate(-135deg)，旋转角度 功能：左右无限循环轮播、随父级宽高随意缩放、自动播放 查看源码，请联系作者 效果图： 阅读全文
posted @ 2020-05-30 11:50 真的想不出来 阅读(326) 评论(0) 推荐(0)
模仿 Antd 写一个季度的时间选择器 V2.0
摘要：说明： 版本：V2.0 此文章代码复制不可用，有需要可以留言，或者联系我。 功能介绍： 1.可以设置 可选择的时间范围，范围超出部分置灰不可选择。 2.点击空白处默认收起弹窗，也可以在外部通过 open 属性控制。 3.按确定按钮后过 onOk 属性返回 一个函数，第一个参数为选择的时间。 4.*新 阅读全文
posted @ 2020-01-19 16:43 真的想不出来 阅读(2108) 评论(12) 推荐(0)
模仿 Antd 写一个年份的时间选择器 V2.0
摘要：说明： 版本：V2.0 此文章代码复制不可用，有需要可以留言，或者联系我。 功能介绍： 1.可以设置 可选择的时间范围，范围超出部分置灰不可选择。 2.点击空白处默认收起弹窗，也可以在外部通过 open 属性控制。 3.按确定按钮后过 onOk 属性返回 一个函数，第一个参数为选择的时间。 4.*新 阅读全文
posted @ 2020-01-19 15:36 真的想不出来 阅读(899) 评论(2) 推荐(0)
模仿 Antd 写一个年份的时间选择器 V1.0
摘要：说明： 版本：V1.0 这篇文章复制不可用。 功能介绍： 1.可以设置 可选择的时间范围，范围超出部分置灰不可选择 2.点击空白处默认收起弹窗，也可以在外部通过 open 属性控制 3.按确定按钮后过 onOk 属性返回 一个函数，第一个参数为选择的时间 改进方向： 若有时间，我希望弹窗中的确定按钮 阅读全文
posted @ 2020-01-17 19:41 真的想不出来 阅读(603) 评论(0) 推荐(0)
模仿 Antd 写一个季度的时间选择器 V1.0
摘要：说明： 版本：V1.0 这篇文章复制不可用。 功能介绍： 1.可以设置 可选择的时间范围，范围超出部分置灰不可选择 2.点击空白处默认收起弹窗，也可以在外部通过 open 属性控制 3.按确定按钮后过 onOk 属性返回 一个函数，第一个参数为选择的时间 改进方向： 若有时间，我希望弹窗中的确定按钮 阅读全文
posted @ 2020-01-17 15:24 真的想不出来 阅读(1565) 评论(2) 推荐(0)
让页面随浏览器的窗口大小缩放而缩放（rem布局动态设置根节点）
摘要：方式一： 全局样式使用 rem 布局。 在根文件使用以下代码：动态改变根节点 html 的 fontSize 值 componentDidMount() { this.rem() } rem = () => { //改变根节点的 (() => { let that = this function c 阅读全文
posted @ 2019-09-12 10:53 真的想不出来 阅读(3579) 评论(0) 推荐(0)
回到顶部效果
摘要：js实现返回顶部效果的解决方案 1、纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2、纯js，带动画版本 生硬版： var scrollToTop = window.setInterval(function() 阅读全文
posted @ 2019-02-07 17:40 真的想不出来 阅读(775) 评论(0) 推荐(0)
css3 无缝轮播效果小demo（轮播效果/渐隐渐现效果）
摘要：轮播效果： DOM部分： <div id="banner"> <ul> <li><img src="./images/banner-1.jpg" alt=""></li> <li><img src="./images/banner-2.jpg" alt=""></li> <li><img src=" 阅读全文
posted @ 2019-01-24 16:25 真的想不出来 阅读(1118) 评论(0) 推荐(0)
运动（学习）
摘要：速度版运动： 通多改变 left 或者 top 值，来实现运动，主要控制速度。 let num = 0; setInterval(()=>{ num += 5; box.style.left = num + 'px'; },16.7); /*起始位置以（每16.7毫秒运动5px）的速度运动*/ se 阅读全文
posted @ 2018-11-15 22:54 真的想不出来 阅读(175) 评论(0) 推荐(0)