JSoon’s gists

JSoon / colorToGrayscale.html

Last active July 19, 2018 07:46

【canvas】将彩色图片转换为灰度图片

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>colorToGrayscale</title>
	</head>

	<body>

JSoon / tvNoiseEffect.html

Last active July 19, 2018 07:46

【canvas】电视机无信号噪点动效，利用正弦函数模拟真实噪声影像

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>电视机无信号噪点动效，利用正弦函数模拟真实噪声影像</title>

	<style>
	.tv-box {

JSoon / thumbnail.html

Last active July 10, 2018 06:05

缩略图高度不塌陷DOM结构及样式，使用该布局方式，能够实现在图片尚未加载完成前，保证页面高度不会因此受到影响。

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>缩略图高度不塌陷DOM结构及样式</title>

	<style>

JSoon / getParameterByName.js

Last active June 15, 2018 02:22

根据参数名称获取url中的参数值

	// 获取query parameters
	// https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
	function getParameterByName(name, url) {
	if (!url) url = window.location.href;
	name = name.replace(/[\[\]]/g, '\\$&');
	var regex = new RegExp('[?&]' + name + '(=([^&#]*)\|&\|#\|$)'),
	results = regex.exec(url);
	if (!results) return null;
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, ' '));

JSoon / shuffle.js

Created April 16, 2018 02:50

Fisher–Yates 随机排序算法

	/**
	* Fisher–Yates shuffle
	*
	* https://blog.oldj.net/2017/01/23/shuffle-an-array-in-javascript/
	* https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
	* https://github.com/lodash/lodash/blob/b0980a90fc83bc92e040f905ebed8196f895949c/.internal/shuffleSelf.js
	* @param {array} array
	*/
	var shuffle = function (array) {
	var counter = array.length;

JSoon / 3d-cube-animation.html

Created April 12, 2018 08:38

css3 3D 立方体简单旋转动效

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>css3 3D 立方体简单旋转动效</title>
	<style>
	.cube-wrapper {
	width: 100px;
	height: 100px;

JSoon / dateToISO8601.js

Created January 30, 2018 06:16

将毫秒数时间格式化为ISO-8601标准格式

	/**
	* 将毫秒数时间格式化为ISO-8601标准格式
	* 如2011-10-10，或者2011-10-10T14:48:00
	* http://www.w3.org/TR/NOTE-datetime
	* @param {number} milliseconds 时间毫秒数
	*/
	function dateToISO8601(milliseconds) {
	milliseconds = Number(milliseconds);
	var date = new Date(milliseconds);
	var YYYY = date.getFullYear(),

JSoon / regExp.js

Last active May 17, 2018 01:30

正则表达式

	// 中文字符集（简体、繁体、双字节字符）
	var regExp = /[\u4e00-\u9fa5x00-xff]/g;

	// 中国大陆手机号码
	var regExp = /^1[0-9]{10}$/; // 一般情况
	var regExp = /^1[3\|4\|5\|7\|8][0-9]{9}$/; // 目前精确情况，电信，移动，联通目前发行的号码（截止2018年1月5日）

	// 替换11位手机号中间4位
	var mobileNumber = '13512345678';
	mobileNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1 ** $2'); // 135 ** 5678

JSoon / dragNdrop.html

Last active April 4, 2018 09:25

JavaScript 简单拖拽

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>拖拽</title>

	<style>

JSoon / timeDiff.js

Last active January 30, 2018 06:13

时间差函数

J.Soon JSoon