打字机效果 #2

penggang-home · 2021-05-01T16:18:55Z

你好呀，想请问下首页的打字机效果怎么做的~
还有我 vuepress eject docs 释放文件过后，项目跑起来就异常了，有些东西不显示，
还有还有释放文件过后(eject)，还能压缩回去吗？拜托大佬回复一下啦~(敷衍一下也好)

JabinPeng · 2021-05-02T08:18:30Z

// 打字机代码
class TextScramble {
constructor(el) {
this.el = el
this.chars = '!<>-_\/[]{}—=+*^?#________'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 40)
const end = start + Math.floor(Math.random() * 40)
this.queue.push({ from, to, start, end })
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += <span class="dud">${char}</span>
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}

// 使用方法
const el = document.getElementById('descText')
const fx = new TextScramble(el)
const phrases = [
'我是一名前端',
'爱吃小熊饼干',
'上班只为下班',
'工资刚够早餐',
'每晚都要加班',
'只求线上平安',
'头发快要掉完',
'前端真的好难',
'只是无名前端',
'写代码的憨憨'
]
// fx.setText('写代码的憨憨')
let counter = 0
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 800)
})
counter = (counter + 1) % phrases.length
}

next()

penggang-home · 2021-05-02T16:20:47Z

欧耶，Thank you very much

HuangJianhua-Jara · 2021-06-02T05:33:36Z

大佬，这代码是怎么放进vuepress项目去的。。。（sorry,原谅我问这个很白痴的问题）但是我搞了三天，还是显示不了效果。。。。希望能看到，谢谢！！！

HuangJianhua-Jara · 2021-06-02T05:34:36Z

大佬，这代码是怎么放进vuepress项目去的。。。（sorry,原谅我问这个很白痴的问题）但是我搞了三天，还是显示不了效果。。。。希望能看到，谢谢！！！

JabinPeng · 2021-06-02T06:26:27Z

代码我是修改了node_modules里面的主题首页的源码把打字机代码加进去就可以了，如果在博客页面显示，你也可以单独写成组件，然后使用。

HuangJianhua-Jara · 2021-06-02T07:30:31Z

主题首页的源码是这里嘛？ node_modules\vuepress-theme-reco\components\HomeBlog\index.vue
还是这里？ node_modules\vuepress-theme-reco\index.js
直接用<script>括起来？
sorry，麻烦了呜呜，我还是没显示出来。。。

JabinPeng · 2021-06-02T13:38:54Z

可以再vue文件里面用 vuepress的原因需要放到生命周期内用

HuangJianhua-Jara · 2021-06-02T15:38:04Z

大佬呜呜我可以看一下您的主题首页的源码吗

JabinPeng · 2021-06-03T02:12:18Z

