家好，我是辣條。

今天給大家分享只要你使用電腦，就能在這里找到你需要的寶藏軟件，辣條精挑細選，建議收藏！

一、工具類軟件

1、Folder Size：我們沒法一眼看到各個文件夾的大小，它可以做到；

可以隨著你一邊打開文件夾，有一個小窗口實時更新目前的文件夾容量

2、Keyboard Locker：當我們需要在鍵盤上用紙筆寫東西時，用它可以一鍵讓鍵盤暫時失靈；

?

ole、snow、bug、gun、robber等20個單詞速記

---蔡壯(中國式三維哲學創始者)2024 年 8 月作

注: 此為應用中國式三維哲學的天地人三維記憶中的單詞笑話速記法

一、role，whole，hole，pole

天維確定用笑話方式來記憶 role，whole，hole，pole

地維以笑話的方式，多重出現單詞次數來助記

1. “role”的小笑話：

我參加學校的話劇表演，老師問我想演什么（role）角色，我糾結半天說不出來，老師笑著說：“選個（role）角色可把你難住啦！”

2. “whole”的笑話：

我買了一個大披薩，發現是（whole）整個都鋪滿了芝士，我興奮地喊：“這（whole）整個披薩太誘人啦！”

3. “hole”的笑話：

小兔子玩耍時發現一個（hole）洞，好奇地把頭伸進去，結果卡住了，它著急地叫：“哎呀，這個（hole）洞坑我呀！”

4. “pole”的笑話：

我看到有人在撐桿跳，那根（pole）桿子好長，運動員怎么也跳不過去，大家都喊：“這（pole）桿子太長啦！”

這四個單詞的笑話故事：

我為選話劇角色（role）發愁，看到鋪滿芝士的整個（whole）披薩，小兔子被洞（hole）卡住，撐桿跳的桿子（pole）太長。

人維在于經常用笑話方式來復習并鞏固記憶成果，以免會忘記。

二、snow，blow，grow，know

天維確定用笑話方式來記憶 snow，blow，grow，know

地維以笑話的方式，多重出現單詞次數來助記

1. “snow”的小笑話：

冬天我盼著下雪（snow），等了好久終于下雪（snow）了，我卻發現自己忘了戴手套。

2. “blow”的笑話：

我吹氣球（blow），用力過猛氣球爆了，我被嚇了一跳，說：“這可別再吹（blow）爆啦！”

3. “grow”的笑話：

我種的小花一直不長大（grow），我每天都盼著，小花好像在說：“別著急，我會長大（grow）的。”

4. “know”的笑話：

考試的時候有道題不會，我心里想：“這題我真不知道（know）呀！”

這四個單詞的笑話故事：

盼雪（snow）卻忘戴手套，吹氣球（blow）爆了，盼花長大（grow），考試不知（know）答案。

人維在于經常用笑話方式來復習并鞏固記憶成果，以免會忘記。

三、robber，rubber，dobber，dibber

天維確定用笑話方式來記憶 robber，rubber，dobber，dibber

地維以笑話的方式，多重出現單詞次數來助記

1. “robber”的小笑話：

有個強盜（robber）闖進了銀行，結果被保安抓住了，強盜（robber）還喊冤枉。

2. “rubber”的笑話：

我在畫畫，用橡皮（rubber）擦了好多遍，橡皮（rubber）都變小了。

3. “dobber”的笑話：

朋友給我介紹一個新游戲叫“dobber”，我一臉疑惑地問：“這“dobber”咋玩呀？”

4. “dibber”的笑話：

我看到一個奇怪的工具叫“dibber”，不知道（dibber）怎么用，在那研究半天。

這四個單詞的笑話故事：

強盜（robber）闖銀行被抓，畫畫橡皮（rubber）變小，新游戲“dobber”不懂，奇怪工具“dibber”不會。

人維在于經常用笑話方式來復習并鞏固記憶成果，以免會忘記。

