动态显示与代码重构

动态显示代码

let message = `此处是css代码`
let n = 0
function showPikachu(){
    setTimeout(()=>{
        n += 1
        text.innerText = message.substr(0,n)
        style.innerText = message.substr(0,n)
        text.scrollTop = text.scrollHeight   // 滚动到底部
        if (n < message.length) {
           showPikachu()
        }
    },0)
}
showPikachu()

滚动到底部

scrollTop: 一个元素的内容垂直滚动的像素数
scrollHeight: 一个元素内容高度的度量

window.scrollTo(0, 9999999) 
xxx.scrollTop = xxx.scrollHeight

隐藏滚动条

超出页面处理

overflow-y: auto;   /* auto浏览器处理,hidden不滚动，scroll总是显示滚动条 */

隐藏滚动条，但能用滚轮

#text::-webkit-scrollbar {
            display:none
        }

JS导入模块

在一个js文件中写入

let str = "xxx"
export default str

在另一个文件中导入

import x from "./outer.js"   // x可以自定义
// 后面的代码直接使用x
console.log(x)

代码重构

import string from './style.js'
const player = {
    n: 0,
    time: 60,
    id: undefined,
    code: '',
    init: ()=>{
        player.listener()
        player.play()
    },
    ui:{
        text: document.querySelector('#text'),
        style: document.querySelector('#style')
    },
    events: {
        '#btnPause' : 'pause',
        '#btnPlay' : 'play',
        '#btnSlow' : 'slow',
        '#btnNormal' : 'normal',
        '#btnQuick' : 'quick',
        '#btnReplay' : 'replay'
    },
    listener: ()=>{
        for(const key in player.events)
          if(player.events.hasOwnProperty(key)){
              document.querySelector(key).onclick = player[player.events[key]]
          }
    },
    play: ()=>{
        player.id = setInterval(player.run, player.time)
    },
    pause: ()=> {
        window.clearInterval(player.id)
    },
    run: ()=> {
        if(player.n < string.length) {
            if (string[player.n] === "\n") {
                player.code += "<br>";
              } else if (string[player.n] === " ") {
                player.code += "&nbsp;";   // HTML的空格
              } else {
                player.code += string[player.n];   
              }
            player.n += 1
            player.ui.text.innerHTML = player.code
            player.ui.style.innerHTML = string.substring(0,player.n)
            player.ui.text.scrollTop = text.scrollHeight
        }
    },
    slow: () => {
        player.pause()
        player.time = 200
        player.play()
    },
    normal: () => {
        player.pause()
        player.time = 60
        player.play()
    },
    quick: () => {
        player.pause()
        player.time = 0
        player.play()
    },
    replay: () => {
        player.pause()
        player.n = 0
        player.play()
    }
}
player.init()

媒体查询

媒体查询一定要写在默认样式的后面，不然会被覆盖，不起作用

.pikachu {
  margin-top: 10px;
  font-size: 100px;
}
@media(max-width: 500px){
  .pikachu{
    font-size: 70px;
  }
}