Автоматическое возобновление для текущих проектов

внешний интерфейс JavaScript CSS
Автоматическое возобновление для текущих проектов

Введение в проект

Резюме, которое может автоматически воспроизводить процесс написания, в основном используя знания нативного JS и CSS3.

Используемые библиотеки:

  1. prism
  2. marked

Ссылки по теме

  1. Предварительный просмотр меня
  2. исходный код нажмите на меня

процесс проектирования

Основная идея - двигаться

  1. Найдите способ, чтобы текст появлялся на странице один за другим.

    setTimeout(()=>{
    document.body.innerHTML='1'
},1000)
setTimeout(()=>{
    document.body.innerHTML='2'
},2000)
setTimeout(()=>{
    document.body.innerHTML='3'
},3000)

  2. Это сработало, но это глупо, почему бы нам не попробоватьsetIntervalплюсslice()илиsubstring()

    var result = '1234567890'
var n = 0
setInterval(()=>{
    n += 1
    document.body.innerHTML = result.substring(0,n)
},500)

    slice()иsubstring()Разница в том,substring()Отрицательные аргументы не принимаются

  3. И начинаются, и заканчиваются. Найдите способ отключить будильник

    var result = '1234567890'
var n = 0
var clock = setInterval(()=>{
    n += 1
    document.body.innerHTML = result.substring(0,n)
   if(n>=result.length){
       window.clearInterval(clock)
   }
},500)

переключиться на CSS

  1. Замените содержимое с помощью CSS

    var result = `
body{
   background:green;
}
`
var n = 0
var clock = setInterval(()=>{
   n += 1
   document.body.innerHTML = result.substring(0,n)
  if(n>=result.length){
      window.clearInterval(clock)
  }
},500)

    Запустить его. Черный вопросительный знак - мой разрыв строки исчез? ? ?

    Это потому, что вВ HTML, если несколько невидимых символов появляются подряд, браузер будет думать, что это пробел.

  2. использовать<pre>Этикетка

    HTML<pre>Элементы представляют собой предопределенный форматированный текст. Текст в этом элементе обычно отображается моноширинным шрифтом в соответствии с макетом в исходном файле, и в тексте будут отображаться пробельные символы (например, пробелы и символы новой строки).

    добавить в HTML<pre>тег, напишите содержимое в<pre>середина

    <body>
<pre id="code"></pre>
</body>

    var result = `
body{
    background:green;
}
`
var n = 0
var clock = setInterval(()=>{
    n += 1
    code.innerHTML = result.substring(0,n)
   if(n>=result.length){
       window.clearInterval(clock)
   }
},100)

  3. код приложения

    Сейчас мы просто показываем код, но видим эффект, поэтому напишем код на<style>середина

    <head>
  <style id="myStyle"></style>
</head>
<body>
<pre id="code"></pre>
</body>

    var result = `
body{
    background:green;
}
`
var n = 0
var clock = setInterval(()=>{
    n += 1
    code.innerHTML = result.substring(0,n)
    myStyle.innerHTML = result.substring(0,n)
   if(n>=result.length){
       window.clearInterval(clock)
   }
},500)

идеальные детали

  1. нет эффекта? Поскольку текст также написан на

    Обходной путь: закомментируйте содержимое CSS

    /*你好，我是不远，一名前端工程师。
请允许我做一个简单的自我介绍，但是文字太单调，所以我想来点特别的。
首先我准备一下样式。
*/
*{
	transition: all 1s;
}
html{
	background:#363636
	color:#fff;
	font-size:16px;
}

  2. Подсветка кода? Первое, о чем нужно подумать, это решить эту проблему,

    <span style="color":red;>html</span>

    Но такой синтаксис не разрешен в CSS.

    • Способ 1: украсть балку и заменить колонну
         var n = 0
     var clock = setInterval(()=>{
         n += 1
         code.innerHTML = result.substring(0,n)
         code.innerHTML = code.innerHTML.replace('html','<span style="color:red;">html</span>')
         myStyle.innerHTML = result.substring(0,n)
        if(n>=result.length){
            window.clearInterval(clock)
        }
     },500)

    Однако это глупо и утомительно, и хорошие программисты должны научиться быть ленивыми.

    • Способ 2: prism.js После введения файлов JS и CSS официального сайта prism

      var n = 0
var clock = setInterval(() => {
    n += 1
    code.innerHTML = result.substring(0, n)
    code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css)
    //修改code为prism提供的样式
    myStyle.innerHTML = result.substring(0, n)
    if (n >= result.length) {
        window.clearInterval(clock)
    }
}, 50)

  3. Изменения подсветки кода Нам нужно сделать так, чтобы код по умолчанию выглядел ничем не примечательным, а затем добавить эффект подсветки. Это повысит зрительную оценку.

    • установить стиль по умолчанию Нам нужно ввести CSS-файл стиля по умолчанию в html, содержимое — это настройки стиля по умолчанию для кода.

      .token.selector{
    color: black;
}
.token.property{
    color: black;
}
.token.punctuation{
    color: black;
}

    • Установить стиль выделения

      .token.selector{
  color: #a6e22e;
}
.token.property{
  color: #f92672;
}
.token.punctuation{
  color: #f8f8f2;
}

    • Примечание 1: имя вышеуказанного класса предоставлено призмой, и имя можно увидеть, проверив элемент.

    • Примечание 2. Файлы CSS следует размещать под импортированным стилем призмы во избежание перезаписи.