四、bug，hug，rug，jug

天維確定用笑話方式來記憶 bug，hug，rug，jug

地維以笑話的方式，多重出現單詞次數來助記

1. “bug”的小笑話：

我正在上網，突然屏幕上出現一只大蟲子（bug），嚇得我趕緊關電腦，說：“這蟲子（bug）太可怕啦！”

2. “hug”的笑話：

好久沒見奶奶了，一見面我就給她一個大大的擁抱（hug），奶奶開心地笑了。

3. “rug”的笑話：

冬天家里鋪上了新地毯（rug），我在上面滾來滾去，說：“這地毯（rug）真舒服！”

4. “jug”的笑話：

爸爸讓我去打水，給了我一個大水壺（jug），我抱怨道：“這水壺（jug）也太大了吧！”

這四個單詞的笑話故事：

上網遇蟲（bug），見奶奶擁抱（hug），冬天滾地毯（rug），打水嫌壺（jug）大。

人維在于經常用笑話方式來復習并鞏固記憶成果，以免會忘記。

五、gun，sun，run，fun

天維確定用笑話方式來記憶 gun，sun，run，fun

地維以笑話的方式，多重出現單詞次數來助記

1. “gun”的小笑話：

我拿著玩具槍（gun）和小伙伴玩打仗游戲，結果不小心打到了自己，疼得我叫起來：“這槍（gun）不聽話呀！”

2. “sun”的笑話：

夏天出去玩，太陽（sun）特別曬，我抱怨說：“太陽（sun）公公，您能休息會兒不？”

3. “run”的笑話：

上體育課跑步（run），我跑（run）了一圈就累得不行，心里想：“這跑（run）步太折磨人啦！”

4. “fun”的笑話：

去游樂場玩過山車，我興奮地喊：“這太有樂趣（fun）啦！”

這四個單詞的笑話故事：

玩槍（gun）自傷，嫌太陽（sun）曬，跑步（run）累，游樂場有樂趣（fun）。

人維在于經常用笑話方式來復習并鞏固記憶成果，以免會忘記。

通過這種天地人三維的笑話記憶法，讓單詞記憶變得輕松有趣，為我們的學習增添了許多歡樂。只要堅持運用和復習，就能牢牢記住這些單詞。

言

女朋友常逛的設計網站這兩天頁面上多了下雪的效果，于是問我我的網站能下雪嗎，作為一個程序員我一般會說實現不了，但是作為男朋友，不能說不行。

雪

雪我們可以使用span標簽和css的徑向漸變簡單意思一下：

.snow {
  display: block;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);
  border-radius: 50%;
}
復制代碼

效果如下：

很多雪

一片雪是不夠的，成千上萬才浪漫，世界上沒有兩片相同的雪花，所以每片雪都有自己的大小位置速度等屬性，為此先創建一個雪花類：

class Snow {
  constructor (opt={}) {
    // 元素
    this.el=null
    // 直徑
    this.width=0
    // 最大直徑
    this.maxWidth=opt.maxWidth || 80
    // 最小直徑
    this.minWidth=opt.minWidth || 2
    // 透明度
    this.opacity=0
    // 水平位置
    this.x=0
    // 重置位置
    this.y=0
    // 速度
    this.speed=0
    // 最大速度
    this.maxSpeed=opt.maxSpeed || 4
    // 最小速度
    this.minSpeed=opt.minSpeed || 1
    // 瀏覽器窗口尺寸
    this.windowWidth=window.innerWidth
    this.windowHeight=window.innerHeight
    
    this.init()
  }

  // 初始化各種屬性
  init () {
    this.width=Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.opacity=Math.random()
    this.x=Math.floor(Math.random() * (this.windowWidth - this.width))
    this.y=Math.floor(Math.random() * (this.windowHeight - this.width))
    this.speed=Math.random() * this.maxSpeed + this.minSpeed
  }