下面这个是home-blog.vue的代码你可以参考一下

    <ModuleTransition delay="0.04">
      <h1 v-if="recoShowModule && $frontmatter.heroText !== null" >
        {{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
      </h1>
    </ModuleTransition>

    <ModuleTransition delay="0.08">
      <p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
        {{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
      </p>
    </ModuleTransition>

    <ModuleTransition delay="0.08">
      <div id="descText" class="description">
      </div>
    </ModuleTransition>

    <ModuleTransition delay="0.08" style="margin-top: 5rem;">
        <a  class="downward" @click="down"></a>
    </ModuleTransition>
  </div>
</div>

<ModuleTransition delay="0.16">
  <div v-show="recoShowModule" class="home-blog-wrapper" >
    <div class="blog-list">
      <!-- 博客列表 -->
      <note-abstract
        :data="$recoPosts"
        :currentPage="currentPage"></note-abstract>
      <!-- 分页 -->
      <pagation
        class="pagation"
        :total="$recoPosts.length"
        :currentPage="currentPage"
        @getCurrentPage="getCurrentPage" />
    </div>
    <div class="info-wrapper">
      <PersonalInfo/>
      <h4><i class="iconfont reco-category"></i> {{homeBlogCfg.category}}</h4>
      <ul class="category-wrapper">
        <li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
          <router-link :to="item.path">
            <span class="category-name">{{ item.name }}</span>
            <span class="post-num" :style="{ 'backgroundColor': getOneColor() }">{{ item.pages.length }}</span>
          </router-link>
        </li>
      </ul>
      <hr>
      <h4 v-if="$tags.list.length !== 0"><i class="iconfont reco-tag"></i> {{homeBlogCfg.tag}}</h4>
      <TagList @getCurrentTag="getPagesByTags" />
      <h4 v-if="$themeConfig.friendLink && $themeConfig.friendLink.length !== 0"><i class="iconfont reco-friend"></i> {{homeBlogCfg.friendLink}}</h4>
      <FriendLink />
    </div>
  </div>
</ModuleTransition>

<ModuleTransition delay="0.24">
  <Content v-show="recoShowModule" class="home-center" custom/>
</ModuleTransition>

HuangJianhua-Jara · 2021-06-03T17:05:13Z

`<script>

// 打字机代码

class TextScramble {
  constructor(el) {
      this.el = el
      this.chars = '!<>-_\/[]{}—=+*^?#________'
      this.update = this.update.bind(this)
  }
  setText(newText) {
      const oldText = this.el.innerText
      const length = Math.max(oldText.length, newText.length)
      const promise = new Promise((resolve) => this.resolve = resolve)
      this.queue = []
      for (let i = 0; i < length; i++) {
          const from = oldText[i] || ''
          const to = newText[i] || ''
          const start = Math.floor(Math.random() * 40)
          const end = start + Math.floor(Math.random() * 40)
          this.queue.push({ from, to, start, end })
      }
      cancelAnimationFrame(this.frameRequest)
      this.frame = 0
      this.update()
      return promise
  }
  update() {
      let output = ''
      let complete = 0
      for (let i = 0, n = this.queue.length; i < n; i++) {
          let { from, to, start, end, char } = this.queue[i]
          if (this.frame >= end) {
              complete++
              output += to
          } else if (this.frame >= start) {
              if (!char || Math.random() < 0.28) {
                  char = this.randomChar()
                  this.queue[i].char = char
              }
              output += <span class="dud">${char}</span>
          } else {
              output += from
          }
      }
      this.el.innerHTML = output
      if (complete === this.queue.length) {
          this.resolve()
      } else {
          this.frameRequest = requestAnimationFrame(this.update)
          this.frame++
      }
  }
  randomChar() {
      return this.chars[Math.floor(Math.random() * this.chars.length)]
  }
}

export default {

mounted () {

// 使用方法

const el = document.getElementById('descText')
const fx = new TextScramble(el)
const phrases = [
        '我是一名前端',
        '爱吃小熊饼干',
        '上班只为下班',
        '工资刚够早餐',
        '每晚都要加班',
        '只求线上平安',
        '头发快要掉完',
        '前端真的好难',
        '只是无名前端',
        '写代码的憨憨'
]
// fx.setText('写代码的憨憨')
let counter = 0  
// this.next()
const next = () => { 
      fx.setText(phrases[counter]).then(() => { setTimeout(next, 800) }) 
      counter = (counter + 1) % phrases.length 
} 
next();

}
}
</script>`

谢谢博主的源码！！！but 我好菜。。。呜呜呜还是实现不了
我想再问一下，我把上面这个代码放在首页的 README.md 下面的话，是哪里错了鸭？麻烦博主了555 蟹蟹！！

JabinPeng · 2021-06-08T02:07:17Z

我不太明白你想怎么展示你可以写自己的组件在路由里面展示，也可以改主题的代码在首页展示

JabinPeng closed this as completed May 4, 2021

JabinPeng mentioned this issue Oct 29, 2021

关于首页的打字效果的可以出个教程吗 #10

Closed

JabinPeng mentioned this issue Feb 7, 2022

你好，问下首页打字机效果，和文章图片怎么搞的，能分享下吗，感谢 #19

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

打字机效果 #2

打字机效果 #2

penggang-home commented May 1, 2021

JabinPeng commented May 2, 2021

penggang-home commented May 2, 2021

HuangJianhua-Jara commented Jun 2, 2021

HuangJianhua-Jara commented Jun 2, 2021

JabinPeng commented Jun 2, 2021

HuangJianhua-Jara commented Jun 2, 2021

JabinPeng commented Jun 2, 2021

HuangJianhua-Jara commented Jun 2, 2021

JabinPeng commented Jun 3, 2021

HuangJianhua-Jara commented Jun 3, 2021

JabinPeng commented Jun 8, 2021

打字机效果 #2

打字机效果 #2

Comments

penggang-home commented May 1, 2021

JabinPeng commented May 2, 2021

penggang-home commented May 2, 2021

HuangJianhua-Jara commented Jun 2, 2021

HuangJianhua-Jara commented Jun 2, 2021

JabinPeng commented Jun 2, 2021

HuangJianhua-Jara commented Jun 2, 2021

JabinPeng commented Jun 2, 2021

HuangJianhua-Jara commented Jun 2, 2021

JabinPeng commented Jun 3, 2021

HuangJianhua-Jara commented Jun 3, 2021

JabinPeng commented Jun 8, 2021