JavaScript
10
Вклад в тег
const Person = function (startName) {
let name = ''
const getName = function () {
return name
}
const setName = function (val) {
name = val
}
return {
setName, getName
}
}; // modify this function
const personModule = Person()
personModule.setName('Kotaro')
console.log(personModule.getName())
const button = document.querySelector('кнопка в форме')
button.addEventListener('click', function(event) {
event.preventDefault()
// код для отправки формы.
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="level">
<div class="line">5%</div>
</div>
<button class="btn"></button>
</body>
</html>
<code lang="css">
.level {
width: 100%;
height: 50px;
background: #eee;
}
.line {
width: 10%;
height: 50px;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.line.active1 {
transition: 0.3s;
width: 25%;
}
.btn {
width: 10%;
height: 20px;
background: red;
margin-top: 15px;
}
</code>
let levelFull = document.querySelector('.line');
let levelBtn = document.querySelector('.btn');
let startPercent = 5
function progressActive() {
startPercent = startPercent + 25
if (startPercent > 100) startPercent = 100
levelFull.style.width = startPercent + '%'
levelFull.textContent = startPercent + ' %'
}
levelBtn.addEventListener('click', progressActive);