  // 設置樣式
  setStyle () {
    this.el.style.cssText=`
      position: fixed;
      left: 0;
      top: 0;
      display: block;
      width: ${this.width}px;
      height: ${this.width}px;
      opacity: ${this.opacity};
      background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);
      border-radius: 50%;
      z-index: 9999999999999;
      pointer-events: none;
      transform: translate(${this.x}px, ${this.y}px);
    `
  }

  // 渲染
  render () {
    this.el=document.createElement('div')
    this.setStyle()
    document.body.appendChild(this.el)
  }
}
復制代碼

init方法用來生成隨機的初始大小、位置、速度等屬性，在瀏覽器窗口內new100片試試：

let snowList=[]
for (let i=0; i < 100; i++) {
    let snow=new Snow()
    snow.render()
    snowList.push(snow)
}
復制代碼

效果如下：

動起來

雪動起來才能叫下雪，動起來很簡單，不斷改變x和y坐標就可以了，給snow類加個運動的方法：

class snow {
    move () {
        this.x +=this.speed
        this.y +=this.speed
        this.el.style.left=this.x + 'px'
        this.el.style.top=this.y + 'px'
    }
}
復制代碼

接下來使用requestAnimationFrame不斷刷新：

moveSnow () {
    window.requestAnimationFrame(()=> {
        snowList.forEach((item)=> {
            item.move()
        })
        moveSnow()
    })
}
復制代碼

效果如下，因為速度是正數，所以整體是往右斜的：

可以看到動起來了，但是出屏幕就不見了，所以雪是會消失得對嗎？要讓雪不停很簡單，檢測雪的位置，如果超出屏幕了就讓它回到頂部，修改一下move方法：

move () {
    this.x +=this.speed
    this.y +=this.speed
    // 完全離開窗口就調一下初始化方法，另外還需要修改一下init方法，因為重新出現我們是希望它的y坐標為0或者小于0，這樣就不會又憑空出現的感覺，而是從天上下來的
    if (this.x < -this.width || this.x > this.windowWidth || this.y > this.windowHeight) {
      this.init(true)
      this.setStyle()
    }
    this.el.style.left=this.x + 'px'
    this.el.style.top=this.y + 'px'
  }
復制代碼

init (reset) {
    // ...
    this.width=Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.y=reset ? -this.width : Math.floor(Math.random() * this.windowHeight)
    // ...
  }
復制代碼

這樣就能源源不斷地下雪了：

優化

1.水平速度

水平和垂直方向的速度是一樣的，但是看起來有點太斜了，所以調整一下，把水平速度和垂直速度區分開來：

class Snow {
  constructor (opt={}) {
    // ...
    // 水平速度
    this.sx=0
    // 垂直速度
    this.sy=0
  // ...
  }
  
  init (reset) {
    // ...
    this.sy=Math.random() * this.maxSpeed + this.minSpeed
    this.sx=this.sy * Math.random()
  }
  
  move () {
    this.x +=this.sx
    this.y +=this.sy
    // ...
  }
}
復制代碼

2.左下角沒有雪

因為整體向右傾斜，所以左下角大概率沒有雪，這可以通過讓雪隨機出現在左側來解決：

init (reset) {
  // ...
  this.x=Math.floor(Math.random() * (this.windowWidth - this.width))
  this.y=Math.floor(Math.random() * (this.windowHeight - this.width))
  if (reset && Math.random() > 0.8) {// 讓一小部分的雪初始化在左側
    this.x=-this.width
  } else if (reset) {
    this.y=-this.width
  }
  // ...
}
復制代碼

3.眼前的雪

隨機性的選擇一點雪給它較大的體積、透明度和速度，然后再使用css3的3D透視效果，把它的z軸數值調大一點，這樣的感覺就好像是在眼前劃過的一樣：

<body style="perspective: 500;-webkit-perspective: 500"></body>
復制代碼

