Задать вопрос

4ce

Ответы пользователя по тегу JavaScript

  • Как переключать div по кнопке радио каждые 30сек?

    @4ce
    Привет.
    Непонятен вопрос куда нужно переключать?
    Тем не менее вот ответ вроде бы в пределах вопроса и кода...
    setInterval(function func(){
rowe.children[Math.floor(Math.random()*rowe.children.length)].click()
},30000);
    Где:
    setInterval это функция из вопроса
    rowe.children это массив вложенных элементов в элементе id="rowe"
    чтобы обратится к элементу массива rowe.children[номер элемента начиная с нуля]
    в конце .click() чтобы "кликнуть" (≈нажать на что нужно)
    так как по чему нажать не ясно ... Math.random() ... то есть случайный выбор...

    Конкретно js код из ответа по идее дооолжен работать и без дополнительных библиотек...

    ~_^ Удачи!
    Ответ написан
    1 комментарий
    1 комментарий

  • JS canvas. Фильтры на фото и как их задать?

    @4ce
    canvas css filter
    https://www.google.com/search?q=canvas+css+filter
    CanvasRenderingContext2D.filter
    https://developer.mozilla.org/en-US/docs/Web/API/C...

    ≈для текста
    <canvas id="canvas"></canvas>
<script>
ctx = canvas.getContext('2d');
//vvvvvvvvvvvvvvvvvvvvvv;
ctx.filter = 'blur(4px)';//<=you search this;
//^^^^^^^^^^^^^^^^^^^^^^;
ctx.font = '48px serif';
ctx.fillText('Hello world', 50, 100);
</script>


    ≈ и для картинки( для демо нужна картинка поэтому смотри первый пример, принцип тот же и этот код в спойлере нажми на эту строчку чтоб рзвернуть)

    <canvas id="canvas" width="400" height="150"></canvas>
<div style="display:none;">
  <img id="source" src="rhino.jpg" />
</div>
<script>
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
image = document.getElementById('source');

image.addEventListener('load', (e) => {
  // Draw unfiltered image
  ctx.drawImage(image, 0, 0, image.width * .6, image.height * .6);

  // Draw image with filter
  ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(-9px 9px 3px #e81)';
  ctx.drawImage(image, 400, 0, -image.width * .6, image.height * .6);
});
</script>



    Дополнение: так как возможно(затестить не вышло)
    "Упомянутые выше фильтры не работают в сафари."
    как заметил Alexandroppolus


    Примечание:не знаю на сколько уместно это дополнение в рамках ответа на вопрос изгаляться по всякому можно...
    Я попробовал загрузить css фильтр в svg который встроен в canvas,
    пока не знаю работает это в Safari или нет но у меня работает,
    собирался возможно написать полифил но на сегодня это пока всё...

    Не очень легко воспринимаемый код html страницы в спойлере
    <!--
demo canvas with css "grayscale(1)" filter in svg container
^(this maybe need if canvas css filter  not support but i no know maybe this no work)
for:
https://qna.habr.com/q/1251088#answer_2290516
-->
demo image canvas id=iDemoImage<br>
<canvas id="iDemoImage" width="100" height="100" style="border:solid 1px"></canvas>
<script>
(function(elementCanvas1,gC2,f){
gC2=elementCanvas1.getContext('2d');
function r1(n){
return Math.round(Math.random()*n)
}
for(f=0;f<50;f++){
gC2.fillStyle='rgb('+r1(255)+','+r1(255)+','+r1(255)+')';
gC2.fillRect(r1(80),r1(80),10+r1(10),10+r1(10));
}
})(iDemoImage);
</script><br><br>
demo canvas with css "grayscale(1)" filter in svg container id=iDemoFilter<br>
<canvas id="iDemoFilter" width="400" height="150" style="border:solid 1px"></canvas>
<script>
(function(elementCanvas1,gC2,image1){
gC2=elementCanvas1.getContext('2d');
gC2.drawImage(iDemoImage,25,25);

image1=document.createElement('img');
image1.src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="'
+iDemoImage.width+'" height="'+iDemoImage.height+'"> <image style="'+
 /*vvvvvvvvvvvvvvv*/
'filter:grayscale(1)'/*<=css filter here*/
 /*^^^^^^^^^^^^^^^*/
+'" href="'+iDemoImage.toDataURL()+'" height="100%" width="100%"/></svg>';
image1.onload=function(){gC2.drawImage(image1,150,25)};

gC2.filter='grayscale(1)';
gC2.drawImage(iDemoImage,275,25);
})(iDemoFilter);
</script>

    У меня результат выглядел примерно так(первое картинка без фильтров, второе в svg с фильтром, третье обычный фильтр):
    63e79ce9d16e8863152708.png
    Удачи ~_^ !
    Ответ написан
    Комментировать
    Комментировать

  • При переключении на Dark Mode ползунок не сохраняет позицию?

    @4ce
    Если добавить в JS darkModeToggle.checked=true
    сюда:
    if (darkMode === 'enabled') {
  enableDarkMode();
  darkModeToggle.checked=true;
}
    то при загрузке страницы JS переставит его в нужное положение!

    Простой пример переключения через JS здесь:
    https://www.w3schools.com/jsref/prop_checkbox_chec...
    https://www.w3schools.com/jsref/tryit.asp?filename...
    найдено так:
    https://www.google.com/search?client=ubuntu&channe...

    И меньше драмы всё будет! только я бы как то по другому сделал ~_^
    Ответ написан
    4 комментария
    4 комментария