<textarea id=txt oninput='send(this.value)'></textarea>
<script>
async function send(text){await fetch('script.php?text=' + text)};
async function get(){txt.value = await (await fetch('file.txt')).text()};
get();
setInterval(get, 5000);
txt.focus();
</script>$text = $_GET['text'];
$file = fopen('file.txt', 'w');
fwrite($file, $text);
fclose($file);<textarea id=txt cols=50 rows=10 oninput='array.push(this.value)' placeholder='введите текст:'></textarea><br /><br />
<button onclick='read()'> прочитать </button>
<button onclick='reset()'> очистить </button>
<script>
let array = [];
const read = _ => {
let index = 0;
let interval = setInterval(function(){
txt.value = array[index];
index ++;
if(index >= array.length) clearInterval(interval);
}, 300);
}
const reset = _ => {
txt.value = '';
array = [];
}
txt.focus();
</script>const a = 'https://www.w3schools.com/html/mov_bbb.mp4';
const b = 'https://assets.codepen.io/6093409/hubspot-video-example.mp4';
const arr = [a, b];
arr.map((item) => {
let media = new Audio(item);
media.onloadedmetadata = function () {
let date = new Date(this.duration * 1000);
let h = date.getUTCHours();
h = h ? h + ':' : '';
let m = date.getMinutes();
let s = date.getSeconds();
console.log(h + m + ':' + s);
};
});Страна: <select id="country_id" class="StyleSelectBox">
<option value="0">- выберите страну -</option>
<option value="1">Россия</option>
<option value="2">Украина</option>
<option value="3">Белорусь</option>
</select>
<br /><br />Регион:
<select id="region_id" disabled>
<option value="0">- Выберите регион -</option>
</select></td><td>
<br /><br />Город:
<select id="city_id" disabled>
<option value="0">- Выберите город -</option>
</select>var all_regions=[];
var all_cites=[[],[],[]];
all_regions[0]=["московская обл","ростовская обл","саратовская обл"];
all_regions[1]=["киевская обл","львовская обл","харьковская обл"];
all_regions[2]=["минская обл","брестская обл","гроднинская обл"];
all_cites[0][0]=["Москва","Химки","Калуга"];
all_cites[0][1]=["Такой-то город","Такой-то город","Калуга"];
all_cites[0][2]=["Такой-то город","Такой-то город","Такой-то город"];
all_cites[1][0]=["Киев","Жмеринка","Бердычев"];
all_cites[1][1]=["Львов","Сокаль","Стрый"];
all_cites[1][2]=["Харьков","Полтава","Пирятин"];
all_cites[2][0]=["Минск","Такой-то город","Такой-то город"];
all_cites[2][1]=["Брест","Такой-то город","Такой-то город"];
all_cites[2][2]=["Гродно","Такой-то город","Вильно"];
country_id.onchange=function(){
region_id.disabled=false;
region_id.innerHTML="<option value='0'>- Выберите регион -</option>";
myregion=this.value-1;
if(myregion!=-1){
for(var i=0;i<all_regions[myregion].length;i++){
region_id.innerHTML+='<option value="'+(i+1)+'">'+all_regions[myregion][i]+'</option>';
}
}else{
region_id.disabled=true;
city_id.disabled=true;
}
}
region_id.onchange=function(){
city_id.disabled=false;
city_id.innerHTML="<option value='0'>- Выберите город -</option>";
var mycite=this.value-1;
if(mycite!=-1){
for(var i=0;i<all_cites[myregion][mycite].length;i++){
city_id.innerHTML+='<option value="'+(i+1)+'">'+all_cites[myregion][mycite][i]+'</option>';
}
}else{
city_id.disabled=true;
}
}<html>
<head>
<title>визуализатор</title>
<meta charset="utf-8" />
<style>
body{
background: #003;
font-family: arial;
}
#myCanvas{
border-width: 3px;
border-color: white;
border-radius: 15px;
border-style: solid;
box-shadow: 0 0 15px 15px #7e7;
animation: spin-counter 5s linear infinite;
}
@keyframes spin-counter {
from{
box-shadow: 0 0 5px 5px #7e7;
border-color: white;
}
to{
box-shadow: 0 0 15px 15px pink;
border-color: gold;
}
}
</style>
</head>
<body><center>
<canvas id="myCanvas" width=1024 height=256 style="background:blue"></canvas><br /><br />
<audio src=sound.mp3' controls></audio>
</center></body>
<script>
var audio = document.querySelector('audio');
audio.onplay = function(){
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(audio);
var analyser = audioCtx.createAnalyser();
source.connect(analyser); // Подключаем анализатор к элементу audio
analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var counter = 0;
setInterval(function(){
analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
ctx.fillStyle = "black"; // Задаём цвет фона
ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос
ctx.fillRect (0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
ctx.globalAlpha = 1;
ctx.strokeStyle = '#3f9';
ctx.beginPath();
ctx.moveTo(Math.floor(150 * Math.sin(counter / 1)), 255 - frequencyData[0]);
for(i = 1; i < 1024; i ++) ctx.lineTo(i + Math.floor(350 * Math.sin(i / 15)), 255 - frequencyData[i]);
ctx.stroke();
counter ++;
}, 20);
}
</script>
</html><canvas id=canvas width=200 height=200></canvas>let r = 90; // радиус
let amountOfPoints = 7; // количество точек
let x, y;
let ctx = canvas.getContext('2d');
for(i = 0; i < Math.PI * 2; i += Math.PI * 2 / amountOfPoints){
x = canvas.width / 2 + r * Math.sin(i);
y = canvas.height / 2 + r * Math.cos(i);
ctx.fillRect(x, y, 2, 2);
}<meta charset='utf-8' />
<script src="id3-minimized.js"></script>
<?php
$files = scandir('audio');
$id = 0;
for($i = 2; $i < count($files); $i ++){
echo '<table><tr><td>
<img id=picture'.$id.' />
</td><td>
<table class=list>
<tr><td><b>Название трека: </b></td><td></td></tr>
<tr><td><b>Исполнитель: </b></td><td></td></tr>
<tr><td><b>Альбом: </b></td><td></td></tr>
<tr><td><b>Жанр: </b></td><td></td></tr>
<tr><td><b>Год записи: </b></td><td></td></tr>
</table>
</tr></td></table>
<audio src="audio/'.$files[$i].'" controls></audio>';
$id ++;
}
?>
<script>
let id3Array = 'title, artist, album, genre, year, picture'.split(', ');
let tracs = document.querySelectorAll('audio');
let tags = [];
let amountOfTracks = <?=count($files) - 2; ?>;
for(j = 0; j < amountOfTracks; j ++){
let url = tracs[j].src;
ID3.loadTags(url, function() {
tags[j] = ID3.getAllTags(url);
let image = tags[j].picture;
if(image){
document.getElementById('picture' + j).style.display = 'block';
let base64String = "";
for(let i = 0; i < image.data.length; i ++) base64String += String.fromCharCode(image.data[i]);
let base64 = "data:" + image.format + ";base64," + window.btoa(base64String);
document.getElementById('picture' + j).src = base64;
}else{document.getElementById('picture' + j).style.display = 'none'};
},{
tags: id3Array
});
for(i = 0; i < id3Arraylength - 1; i ++) document.querySelectorAll('.list')[j].querySelectorAll('td')[i * 2 + 1].innerText = eval('tags[j].' + id3Array[i]);
}
</script><style>
li{
width: 200px;
border-radius: 5px;
}
</style>
<audio id=audio controls></audio><br /><br />
<b>Альбомы: </b>
<a href=# class=selectAlbum>album1</a> |
<a href=# class=selectAlbum>album2</a> |
<a href=# class=selectAlbum>album3</a><br /><br />
<b>Треки:</b>
<ul id=playlist></ul>
<script>
let selectedAlbum;
let album1=[
{
name: 'name1',
artist: 'artist1',
src: 'track1.mp3'
},
{
name: 'name2',
artist: 'artist2',
src: 'track2.mp3'
},
{
name: 'name3',
artist: 'artist3',
src: 'track3.mp3'
}
];
let album2=[
{
name: 'name4',
artist: 'artist4',
src: 'track4.mp3'
},
{
name: 'name5',
artist: 'artist5',
src: 'track5.mp3'
},
{
name: 'name6',
artist: 'artist6',
src: 'track6.mp3'
}
];
let album3=[
{
name: 'name7',
artist: 'artist7',
src: 'track7.mp3'
},
{
name: 'name8',
artist: 'artist8',
src: 'track8.mp3'
},
{
name: 'name9',
artist: 'artist9',
src: 'track9.mp3'
}
];
let albums = document.querySelectorAll('.selectAlbum');
for(i = 0; i < albums.length; i ++){
albums[i].onclick = function(){
audio.pause();
playlist.innerText = '';
selectedAlbum = eval(this.innerText);
for(j = 0; j < selectedAlbum.length; j ++){
let li = document.createElement('li');
li.id = j;
li.style.cursor = 'pointer';
li.innerHTML = ' ' + selectedAlbum[j].artist + ' - ' + selectedAlbum[j].name;
li.onclick = function(){
for(h = 0; h < selectedAlbum.length; h ++)document.getElementById(h).style.background = 'white';
this.style.background = 'gold';
audio.src = 'audio/' + selectedAlbum[this.id].src;
audio.play();
}
playlist.append(li);
}
}
}
</script>const arr = [1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 6, 7, 8, 11, 13, 31, 31, 44, 51, 81, 65, 63];
const target = prompt("enter number", "52");
console.log('Список всех вариантов комбинаций:');
for(a = 0; a < 2 ** arr.length; a ++){
let sum = 0;
let result = '';
let b = a;
let r = 0;
while(r < arr.length){
let c = b;
b = Math.floor(b / 2);
if(b * 2 != c){
sum += arr[r];
result += ' + ' + arr[r];
}
r ++;
}
if(sum == target) console.log(result.substring(3));
}var player = document.getElementById('player');
player.onplay = function() {
var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(player);
var analyser = audioCtx.createAnalyser();
source.connect(analyser); // Подключаем анализатор к элементу audio
analyser.connect(audioCtx.destination); // Без этой строки нет звука, но анализатор работает.
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
setInterval(function() {
analyser.getByteFrequencyData(frequencyData); // Записываем в массив данные уровней частот
ctx.fillStyle = "blue"; // Задаём цвет фона
ctx.globalAlpha = 0.05; // Это для получения эффекта плавного погасания полос
ctx.fillRect(0, 0, canvas.width, canvas.height); // Полупрозрачно чистим экран
ctx.fillStyle = "gold"; // Задаём цвет полос
ctx.globalAlpha = 1;
for (i = 0; i < 1024; i++) {
ctx.fillRect(i, 255 - frequencyData[i], 1, frequencyData[i]); // рисуем полосу
}
}, 20);
}<audio id="player" controls src="https://listen6.myradio24.com/sazdan" crossorigin="anonymous"></audio>
<br/>
<br/>
<!--Подключаем файл-->
<canvas id="myCanvas" width=1024 height=256 style="background:blue"></canvas>
pointer-events: none;, а потом для нужных элементов включать, в данном случае для canvasFluid: pointer-events: all;
const url = "https://i.imgur.com/sduLRvf.jpeg";
const resp = await fetch(url);
const blob = await resp.blob();
const name = url.split("/").pop().replace("jpeg", "jpg");
downloadBlob(blob, name, url);
function downloadBlob(blob, name, url) {
const anchor = document.createElement("a");
anchor.setAttribute("download", name || "");
const blobUrl = URL.createObjectURL(blob);
anchor.href = blobUrl + (url ? ("#" + url) : "");
anchor.click();
setTimeout(() => URL.revokeObjectURL(blobUrl), 3000);
}url параметр опциональный, чисто чтобы сохранить возможность посмотреть оригинальный URL в менеджере загрузок. 
display через медиа запросы. Например одна кнопка находится в одном месте страницы и отображается по дефолту на десктопах, а вторая кнопка находится совсем в другом месте страницы и "активируется" соответственно на планшетах и мобильниках. 
<!-- Скрытая глалерея -->
<div style="display: none;">
<a href="images/tmp/demo-4.jpg" data-fancybox="gallery-1"></a>
<a href="images/tmp/demo-5.jpg" data-fancybox="gallery-1"></a>
<a href="images/tmp/demo-6.jpg" data-fancybox="gallery-1"></a>
</div><a href="images/tmp/demo-3.jpg" target="_blank" data-fancybox="gallery-1" class="media__item"></a>