class Snow {
  constructor (opt={}) {
    // ...
    // z軸數值
    this.z=0
    // 快速劃過的最大速度
    this.quickMaxSpeed=opt.quickMaxSpeed || 10
    // 快速劃過的最小速度
    this.quickMinSpeed=opt.quickMinSpeed || 8
    // 快速劃過的寬度
    this.quickWidth=opt.quickWidth || 80
    // 快速劃過的透明度
    this.quickOpacity=opt.quickOpacity || 0.2
    // ...
  }
  
  init (reset) {
    let isQuick=Math.random() > 0.8
    this.width=isQuick ? this.quickWidth : Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.z=isQuick ? Math.random() * 300 + 200 : 0
    this.opacity=isQuick ? this.quickOpacity : Math.random()
    // ...
    this.sy=isQuick ? Math.random() * this.quickMaxSpeed + this.quickMinSpeed : Math.random() * this.maxSpeed + this.minSpeed
    // ...
  }
  
  move () {
    // ...
    this.el.style.transform=`translate3d(${this.x}px, ${this.y}px, ${this.z}px)`
  }
}
復制代碼

4.鵝毛大雪

雪花嘛，輕如鵝毛，鵝毛是怎么飄的？是不是左右擺動的飄？那我們也可以選擇一部分的雪花讓它跟鵝毛一樣飄，左右搖擺很簡單，速度一會加一會減就可以了：

class Snow {
  constructor (opt={}) {
    // ...
    // 是否左右搖擺
    this.isSwing=false
    // 左右搖擺的步長
    this.stepSx=0.03
    // ...
  }

  // 隨機初始化屬性
  init (reset) {
    // ...
    this.isSwing=Math.random() > 0.8
    // ...
  }

  move () {
    if (this.isSwing) {
      if (this.sx >=1 || this.sx <=-1) {
        this.stepSx=-this.stepSx
      }
      this.sx +=this.stepSx
    }
    // ...
  }
}
復制代碼

除了上述這種方法，左右搖擺還有一種方式，就是使用正弦或余弦函數，因為它們的曲線翻轉90度就是左右搖擺：

img

我們使用正弦函數，公式為：y=sin(x)，x的值是弧度表示，只要一直增加就可以了，y的值用來修改雪花的水平方向的速度變化步長：

class Snow {
  constructor (opt={}) {
    // ...
    // 是否左右搖擺
    this.isSwing=false
    // 左右搖擺的正弦函數x變量
    this.swingRadian=0
    // 左右搖擺的正弦x步長
    this.swingStep=0.01
    // ...
  }

  init (reset) {
    // ...
    this.swingStep=0.01 * Math.random()
  }

  move () {
    if (this.isSwing) {
      this.swingRadian +=this.swingStep
      this.x +=this.sx * Math.sin(this.swingRadian * Math.PI) * 0.2
    } else {
      this.x +=this.sx
    }
    // ...
  }
}
復制代碼

因為正弦函數y的值是從1變化到-1，擺動幅度太了，所以乘了個小數0.2縮小一點，想要幅度小一點，還有一個方法是不要使用整個正弦曲線，可以從中截取一個適合的區間大小，比如就讓x的值在0.9π到1.1π之前變化：

class Snow {
  constructor (opt={}) {
    // ...
    // 是否左右搖擺
    this.isSwing=false
    // 左右搖擺的正弦函數x變量
    this.swingRadian=1// 需要改成一個中間值
    // 左右搖擺的正弦x步長
    this.swingStep=0.01
    // ...
  }

  init (reset) {
    // ...
    this.swingStep=0.01 * Math.random()
    this.swingRadian=Math.random() * (1.1 - 0.9) + 0.9// 也讓它隨機一下
  }

  move () {
    if (this.isSwing) {
      if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {
        this.swingStep=-this.swingStep
      }
      this.swingRadian +=this.swingStep
      this.x +=this.sx * Math.sin(this.swingRadian * Math.PI)
    } else {
      this.x +=this.sx
    }
    // ...
  }
}
復制代碼