добавить html-элемент

  1. После запуска CSS выполняется вторая функция для управления html, а третья функция управляет стилем html.

    var n = 0
var clock = setInterval(() => {
//原代码不变
	if (n >= result.length) {
		window.clearInterval(clock)
		fn2()
        fn3()
    }
}, 10)

  2. определить fn2()

    function fn2(){
    var paper = document.createElement('div')
    paper.id = 'paper'
    document.body.appendChild(paper)
}

  3. Определите fn3() как левую и правую структуру, выполните fn3(){}

    function fn3(preResult) {
    var result = `
#paper{
    width:200px;
    height:400px;
    background:#F1E2C3;
}
    `
    var n = 0
    var clock = setInterval(() => {
        n += 1
        code.innerHTML = preResult + result.substring(0, n)
        code.innerHTML = Prism.highlight(code.innerHTML, Prism.languages.css)
        myStyle.innerHTML = preResult + result.substring(0, n)
        if (n >= result.length) {
            window.clearInterval(clock)
        }
    }, 10)
}

функция-оболочка

  1. функция-оболочка
  /*把code写到#code和style标签里面*/
  function writeCode(code){
      let domCode = document.querySelector('#code')
      let n = 0
      var clock = setInterval(() => {
          n += 1
          domCode.innerHTML = Prism.highlight(code.substring(0, n), Prism.languages.css)
          myStyle.innerHTML = code.substring(0, n)
          if (n >= code.length) {
              window.clearInterval(clock)
          }
      }, 10)
  }
  //封装
  var result = `......`
  writeCode(cssCode)
  //调用(原result内容)

  1. Перезвони

    После инкапсуляции, когда мы хотим вызвать сразуf2(), опять смутился. так какsetInterval()это будильник (асинхронный), поэтому после установки будильника он сработает сразуf2(), но правильная логика выполнения находится вcodeЗвоните после написанияf2()

    • Не дожидаясь результатовэтоасинхронный

    • ПерезвониЭто способ получить асинхронные результаты (вы также можете получить синхронные результаты)

  2. Чтобы предотвратить перезапись предыдущего кода, мы добавляем параметрprefix

    function writeCode(prefix,code,fn){
//....
        }
    }, 10)
}

  3. функция вызова

    При первом вызове контента раньше не было, поэтому мыprefixза''

    function writeCode(prefix, code, fn) {
    let domCode = document.querySelector('#code')
    let n = 0
    var clock = setInterval(() => {
        n += 1
        domCode.innerHTML = Prism.highlight(prefix + code.substring(0, n), Prism.languages.css)
        myStyle.innerHTML = prefix + code.substring(0, n)
        if (n >= code.length) {
            window.clearInterval(clock)
            fn.call()
        }
    }, 10)
}

    функция вызова

    writeCode('', cssCode, () => {
    createPaper(() => {
        writeCode(cssCode, htmlCode)
    })
})

Продолжайте уточнять детали

  1. Оптимизируйте окно отображения кода, чтобы оно было таким же высоким, как окно отображения; установите его как

    #code{
    height: 100vh;
    overflow: hidden;
}

  2. Автоматически прокрутите код вниз, а затем добавьте код в инкапсулированную функцию.

  function writeCode(prefix, code, fn) {
  //...
          domCode.scrollTop=domCode.scrollHeight
  //...        
      }, 10)
  }

Element.scrollTopСвойство может получить или задать количество пикселей, на которое содержимое элемента прокручивается по вертикали.

  1. scrollIntoView()метод:

    Если окно отображения настроено наoverflow: auto;илиoverflow: scroll;автоматически тянет вниз

    Element.scrollIntoView(false)

    element.scrollIntoView(false)прокрутить вниз

    element.scrollIntoView(true)прокрутить вверх

    Другие параметры:

    • behaviorпо желанию

      определить анимацию плавности,"auto", "instant", или"smooth"один. По умолчанию"auto".

    • blockпо желанию

      "start", "center", "end", или"nearest"один. По умолчанию"center".

    • inlineпо желанию

      "start", "center", "end", или"nearest"один. По умолчанию"nearest".

      element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

Добавить страницу отображения резюме

Напишите JS, чтобы увеличить окно отображения для написания содержимого резюме. Аналогично окну отображения кода

function writeMarkdown(markdown, fn) {
    let domPaper = document.querySelector('#paper')
    let n = 0
    var clock = setInterval(() => {
        n += 1
        domPaper.innerHTML = Prism.highlight(markdown.substring(0, n), Prism.languages.markdown)
        domPaper.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"})
        if (n >= markdown.length) {
            window.clearInterval(clock)
            fn.call()
        }
    }, 10)

в синтаксис уценки

Используйте сторонние библиотеки**marked.js**

    document.querySelector('#paper').innerHTML = marked(markdown)
    fn.call()
}

На этом написание в основном закончено, а остальное — последовательность асинхронных вызовов функций. Затем медленно измените стиль CSS. ты можешь закончить работу

- не далеко

Категории