Как изменить начертание шрифта в javascript при каждом изменении - PullRequest
Новая
       48

Как изменить начертание шрифта в javascript при каждом изменении

0 голосов
/ 14 июля 2020

Я сделал переменный шрифт, который изменяет font-weight со 101 до 900, и хотел бы реализовать его на веб-сайте, где, пока пользователь набирает шрифт, меняет свой вес с каждой набранной буквой. * У меня вроде есть этот код прямо сейчас, но он меняет его только непосредственно на вес шрифта 900 и не go медленно об этом. Я действительно новичок в этом, поэтому я не знаю, что еще попробовать Спасибо за любую помощь !! 

<p id="testarea" contentEditable="true">
Type your text here
</p>


<button type="button" onclick="myFunction2()">uncensour</button>

<script>



document.getElementById("testarea").onchange = function() {myFunction()}
document.getElementById("testarea").addEventListener("input", myFunction)
function myFunction() {
  document.getElementById("testarea").style.fontWeight = "900";
}
function myFunction2() {
  document.getElementById("testarea").style.fontWeight = "101";
}

</script>

Ответы [ 3 ]

0 голосов
/ 14 июля 2020

Вы можете попробовать увеличить font-weight следующим образом. 

<p id="testarea" onkeyup="myFunction2()" contentEditable="true">
Type your text here
</p>


<button type="button" onclick="myFunction2()">uncensour</button>

<script>

var bold = 100;

// document.getElementById("testarea").onchange = function() {myFunction()}
// document.getElementById("testarea").addEventListener("input", myFunction)

function myFunction2() {
  document.getElementById("testarea").style.fontWeight = bold;
  bold+=100;
  console.log(bold);
}

</script>
0 голосов
/ 14 июля 2020

Я импортировал bootstrap для лучших эффектов.

СОВЕТ: выберите стиль шрифта с большим количеством шрифтов, чтобы увидеть эффект. 

document.getElementById("testarea").onchange = function() {myFunction()}
    document.getElementById("testarea").addEventListener("input", myFunction);

    var isItChanges = true;

    function myFunction() {
        document.getElementById("testarea").style.fontWeight = "900";

        var fontWeight = 100;

        if(isItChanges){

            isItChanges = false;

            var timer = setInterval(()=>{

            fontWeight = fontWeight + 15 ;

            document.getElementById("testarea").style.fontWeight = fontWeight;

            if(fontWeight > 900){
                clearInterval(timer);
            }
            },1);
        }
    }
    function myFunction2() {
        document.getElementById("testarea").style.fontWeight = "101";
        isItChanges = true;
    }
 #testarea{
        font-weight: 100;
    }
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <p id="testarea" contentEditable="true">
        Type your text here
    </p>
        
        
    <button type="button" onclick="myFunction2()">uncensour</button>
0 голосов
/ 14 июля 2020

Вы можете реализовать это с помощью события onkeypress. 

document.getElementById("testarea").onkeypress = function () { myFunction() }
document.getElementById("testarea").addEventListener("input", myFunction);
var initWeight = 101;
function myFunction() {
    document.getElementById("testarea").style.fontWeight = initWeight++;
}
function myFunction2() {
    document.getElementById("testarea").style.fontWeight = "101";
}
<p id="testarea" contentEditable="true">
    Type your text here
</p>


<button type="button" onclick="myFunction2()">uncensour</button>
...