167 lines
4.8 KiB
HTML
167 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lekcja 3</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
textarea {
|
|
resize: none;
|
|
}
|
|
.widok {
|
|
width: 440px;
|
|
height: 440px;
|
|
position: relative;
|
|
border: 1px solid black;
|
|
}
|
|
.wskaznik {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: orange;
|
|
border: 3px solid black;
|
|
border-radius: 100%;
|
|
|
|
top: 100px;
|
|
left: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h2>4</h2>
|
|
<div class="widok">
|
|
<div class="wskaznik"></div>
|
|
</div>
|
|
<script>
|
|
const wskaznik = document.getElementsByClassName("wskaznik")[0];
|
|
let y = parseInt(wskaznik.style.top)
|
|
let x = parseInt(wskaznik.style.left)
|
|
|
|
let tryb = 0
|
|
let licznik_goradol = 100
|
|
let licznik_lewoprawo = 150
|
|
|
|
setInterval(function() {
|
|
let rad = 0
|
|
let offset_x = 0
|
|
let offset_y = 0
|
|
switch(tryb) {
|
|
case 0:
|
|
offset_x = 100
|
|
offset_y = 0
|
|
licznik_goradol++
|
|
rad = licznik_goradol * (Math.PI/100)
|
|
if (licznik_goradol % 100 == 0) { tryb++ }
|
|
break
|
|
case 1:
|
|
offset_x = 200
|
|
offset_y = 100
|
|
licznik_lewoprawo++
|
|
rad = licznik_lewoprawo * (Math.PI/100)
|
|
if (licznik_lewoprawo % 100 == 50) { tryb++ }
|
|
break
|
|
case 2:
|
|
offset_x = 100
|
|
offset_y = 200
|
|
licznik_goradol++
|
|
rad = licznik_goradol * (Math.PI/100)
|
|
if (licznik_goradol % 100 == 0) { tryb++ }
|
|
break
|
|
case 3:
|
|
offset_x = 0
|
|
offset_y = 100
|
|
licznik_lewoprawo++
|
|
rad = licznik_lewoprawo * (Math.PI/100)
|
|
if (licznik_lewoprawo % 100 == 50) { tryb = 0 }
|
|
break
|
|
}
|
|
|
|
y = (Math.sin(rad) + 1) * 100 + offset_y
|
|
x = (Math.cos(rad) + 1) * 100 + offset_x
|
|
|
|
wskaznik.style.top = `${y}px`
|
|
wskaznik.style.left = `${x}px`
|
|
}, 25)
|
|
</script>
|
|
|
|
<hr>
|
|
<h2>2</h2>
|
|
<input style="font-family: monospace;" type="text" name="whata" id="frika" size="42">
|
|
<script>
|
|
let string = " Ciekawe czy uda Ci się to zrobić "
|
|
const pole = document.querySelector("#frika")
|
|
pole.value = string
|
|
|
|
setInterval(function () {
|
|
string = `${string}${string[0]}`;
|
|
string = string.substring(1, string.length)
|
|
pole.value = string
|
|
}, 250);
|
|
</script>
|
|
|
|
<hr>
|
|
<h2>3</h2>
|
|
<pre><textarea name="tablice" id="tablice" cols="40" rows="10"></textarea></pre>
|
|
<script>
|
|
const textarea = document.getElementById("tablice")
|
|
const tablica = new Array()
|
|
let wylosowano = 0
|
|
|
|
function getRandomInt(min, max) { // z w3
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
}
|
|
|
|
setInterval(function () {
|
|
let wiersz = '';
|
|
for (let i = 0; i < 40; i++) {
|
|
let losuj = Math.random()
|
|
if (losuj < 0.05) {
|
|
losuj = Math.random()
|
|
if (losuj < 0.5) {
|
|
wiersz += String.fromCharCode(getRandomInt(65, 90));
|
|
} else {
|
|
wiersz += String.fromCharCode(getRandomInt(97, 122));
|
|
}
|
|
} else {
|
|
wiersz += ' ';
|
|
}
|
|
}
|
|
wylosowano++
|
|
if (wylosowano > 10) {
|
|
tablica.unshift('')
|
|
if (wylosowano > 20) {
|
|
wylosowano = 0
|
|
}
|
|
} else {
|
|
tablica.unshift(wiersz)
|
|
}
|
|
if (tablica.length > 10) { tablica.pop() }
|
|
|
|
textarea.value = tablica.join('\n')
|
|
}, 250)
|
|
</script>
|
|
|
|
<hr>
|
|
<h2>1</h2>
|
|
<img src="img.png" alt="gitea" style="width: 200px;">
|
|
<script>
|
|
const img = document.getElementsByTagName("img")[0];
|
|
let zwieksz = true;
|
|
|
|
setInterval(function () {
|
|
let szer = parseInt(img.style.width)
|
|
|
|
zwieksz ? szer += 10 : szer -= 10
|
|
if (szer >= 300 | szer <= 10) { zwieksz = !zwieksz }
|
|
|
|
img.style.width = szer + 'px';
|
|
}, 100);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |