动态显示代码

  1. let message = `此处是css代码`
  2. let n = 0
  4. function showPikachu(){
  5.     setTimeout(()=>{
  6.         n += 1
  7.         text.innerText = message.substr(0,n)
  8.         style.innerText = message.substr(0,n)
  9.         text.scrollTop = text.scrollHeight   // 滚动到底部
  10.         if (n < message.length) {
  11.            showPikachu()
  12.         }
  13.     },0)
  14. }
  16. showPikachu()

滚动到底部

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

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

隐藏滚动条

超出页面处理

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

隐藏滚动条，但能用滚轮

  1. #text::-webkit-scrollbar {
  2.             display:none
  3.         }

JS导入模块

在一个js文件中写入

  1. let str = "xxx"
  2. export default str

在另一个文件中导入

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

代码重构

  1. import string from './style.js'
  3. const player = {
  4.     n: 0,
  5.     time: 60,
  6.     id: undefined,
  7.     code: '',
  8.     init: ()=>{
  9.         player.listener()
  10.         player.play()
  11.     },
  12.     ui:{
  13.         text: document.querySelector('#text'),
  14.         style: document.querySelector('#style')
  15.     },
  16.     events: {
  17.         '#btnPause' : 'pause',
  18.         '#btnPlay' : 'play',
  19.         '#btnSlow' : 'slow',
  20.         '#btnNormal' : 'normal',
  21.         '#btnQuick' : 'quick',
  22.         '#btnReplay' : 'replay'
  23.     },
  24.     listener: ()=>{
  25.         for(const key in player.events)
  26.           if(player.events.hasOwnProperty(key)){
  27.               document.querySelector(key).onclick = player[player.events[key]]
  28.           }
  29.     },
  30.     play: ()=>{
  31.         player.id = setInterval(player.run, player.time)
  32.     },
  33.     pause: ()=> {
  34.         window.clearInterval(player.id)
  35.     },
  36.     run: ()=> {
  37.         if(player.n < string.length) {
  38.             if (string[player.n] === "\n") {
  39.                 player.code += "<br>";
  40.               } else if (string[player.n] === " ") {
  41.                 player.code += "&nbsp;";   // HTML的空格
  42.               } else {
  43.                 player.code += string[player.n];   
  44.               }
  45.             player.n += 1
  46.             player.ui.text.innerHTML = player.code
  47.             player.ui.style.innerHTML = string.substring(0,player.n)
  48.             player.ui.text.scrollTop = text.scrollHeight
  49.         }
  50.     },
  51.     slow: () => {
  52.         player.pause()
  53.         player.time = 200
  54.         player.play()
  55.     },
  56.     normal: () => {
  57.         player.pause()
  58.         player.time = 60
  59.         player.play()
  60.     },
  61.     quick: () => {
  62.         player.pause()
  63.         player.time = 0
  64.         player.play()
  65.     },
  66.     replay: () => {
  67.         player.pause()
  68.         player.n = 0
  69.         player.play()
  70.     }
  72. }
  74. player.init()

媒体查询

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

  1. .pikachu {
  2.   margin-top: 10px;
  3.   font-size: 100px;
  4. }
  5. @media(max-width: 500px){
  6.   .pikachu{
  7.     font-size: 70px;
  8.   }
  9. }