5.下得慢一點

既然給水平加了曲線，垂直方向上是不是也可以改成非勻速呢？當然可以，區別是速度得一直是正的，不然就要出現反自然現象了，改變速度曲線同樣可以使用正余弦，上面我們使用了0.9π到1.1π之間的正弦曲線，根據上圖可以發現對應的余弦曲線都是負的，趨勢是先慢后快，所以可以利用這一段來改變垂直方向的速度：

move () {
  if (this.isSwing) {
    if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {
      this.swingStep=-this.swingStep
    }
    this.swingRadian +=this.swingStep
    this.x +=this.sx * Math.sin(this.swingRadian * Math.PI)
    this.y -=this.sy * Math.cos(this.swingRadian * Math.PI)// 因為速度都是負的，所以改成-
  } else {
    this.x +=this.sx
    this.y +=this.sy
  }
  // ...
}
復制代碼

6.在最上面

為了防止為頁面上原本層級更高的元素遮擋，給雪花的樣式加一個很大的層級：

render () {
    this.el=document.createElement('div')
    this.el.style.cssText=`
        // ...
        z-index: 9999999999999;
    `
    document.body.appendChild(this.el)
}
復制代碼

7.看不見我

修改了層級，所以雪花會在頁面的最上層，那么可能會擋住其他元素的鼠標事件，需要禁止它響應鼠標事件：

render () {
    this.el=document.createElement('div')
    this.el.style.cssText=`
      // ...
      pointer-events: none;
    `
    document.body.appendChild(this.el)
  }
復制代碼

8.更好一點

使用性能更好的transform屬性來做動畫：

render () {
    this.el=document.createElement('div')
    this.el.style.cssText=`
        left: 0;
        top: 0;
        transform: translate(${this.x}px, ${this.y}px);
    `
    document.body.appendChild(this.el)
}
復制代碼

move () {
    // ...
    // this.el.style.left=this.x + 'px'
    // this.el.style.top=this.y + 'px'
    this.el.style.transform=`translate(${this.x}px, ${this.y}px)`
}
復制代碼

當然，最好的方式是用canvas來畫。

最終效果：

下雨&雨夾雪

下完雪，接下來順便下個雨，雨和雪差不多，都是從天上掉下來，但是雨的速度更快，通常也不會左右搖擺什么的，方向也基本是一致的，先來修改一下樣式：

setStyle () {
  this.el.style.cssText=`
    // ...
    width: 1px;
    // ...
  `
}
復制代碼

很簡單，只要把寬度寫死為1就行了：

接下來把搖擺去掉：

move () {
  this.x +=this.sx
  this.y +=this.sy
  // ...
}
復制代碼

效果如下：

可以發現雨是豎著在水平移動，顯然是不行的，需要讓它傾斜一定的角度，和運動方向保持一致，這個也很簡單，算一下斜率，水平速度除以垂直速度：

move () {
  // ...
  this.el.style.transform=`translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy, this.sx)}`
}
getRotate(sy, sx) {
  return `rotate(${sx===0 ? 0 : (90 + Math.atan(sy / sx) * (180 / Math.PI))}deg)`
}
復制代碼

因為tan(θ)=sy/sx，θ=Math.atan(sy / sx)，因為雨的線段默認是從上到下垂直的，θ是代表和水平方向上的夾角，所以需要先旋轉90度，再旋轉夾角的度數，最后弧度轉角度的公式為：角度=弧度*(180/π)。

雨和雪都實現了，讓它們一起出來，就是雨夾雪了：

根據天氣下雪

把上面的代碼放到網站上就有下雪的效果了，另外也可以使用天氣廠商的api，根據實時天氣來下雪或者下雨，再實現一下太陽、烏云等效果，一個沉浸式天氣就完成了，有興趣的可自行實踐。

完整代碼

https://github.com/wanglin2/snow

源自：juejin.cn/post/6910857740327845901