Построение генератора пишущей машинки, определяющего размер шрифта в зависимости от скорости набора - PullRequest
Новая
       10

Построение генератора пишущей машинки, определяющего размер шрифта в зависимости от скорости набора

0 голосов
/ 10 мая 2019

Это решено: https://codepen.io/danborjesson/pen/qGjMzw

РЕДАКТИРОВАНИЕ:

Я создаю генератор текста, который будет изменять вес шрифта в зависимости от скорости, которую вы набираете. Это Codepen , показывающее, что у меня есть.

Он содержит функцию, которая запускает таймер при каждом нажатии клавиши, и способ изменения веса шрифта при одном и том же действии. Однако не зависит друг от друга.

Возможно ли получить значение из этого javascript: 

    var last;
var output = $('#output');
$('#text').on('input', function() {
    var n = new Date()
    output.text((last - n) + ' ms');
    last = n;
});

В этом, вместо 900, чтобы упростить. 

function myFunction(event) {
  document.getElementById("text").style.fontWeight = "900";
}

Я не могу найти способ! Вся помощь приветствуется!

/ Р

1 Ответ

1 голос
/ 12 мая 2019

Вы делаете это слишком сложным для себя.Не смешивайте встроенные JS с одним в файле.Просто добавьте второй слушатель для вашего поля text и используйте нужные значения.Также кажется, что keyup будет нужным вам событием, а не keypress.Еще одна вещь, которую вы должны проверить, это вычисление ms, вы, вероятно, хотели получить положительное значение, которое было бы n - last. 

let last, ms, n;
let output = $('#output');

$('#text').on('input', function() {
    n = new Date();
    ms = n - last;
    output.text(ms + ' ms');
    last = n;
});

$('#text').on('keyup', function() {
    console.log(ms);
    this.style.fontWeight = "900";
});

let i = 0;
$(document).ready(function(){
  $("input").keypress(function(){
    $("span").text(i += 1 );
  });
});
@import url(https://use.typekit.net/obu1vfn.css:);

html,
body {
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;  
}

list {
    font-family: orator-std, monospace;
    font-weight: 400;
    font-size: 14px;
    margin-top: 2em;
    padding: 2rem;
}

button, input {
    border: none;
    font-weight: 100;
    width: 800px;
    height: 200px;
     font-family: ibm-plex-sans, sans-serif;
    font-size: 5rem;
    color: #11111;
    
    /**transition: font-weight .5s ease-in-out;
    &:hover,
    &.be-bold {
        font-weight: (900);
        cursor: pointer;
   
    }**/
}

   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<list>
//HOVER_THE_BOX:
<br>
//KEYPRESSES: <span>0</span> TIMES
<br>
//TIME SINCE LAST PRESS:
<div id="output"></div></list>

<input id="text" placeholder="Type here">
...