Цель работы
Изучить возможности управления процессами во времени: методы setInterval() и setTimeout(); познакомиться с приемами реализации перемещения и движения объектов; научиться отображать графики. Изучить способ создания меню на JavaSript.
Задания
Задание 1
Создать программу на JS, позволяющую перетащить мышью область текста и картинку.
Решение
Html 
<img id="img1" src="java-script.svg" onmousedown="dragImg()">
<textarea id="text1" onmousedown="dragText()">Lorem ipsum</textarea>
Java Script 
// для изображения
const img = document.getElementById('img1')
let canMoveImg = false

function dragImg() {
    canMoveImg = true
}
                                
img.addEventListener('mousemove', (e) => {
    if(canMoveImg){
        img.style.top = `${e.pageY - 50}px`
        img.style.left = `${e.pageX - 50}px`
    }
})
                                
img.onmouseup = () => {
    canMoveImg = false
}


// для текстовой области
const text = document.getElementById('text1')
let canMoveText = false

function dragText() {
    canMoveText = true
}
                                
text.addEventListener('mousemove', (e) => {
    if(canMoveText){
        text.style.top = `${e.pageY - 50}px`
        text.style.left = `${e.pageX - 50}px`
    }
})
                                
text.onmouseup = () => {
    canMoveText = false
}
Выполнить код
Задание 2
Создать программу на JS, организующую движение картинки по прямой линии.
Решение
Html 
<img id="img1" src="java-script.svg">
Java Script 
let img = document.getElementById('img1')
img.onclick = () => {
    let dx = 0
    let id = setInterval(frame, 5)
                            
    function frame() {
        if (dx == 350)
            clearInterval(id)
        else {
            dx++
            img.style.left = dx + 'px'
        }
    }
}
Задание 3
Создать программу на JS, организующую движение картинки по кривой линии и возврат ее в исходное состояние.
Решение
Html 
<img id="img1" src="java-script.svg">
Java Script 
let id = document.getElementById('img1')
id.onclick = () => {
    let x = 0
    let z = 400
    let interval = setInterval(move, 2)
                            
    function move(){
        if(x >= 400){
            z--
            let exprY = Math.sqrt(100*z)
            id.style.top = exprY + 'px'
            id.style.left = z + 'px'
                            
            if(z == 0)
                clearInterval(interval)
        }
        else{
            x++
            let exprY = Math.sqrt(100*x)
            id.style.top = exprY + 'px'
            id.style.left = x + 'px'
        }
    }
}
Задание 4, Задание 5*
Нарисовать график функции, выбрав функцию с помощью радио кнопки (y=x2, y=x3, y=sin(x), y=cos(x)).
Реализовать выбор цвета графика функции с помощью списка.
Решение
Html 
<input type="radio" name="graph" id="square" value="1"> y = x2
<input type="radio" name="graph" value="2"> y = x3
<input type="radio" name="graph" value="3"> y = sin(x)
<input type="radio" name="graph" value="4"> y = cos(x)
Выбрать цвет графика<input type="color" class="graphColor">
Java Script 
let color = document.querySelector('.graphColor').value

let graph = document.forms[0].graph
for(let i = 0; i < graph.length; i++)
    if(graph[i].checked)
        graph = graph[i].value
                            
let x = 0
let interval = setInterval(move, 1)
                            
function move(){
    if(x < 100){
        x++
        let functions = new Array(
            Math.pow(x,2),
            Math.pow(x,3),
            Math.sin(x),
            Math.cos(x),
        )
                            
        let exprY = functions[Number.parseInt(graph) - 1]
        let div = document.createElement('div')

        div.innerHTML =('<span style="position: absolute; top:' 
            + exprY + 'px; left: ' + x + 'px; width: 5px; height: 5px;'
            + 'border-radius: 50%; background:' + color + ';"></span>')
        
        document.getElementById("wrap").appendChild(div)
    }
    else
        clearInterval(interval)
}
Выполнить код
Задание 6
Создайте меню, используя средства HTML/CSS/JS.
Решение
Html 
<div class="menu-temp">
    <div class="item">
        <span class="item-title">Пункт 1</span>
        <div class="sub-menu">
            <span class="sub-item">Подпункт 1</span>
            <span class="sub-item">Подпункт 2</span>
            <span class="sub-item">Подпункт 3</span>
        </div>
    </div>

    <div class="item">
        <span class="item-title">Пункт 2</span>
        <div class="sub-menu">
            <span class="sub-item">Подпункт 1</span>
            <span class="sub-item">Подпункт 2</span>
            <span class="sub-item">Подпункт 3</span>
        </div>
    </div>
                                
    <div class="item">
        <span class="item-title">Пункт 3</span>
        <div class="sub-menu">
            <span class="sub-item">Подпункт 1</span>
            <span class="sub-item">Подпункт 2</span>
            <span class="sub-item">Подпункт 3</span>
        </div>
    </div>
</div>
CSS 
.menu-temp{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
}
                            
.menu-temp span{
    padding: 1vh 1vw;
}
                            
.item{
    display: flex;
    flex-direction: column;
    position: relative;
}
                            
.item-title{
    text-align: center;
    width: 10vw;
    border-left: 1px solid #00000049;
    border-right: 1px solid #00000049;
    transition: background-color .21s ease-in-out;
}
                            
.item:hover .item-title{
    background-color: #00000004;
    transition: background-color .17s ease-in-out;
}
                            
.sub-menu{
    display: flex;
    overflow: hidden;
    height: 0;
    opacity: 0;
    flex-direction: column;
    transition: all .31s ease;
}
                            
.sub-item{
    text-align: center;
    width: calc(100% - 2vw);
    transition: background-color .21s ease-in-out;
}
                            
.sub-item:hover{
    background-color: #00000007;
    transition: background-color .17s ease-in-out
}
Java Script 
let item = document.querySelectorAll('.item')
for(let i = 0; i < item.length; i++){
    item[i].addEventListener('mouseover', showMenu, false)
    item[i].addEventListener('mouseout', hideMenu, false)
}
                        
function showMenu(){
    if(this.children.length > 1){
        this.children[1].style.height = 'auto'
        this.children[1].style.opacity = 1
        this.children[1].style.overflow = 'visible'
    }
    else
        return false
}
                        
function hideMenu(){
    if(this.children.length > 1){
        this.children[1].style.height = 0
        this.children[1].style.opacity = 0
        this.children[1].style.overflow = 'hidden'
    }
    else
        return false
}