前端
关注
分享
扫一扫
文章平均质量分 62
用户界面美化，制作一些好玩的网页。CSS、JS、前端框架配置和使用。
星云
我们不只是代码的搬运工，我们还生产代码。
展开
-
js给页面添加随机像素噪声背景
可以取小一点，但是取太小很不好看，因为生成的噪声看起来不随机了，小片区域就有重复。创建一个canvas但不放页面。这个canvas只用来生成图片，然后循环遍历在canvas里面画1px的矩形，自动就转换base64了。如果想要更浅的噪声只要随机数的产生范围。// 不能直接写2d部分浏览器会解析出奇怪的东西。/* 这样body本身没背景了 *//* 然后直接用透明度 */原创 2022-09-07 12:49:13 · 3970 阅读 · 1 评论 -
原生JS实现2048
按↑、→、↓、←控制所有方块移动（如果可能）。两个示数相同的方块将合并成一个方块，新方块示数等于两个方块示数之和。代码用了新语法，对浏览器版本有一定要求。原创 2022-10-24 11:45:55 · 629 阅读 · 4 评论 -
TS颜色格式转换
16进制颜色的没一个分量用1到2位16进制数表示，红色、绿色和蓝色三种颜色中的每一种都可以取从 00 到 FF 的值。为了避免数字系统的定义混淆，十六进制数字前面带有#，格式为#rrggbbaa，例如#0ABAB5FF。可以使用编码类型的缩写形式，格式为#rgba。#FC0等同于#FFCC00而不是#F0C000。TypeScript是一种基于JavaScript的强类型编程语言，数据转换时要求类型校验，那么用TypeScript会更方便些。正则中?用来给()里的命名，不命名groups。原创 2020-10-24 18:14:39 · 7011 阅读 · 1 评论 -
React.js将获取子组件内部元素
在子组件上弄一个属性，将父组件的ref传进去，这样父组件。获取到的就是子组件的元素了。原创 2021-05-08 22:04:30 · 732 阅读 · 2 评论 -
JavaScript实现经典消方块游戏
在游戏区域中任意位置滑动手势，点击屏幕下方的按钮，键盘WASD和↑←↓→都可以操作。初始化游戏区域啥都没有，每种方块面积都是4个方格，如果水平一行充满方块那么这一行就被整体消去，否则方块堆积越来越高直到超过一个阈值使游戏结束。每消一行加一分，同时游戏速度提高10ms。整个游戏就一个文件，浏览器打开。颜色好看。用了es6的语法，浏览器不能太老。原创 2022-08-20 23:06:44 · 1585 阅读 · 1 评论 -
网页按钮点击动画
一个按钮，每点击一次在大小可随时变化的按钮表面生成一个实心圆形，对每个圆形配置的时间TTT（单位：毫秒）内有如下过程：canvas动画+Intervalcanvas动画+requestAnimationFrame原创 2022-08-13 13:11:53 · 759 阅读 · 3 评论 -
听说你想手机玩扫雷？原生JS扫雷游戏
# 操作方法+ 单击绿色环形按钮即可开局，用任何工具首次点击雷区不会出现游戏失败情况；+ 点击左侧图标选择工具，选择不同工具点击雷区效果不同；+ 红旗图标为windows扫雷右击，普通箭头图标为windows扫雷左击，金色箭头图标为windows扫雷左右同时；+ 点击右侧太阳或月亮可切换显示模式。...原创 2022-07-16 08:44:20 · 642 阅读 · 5 评论 -
JS绘制极坐标颜色渐变
原生SVG是不支持这样渐变的。矢量绘图软件在作出这些渐变后也要在导出时将渐变转换为位图，内嵌在矢量图里，但是这样做要么不能解决放大缩小带来的失真问题，要么使得矢量图太大。那么如何用SVG作出这种渐变呢？通常SVG渐变是这样做的：表示从开始到结束中，处为颜色，处为颜色；即左下角为白色，右上角为黑色。整体SVG：但是这样只是得到一个圆形的线性渐变而不是我们想要的下面这样的渐变👇因为不支持而做不到，那只能绕个弯子，关键是CSS也不支持……办法倒也不是没有，在SVG中插入然后直接用JS在上画出渐变。画出来的.原创 2022-06-28 21:19:58 · 526 阅读 · 2 评论 -
旋转彩色三叶草
Document @keyfra原创 2022-06-26 22:31:17 · 247 阅读 · 5 评论 -
加载中旋转沙漏
一些网站或者APP在加载新东西的时候，往往会给出一个好看有趣的Loading图，大部分的Loading样式都可以使用CSS3制作出来，它不仅比直接使用gif图简单方便，还能节省加载时间和空间。下面介绍常见的一些Loading动画效果图的制作方法。...原创 2022-06-12 21:16:13 · 461 阅读 · 4 评论 -
SVG超椭圆
超椭圆的圆角相比于普通圆角来说更“圆”一点，不那么生硬。<!DOCTYPE html><html lang="en"><body> <svg width="300px" version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <path id="mask" /> <.原创 2020-11-29 21:17:25 · 466 阅读 · 4 评论 -
原生JS 扫雷游戏 自动插旗子 自定义雷区大小 雷数可调
《扫雷》是Microsoft于1992年附带在 Windows 3.1 操作系统中的单机游戏，它通过点击方格并以出现数字来判断附近雷的数量，将全部地雷做上标记即可胜利。最后在2015年7月发布的Windows 10中移除了这个游戏。随机变换雷区颜色，以及其它CSS样式，动画效果全是CSS。点击网页上的元素触发游戏事件打开雷区。如果对于一个方格，其周围未打开的方格恰好全都有雷，那么这些雷将全部自动被标记为小红旗，而玩家只需要一直点击雷区直至雷区全被打开并胜利呈现YOU WIN～没错，全程左键操作。在地原创 2022-02-12 10:04:19 · 10502 阅读 · 1 评论 -
Material-UI里的Date Picker 日期选择器为啥不能用
Material UI 是一款功能非常强大，界面却十分清新简洁的CSS框架，Material UI利用了Google的Material Design 全新设计语言，并且让每一个UI组件都变得非常独立，因此开发者使用Material UI也会比较简单。和Bootstrap类似，Material UI提供了很多常用的UI组件，除了最基本的菜单、按钮、滑动杆、进度条、单选框/复选框外，它还提供了一个非常有趣的日历组件，另外还提供了一些很有趣的图标。原创 2022-02-21 12:58:07 · 640 阅读 · 10 评论 -
React配置默认路由
React v6 路由相关。原创 2022-01-05 16:27:01 · 1366 阅读 · 0 评论 -
React.js水波按钮
【代码】React.js水波按钮。原创 2020-11-13 15:07:53 · 563 阅读 · 0 评论 -
[已解决] Matched leaf route at location “/“ does not have an element.This means it will render an＜Outle
错误信息Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.高版本中Switch已经被换成了Routes，点击链接路径变化正常但页面不显示，并在浏览器控制台输出以上警告。错误代码import React from 'react原创 2021-11-15 11:37:31 · 9031 阅读 · 6 评论 -
Element-ui 为什么el-form-item的rules校验规则不生效
# 原因## 错误```html<el-form-item :label="label" prop="id"> <el-input v-model="form.id" :placeholder="`请输入${label}`" :rules="rules"/></el-form-item>```## 改正```html<el-form-item :label="label" :rules="rules"原创 2021-10-04 06:30:00 · 7366 阅读 · 6 评论 -
Vue父组件调用子组件方法，报错[Vue warn]: Error in v-on handler: “TypeError: _this.$emit is not a function“
症状一开始浏览器控制台报这个错[Vue warn]: Error in v-on handler: "TypeError: _this.$emit is not a function"，明显就是this指向问题，名为ajax的方法在父组件中，而this是子组件。<!-- 子组件 --><template>… <el-pagination layout="prev, pager, next" :page-count=原创 2021-09-30 14:47:05 · 9293 阅读 · 2 评论 -
(多图)自定义修改 visual studio code 主题色，附绿色主题
visual studio 主题颜色活动栏"activityBar.activeBackground"活动栏当前选中项的背景色"activityBar.activeBorder"活动栏当前选中项靠近窗口边缘处有竖条，竖条颜色"activityBar.activeFocusBorder"按下活动栏的选中项，边框呈现此颜色"activityBar.background"活动栏背景色"activityBar.border"分隔活动栏与其他栏的边界"activityBar.foreground"活动栏原创 2020-07-31 22:35:22 · 14260 阅读 · 15 评论 -
vscode 自定义主题色黑绿
这是一个主题{ "name": "Theme", "colors": { /* utf-8 https://code.visualstudio.com/Docs/editor/debugging https://code.visualstudio.com/api/references/theme-color https://code.visualstudio.com/api/extension-guides/c原创 2021-05-20 09:40:36 · 878 阅读 · 2 评论 -
VS Code 浅绿色薄荷味主题下载
VSCode浅绿色主题原创 2021-02-20 17:32:48 · 657 阅读 · 2 评论 -
JS简易下拉刷新动效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #body {原创 2020-10-24 13:22:55 · 716 阅读 · 1 评论 -
JS引力小球代码
小球两两存在引力；两个球碰撞后变成一个，其质量等于两个球之和；如果小球质量太大会爆炸产生碎片。下面代码粘贴进文件后缀改为html直接运行。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c原创 2021-08-27 14:59:10 · 201 阅读 · 0 评论 -
黑屏绿字加载中 无脚本
<!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>D.原创 2022-02-06 13:43:34 · 507 阅读 · 0 评论 -
Ubuntu 安装 Electron 报错 This is probably not a problem with npm. There is likely additional
怎么了Ubuntu x64环境，Electron按照官网npm install --save-dev electron安装不上。控制台nebula@Ubuntu:~/Documents/projects/foo$ uname -aLinux Ubuntu 5.4.0-81-generic #91-Ubuntu SMP Thu Jul 15 19:09:17 UTC 2021 x86_64 x86_64 x86_64 GNU/Linuxnebula@Ubuntu:~/Documents/projec原创 2021-01-10 09:44:49 · 645 阅读 · 0 评论 -
JavaScript仿真数码时钟代码
/** * 添加数码管。 * @param {HTMLElement} root 容器 * @param {str} height 数码管高度 * @param {str} color1 点亮时颜色 */function createDtClock(root, height = '3em', color1 = '#f00') { var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 1000">原创 2020-12-18 22:37:41 · 253 阅读 · 3 评论 -
linux创建Vue2脚手架项目命令
环境配置Node.js下载链接npm包安装语法：npm install <包名>[@<版本号>][[ 参数]...]-g 安装到Node环境中；-save 安装到项目中，需要当前目录有./package.json；-save-dev 安装到项目中，需要当前目录有./package.json。npm -vnpm install vue-cli -gnpm cinfig prefix # 看安装到哪里了创建Vue2脚手架项目先进入项目目录，注意，cli会把项目原创 2021-10-07 22:39:00 · 572 阅读 · 3 评论 -
Django接收JQuery提交的图片文件，亲测能用
url.py#!/usr/bin/env python# -*- coding: utf-8 -*-from Demo.view import * # 项目叫Demofrom django.urls import pathfrom django.urls.conf import re_pathurlpatterns = [ path('', index), path('text', text), # 接口路径]re_path('', index)view.pyimpo原创 2021-09-23 22:21:14 · 346 阅读 · 1 评论 -
CSS三维球体制作：如何用纯CSS做一颗子弹糖
CSS像皮球～～～一脚踢到百货大楼～～百货大楼卖皮球～～～卖的全是CSS～～～～CSS像皮球～～～一脚踢到百货大楼～～百货大楼卖皮球～～～卖的全是CSS～～～～CSS像皮球～～～一脚踢到百货大楼～～百货大楼卖皮球～～～卖的全是CSS～～～～CSS像皮球～～～一脚踢到百货大楼～～百货大楼卖皮球～～～卖的全是CSS～～～～原创 2021-09-05 21:04:40 · 1299 阅读 · 2 评论 -
原生js直升机小游戏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../css/def.css"> <ti.原创 2021-05-08 22:00:54 · 231 阅读 · 1 评论 -
点击屏幕放烟花
点击屏幕放烟花????<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Firework</title> <style> *原创 2021-02-11 23:31:28 · 3162 阅读 · 5 评论 -
js 引力小球代码
<!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>Do原创 2021-02-28 22:56:17 · 206 阅读 · 0 评论 -
css行星旋转 无脚本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Planet</title> <style> * { margin: 0; padding: 0; } body, html {原创 2021-02-14 22:00:31 · 314 阅读 · 1 评论 -
JavaScript 模拟时钟
/** * 添加圆钟。 * @param {HTMLElement} root 容器 * @param {str} width 宽度 * @param {str} color 表针颜色 */function createClock(root, width = '100px', color = '#000') { var svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100" width="'原创 2020-12-20 22:58:38 · 198 阅读 · 0 评论 -
论css咋调节“亮-暗”色彩模式
有脚本。方法1弄一个.dark{}，放在body上(或者加一个别的标签反正把整个页面的其他东西全装进去)，所有样式都写一亮一暗，暗色写成后代选择器。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-02-07 21:32:12 · 1239 阅读 · 2 评论 -
JS如何获得今天是自1970年1月1日00:00:00开始的第几天
console.log( Math.floor( (new Date().getTime()-new Date().getTimezoneOffset()*60*1000)/(24*60*60*1000) ));原创 2021-08-16 09:32:21 · 376 阅读 · 1 评论 -
JS 便条单击后掉落
<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <style> html,body { margin: 0; padding: 0; height: 100%; width: 100%; } #paper {原创 2020-12-27 19:28:29 · 161 阅读 · 0 评论 -
[已解决]QWebEngineView中Python与JavaScript交互传值不能接收的问题
原因如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src='qrc:///qtwebchannel/qwebchannel.js'></script> <meta http-equiv="X-UA-Compatible" content="IE=原创 2021-05-08 21:59:17 · 708 阅读 · 1 评论 -
css做折射水滴
用transform跟filter模糊成倒像，水滴上能放字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style原创 2020-12-18 19:04:14 · 225 阅读 · 2 评论 -
三个元素高度均不能确定，上下两个元素自然撑开，中间元素填充剩余高度
重点：flex:+数字。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="minimum-scale=1.0,user-scalable=no,initial-scale=1.0" /> <title>界面</title> <style type="原创 2020-12-12 14:39:50 · 285 阅读 · 2 评论