記事ディレクトリ
JS
jsオブジェクトのディープコピー
/**
* 深拷贝对象
* @param {Object,Array} obj 要复制的对象
* @returns {Object,Array} 返回一个复制的对象
*/
const copyObj = obj => {
// 非对象 {}
const isObj = typeof obj !== 'object' || obj === null
if (isObj) return obj
// 是数组 []
const isArr = Array.isArray(obj)
// 确认数据类型
const newObj = isArr === true ? [] : {
}
// 遍历对象
for (const key in obj) {
newObj[key] = copyObj(obj[key])
}
return newObj
}
const a1 = [
{
a: [
{
b: ['我是老6']
}
]
}
]
const a2 = copyObj(a1)
a1[0].a[0].b = '我不是老666666666666'
console.log(a1)
console.log(a2)
演算結果
jsのランダムな色
function ramColor() {
//随机生成RGB颜色
const arr = [];
for (let i = 0; i < 3; i++) {
// 暖色
// arr.push(Math.floor(Math.random() * 128 + 64));
// 亮色
arr.push(Math.floor(Math.random() * 128 + 128));
}
const [r, g, b] = arr;
// rgb颜色
// var color=`rgb(${r},${g},${b})`;
// 16进制颜色
const color = `#${
r.toString(16).length > 1 ? r.toString(16) : "0" + r.toString(16)
}${
g.toString(16).length > 1 ? g.toString(16) : "0" + g.toString(16)}${
b.toString(16).length > 1 ? b.toString(16) : "0" + b.toString(16)
}`;
return color;
}
終了
2023/4/20 9:21
配列オブジェクトのソート
const arr = [{
age: 1 }, {
age: 100 }, {
age: 23 }, {
age: 87 }, {
age: 4 }, {
age: 10 }, {
age: 27 }, {
age: 99 }, {
age: 54 }, {
age: 23 }, {
age: 55 }, {
age: 23 }, {
age: 87 }]
console.log(sortArrKey(arr, 'age', 1));
/**
* @param {Array} arr 要排序的数组
* @param {string} sortKeyName 排序的键(Key)
* @param {Number} sortType 排序类型 1是正序 非1是负序
* @return {Array} 返回一个排序的数组
*/
function sortArrKey(arr, sortKeyName, sortType = 1) {
return arr.sort((o1, o2) => sortType === 1 ? o1[sortKeyName] - o2[sortKeyName] : o2[sortKeyName] - o1[sortKeyName])
}
デモ
終了
2023/4/19 12:07 シリーズ
PCおよびモバイルイベントに対応
1. カプセル化は PC およびモバイル イベントと互換性があります
src/tuil/events.js
/**
* 判断是PC端还是移动端
* 通过不同的设备定义不同的事件名
*/
const isMobile =
navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
) !== null
const events = isMobile
? ['touchstart', 'touchmove', 'touchend']
: ['mousedown', 'mousemove', 'mouseup']
export {
events
}
2.使用する
vueで使用する場合
src/views/Home.vue
<template>
<div ref='div'>home</div>
</template>
<script setup>
import {
ref, onMounted } from 'vue'
//引入
import {
events } from '@/utils/event'
const [start, move, end] = events
console.log(start, move, end);
//获取元素
const div = ref(null)
onMounted(() => {
// 使用
div.value.addEventListener(start, _ => console.log('你好呀'))
})
</script>
パソコン効果
モバイルエフェクト
終了
2023/4/17 19:19 晴れ
scrollIntoView は表示領域までスクロールします
基本的な使い方
el.scrollIntoView()
el.scrollIntoView(true)
el.scrollIntoView(false)
el.scrollIntoView(opts)
el.scrollIntoView({
behavior: 'smooth', block: 'start', inline: 'nearest' })
el.scrollIntoView({
behavior: 'auto', block: 'start', inline: 'nearest' })
el.scrollIntoView(opts)
- スクロールする el 要素 ( divなど)
- オプション:
- true は親の一番上までスクロールします
- false 親の一番下までスクロールします
- { behaviour: 'smooth', block: 'start', inline: 'nearest' }パラメータがオブジェクトの場合↓
- 行動
- 自動アニメーションなし
- スムーズなスムーズな移行
- インライン水平配置 (デフォルトの開始)
- 始める
- 中心
- 終わり
- 最寄りの
- ブロックの垂直方向の配置 (デフォルトの開始)
- 始める
- 中心
- 終わり
- 最寄りの
- 行動
コール適用バインドを 10 分で理解する
| 名前 | 住所 |
|---|---|
| call apply binding - transfer [初心者チュートリアル] - 侵入と削除 | https://www.runoob.com/w3cnote/js-call-apply-bind.html |
| 呼び出し適用バインド - ターン - スタンバイ | https://www.runoob.com/w3cnote/js-call-apply-bind.html |
呼び出し適用バインドの概要
- apply binding関数を呼び出す =>この点を変更する
| 名前 | 使用法 |
|---|---|
| 電話 | 对象.call(this指向,参数1,参数2...) |
| 申し込み | 对象.apply(this指向,[参数1,'参数2'....].) |
| 練る | 对象.bind(this指向,参数1,参数2...) |
3 違い
| 違い |
|---|
call、apply、およびbind最初のパラメータはすべて改变this指向 |
3.最初のパラメータがnullまたは に渡されるとundefined、これは window を指します。fn.call(null,...agrs) |
call、bindなどのパラメータを渡すのと同じです。fn.call(null,...agrs)fn.bind(null,...agrs) |
applyパラメータは次のような配列として渡されます。fn.aapply(null,['a','b']) |
call,この点をapply変更するのは1回だけにして、すぐに関数を1回実行します。 |
bindこの点を永続的に変更すると、関数はすぐに実行されなくなります。たとえば、fn1.bind(obj1)fn1 関数はすぐには実行されません。たとえばfn2.bind(obj2)()、括弧を追加すると、fn2 関数がすぐに実行されます。 |
applycall1 回限りの入力パラメーターであり、複数bindの入力に分割できます。 |
2023/3/11 10:17
addEventListener - イベントバインディング
el.addEventListener(event,callback)クリック (クリック) などのバインディング イベントの場合- el がバインドされている要素
- イベント イベント
- callback コールバック関数
例：
HTML元素.addEventListener("事件名", function(){
// js代码
});
パソコンイベント
| イベント名 | 効果 |
|---|---|
| クリック | クリック イベント -注: モバイル端末でもトリガーできます。 |
| コンテキストメニュー | 右クリック |
| dblclick | ダブルクリック -注: モバイル端末もトリガーできます |
| マウスダウン | マウスダウン |
| マウスアップ | マウスリリース |
| マウスエンター | マウス ポインタが要素上に移動すると発生します -注: 1 回だけ発生します |
| マウスオーバー | 要素の上にマウスを移動します -注: トリガーは 1 回だけです |
| マウスの移動 | マウスを移動するとトリガーされます-注: 複数回トリガーされます |
| マウスを離れる | マウスポインタが要素の外に移動するとトリガーされます |
| マウスアウト | マウスが要素から外れました |
| キーボードイベント | …少し |
例
HTML元素.addEventListener('mouseenter', e =>{
console.log('0')})
HTML元素.addEventListener('mouseleave', e =>{
console.log(e)
})
モバイルイベント（タッチ）
| イベント名 | 効果 |
|---|---|
| タッチスタート | 指を押した |
| タッチムーブ | 指の動き |
| タッチエンド | 指を離して |
| 触れる | すべての指のリスト |
| ターゲットタッチ | 最初の指 |
| 変更されたタッチ | 現在のイベントに関係するフィンガーのリスト |
例
HTML元素.addEventListener('touchstart', e=>{
console.log(e)})
HTML元素.addEventListener('touchmove', e=>{
console.log(e)
})
2023/3/11 14:21
div入力ボックス
div に属性を追加しますcontenteditable="true"。入力ボックスとして使用できます。
- 関数 ：
- テキストエリアと入力ボックスでは、画像やその他の要素を挿入できません
- Divはテキスト入力だけでなく、
img画像を絵文字入力に変換するなどの要素を挿入することもできます。
ヴュー
Vue ではscrollIntoView が無効です | Vue ではscrollIntoView は無効です
Vue がscrollIntoViewを使用できない問題を解決する
- nextTickでscrollIntoViewを使用するだけです
例
<script setup>
import {
nextTick } from 'vue';
nextTick(()=> {
HTML元素.scrollIntoView({
behavior: 'smooth', block: 'start', inline: 'nearest' })
})
</script>
2023/3/10 18:46
CSS
テキストは強制的に折り返されません
- 設定する必要があります
width
.user{
width: 100%;
white-space:nowrap;
word-wrap: break-all;/* 英文不换行 */
}
複数行のテキストを非表示にする
.txt{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 保留几行 */
-webkit-box-orient: vertical;
}
単一行のテキストを非表示にする
.txt{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100pvw; /* 必须设置宽 */
white-space:nowrap;
word-wrap: break-all;/* 英文不换行 */
}
CSSテキスト省略表
| 必須の属性 | 効果 |
|---|---|
| オーバーフロー: 非表示 | 隠しテキストを超えて |
| テキストオーバーフロー: 省略記号; | その先の省略記号を表示 |
| -webkit-line-clamp: 3; | 数行残しておく |
2023/3/12 9:19
希少物件
| 属性名 | 価値 | 効果 | タイプ |
|---|---|---|---|
| キャレットカラー | 色の値、たとえば赤 | 入力ボックスのカーソルの色を設定する | CSS |
| コンテンツ編集可能 | 真偽 | HTML要素を入力ボックスとして設定する | HTML |
画像はテキストと水平に配置されます (vertical-align)
コメントボックスに利用可能
.emjio {
vertical-align: middle;
}
レンダリング
2023/3/17 22:08
レンジスライダーの美化
input[type=range] {
margin: 0;
-webkit-appearance: none;
appearance: none;
background-color: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
height: 4px;
background: #eee;
}
input[type=range]::-webkit-slider-container {
height: 20px;
overflow: hidden;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
background-color: #f44336;
border: 1px solid transparent;
margin-top: -8px;
border-image: linear-gradient(#f44336, #f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
}
効果
終了
2023/4/19 23:46