Blog

常用的 JS 代码片段

01：将内容复制到剪贴板

const copyToClipboard = (content) => {
    const textarea = document.createElement("textarea")
  
    textarea.value = content
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand("Copy")
    textarea.remove()
}

02：使用URLSearchParams获取URL的搜索参数

const getQueryByName = (name) => {
    const query = new URLSearchParams(location.search)
    return decodeURIComponent(query.get(name))
}

// url: https://sunday.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null

03：平滑滚动至页面顶部

const scrollToTop = () => {
    const c = document.documentElement.scrollTop || document.body.scrollTop
  
    if (c > 0) {
        window.requestAnimationFrame(scrollToTop)
        window.scrollTo(0, c - c / 8)
    }
}

04：获取当前页面滚动距离

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop,
})

getScrollPosition() // { x: 0, y: 215 }

05：格式化货币

const formatMoney = (money) => {
    return money.toLocaleString()
}

formatMoney(123456789) // '123,456,789'
formatMoney(123456789.123) // '123,456,789.123'
formatMoney(123) // '123'

06：进入和退出全屏

// 进入全屏
function fullScreen() {
  let el = document.documentElement
  let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
  //typeof rfs != "undefined" && rfs
  if (rfs) {
    rfs.call(el)
  } else if (typeof window.ActiveXObject !== "undefined") {
    let wscript = new ActiveXObject("WScript.Shell")
    if (wscript != null) {
      wscript.SendKeys("{F11}")
    }
  }
}
// 退出全屏
function exitScreen() {
  let el = document
  let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen
  //typeof cfs != "undefined" && cfs
  if (cfs) {
    cfs.call(el)
  } else if (typeof window.ActiveXObject !== "undefined") {
    let wscript = new ActiveXObject("WScript.Shell")
    if (wscript != null) {
      wscript.SendKeys("{F11}")
    }
  }
}

December 18, 2024

centos docker
在CentOS服务器上安装Docker通常涉及以下步骤。请注意，这些步骤可能会因为Docker或CentOS的版本而有所不同，因此建议查阅官方文档以获取最新的信息。

以下是在CentOS上安装Docker的一般步骤：

步骤 1：更新系统

确保系统上的软件包信息是最新的：
```
sudo yum update
```
步骤 2：安装必要的软件包
```
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
```
步骤 3：添加Docker仓库
```
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
```
步骤 4：安装Docker引擎
```
sudo yum install docker-ce docker-ce-cli containerd.io
```
步骤 5：启动Docker服务
```
sudo systemctl start docker
```
步骤 6：设置Docker开机启动
```
sudo systemctl enable docker
```
步骤 7：验证安装

运行以下命令以检查Docker是否正确安装：
```
sudo docker --version
sudo docker run hello-world
```
如果一切正常，你应该看到一条消息表明Docker已经成功安装和运行。

以上是一般的步骤，但请注意，Docker和CentOS的版本可能会影响具体的步骤。确保查阅Docker官方文档和CentOS版本的特定文档以获取最准确的信息。
November 14, 2024
VUE+VITE
1、创建vue3项目
```
npm create vite@latest
```
输入项目的名字(作者就用test了)
```
Project name: » vite-project
```
按上下选择框架，这就选vue然后回车
```
√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
```
选择ts
```
? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    Customize with create-vue
    Nuxt
```
然后控制台出现后面这三条命令，cv就行
```
Done. Now run:
  cd test
  npm install
  npm run dev
```
2、安装less/scss

由于是使用vite,vite它提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持,但必须安装相应的预处理器依赖;

国内一般只使用 less 或 scss,所以我只写这两个安装

安装less依赖
```
npm add -D less 
```
安装scss and sass 依赖
```
npm add -D sass 
```
安装后可以直接使用less了 ,当然，也可以使用scss,一般只下一个就够了,我比较推荐scss
November 14, 2024

Blog

常用的 JS 代码片段

centos docker

VUE+VITE