JavaScript
- 33 ответа
- 0 вопросов
17
Вклад в тег
Страна: <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>
<meta charset="utf-8">
<title>Визуализатор</title>
<style>
#canvas{
position: absolute;
top: 50px;
left: 0px;
background: #333;
}
#progress{
position: absolute;
top: 50px;
left: 0px;
background: rgba(255, 155, 0, 0.5);
width: 0px;
height: 256px;
}
</style>
</head>
<body bgcolor=#444>
<audio id=audio src="sound.mp3" controls></audio>
<canvas id=canvas width=512 height=256></canvas>
<div id=progress></div>
<script>
var audio = document.getElementById("audio");
var ctx = canvas.getContext("2d");
var color_L = "#7cf", color_R = "#f7c"; // Цвета осциллограмм левого и правого стереоканалов
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
audio.onplay = function(){b = setInterval(function(){progress.style.width = Math.floor(audio.currentTime / audio.duration * canvas.width) + "px"}, 100)};
audio.onended = function(){
this.currentTime = 0;
clearInterval(b);
progress.style.width = "0px";
}
var source = audioCtx.createBufferSource();
var request = new XMLHttpRequest();
request.open('GET', audio.src, true);
request.responseType = 'arraybuffer';
request.onload = function(){
var audioData = request.response;
audioCtx.decodeAudioData(audioData, function(buffer){
source.buffer = buffer;
data_L = buffer.getChannelData(0);
data_R = buffer.getChannelData(1); // Если аудиофайл моно - поменяйте в этой сроке единицу на ноль.
// При несоответствии количества стереоканалов - ошибка в консоли и код не работает.
for(var i = 0; i < data_L.length; i++){
var x = Math.floor(i / data_L.length * canvas.width);
var L = data_L[i] * canvas.height / 4;
var R = data_R[i] * canvas.height / 4;
if(Math.floor(i / 16) == i / 16){ // Число 16 для больших аудиофайлов лучше побольше. Нужно подбирать.
ctx.fillStyle = color_L;
ctx.fillRect(x, canvas.height * 0.25 + L, 1, -L);
ctx.fillStyle = color_R;
ctx.fillRect(x, canvas.height * 0.75 + R, 1, -R);
}
}
},
function(e){"Error with decoding audio data" + e.err});
}
request.send();
canvas.onmousedown = progress.onmousedown = function(e){
progress.style.width = e.pageX + "px";
audio.currentTime = e.pageX / canvas.width * audio.duration;
}
canvas.ondblclick = function(){audio.play()};
ctx.fillStyle = color_L;
ctx.fillRect(0, canvas.height * 0.25, canvas.width, 1);
ctx.fillStyle = color_R;
ctx.fillRect(0, canvas.height * 0.75, canvas.width, 1);
</script>
</body>
</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);
}<h1 id=h1></h1>
<script>
let radius = 70;
let text = "corporate*service*";
let step = Math.PI * 2 / text.length;
for(i = 0; i < text.length; i ++){
let x = radius + radius * Math.sin(i * step);
let y = radius + radius * Math.cos(i * step);
let myspan = document.createElement("span");
myspan.innerText = text[i];
myspan.style.position = "absolute";
myspan.style.left = x + "px";
myspan.style.bottom = y + "px";
myspan.style.transform = "rotateZ(" + i * 360 / text.length + "deg)";
h1.appendChild(myspan);
}
</script>