Форум

MininDM · #1 (**permalink**) 09.03.2017, 23:30

Помогите реализовать чтобы менялся от времени суток.
У меня есть скрипт который меняет css, сделать так чтобы он работал с ctx.fillStyle у меня не получилось.

Сам скрипт

<script language="JavaScript"> 
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);thehour = datetoday.getHours();
 if (thehour > 7 & thehour < 20) display = " style_day.css ";
 else display = "css/style_moon.css";
 var css = '<'; css+='link rel="stylesheet" href=' + display + ' /'; css+='>';document.write(css);
 }
</script>

Lodas · #2 (**permalink**) 09.03.2017, 23:42

я бы предложил другой подход, вы можете задать стили для времени суток по дефолту, для остальных вешать класс на body и от него уже задавать в css стиль для нужного времени, пример:

//функция переключения день/ночь
function timeCheck() {
	var now = new Date();
	var hours = now.getHours();

	if(hours >= 18 || hours < 9)
		$('body').addClass('night');
			else
				$('body').removeClass('night');
		
	return true;	
}

MininDM · #3 (**permalink**) 09.03.2017, 23:45

Меня интересует можно ли похожее написать для ctx.fillStyle, но за это тоже спасибо. Просто у меня есть скрипт в <head>, который работает по id в html и я не знаю как реализовать замену цвета в ctx.fillStyle, если надо я могу скинуть этот скрипт

рони · #4 (**permalink**) 10.03.2017, 00:24

MininDM,

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
//функция переключения день/ночь
function timeColor() {
  var now = new Date();
  var hours = now.getHours();
  var color = "#FF0000";
  if(hours >= 18 || hours < 9)
    color = "#000000"

  return color;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = timeColor();
ctx.fillRect(20, 20, 150, 100);

</script>


</body>
</html>

laimas · #5 (**permalink**) 10.03.2017, 02:10

рони,
это смотря для кого, кто-то спит, а кто-то досыпает, но уже на работе. )

MininDM · #6 (**permalink**) 10.03.2017, 08:14

рони,
Сможешь вставить свой скрипт, в этот. Просто я чайник

<!doctype html>
<html>
<head>
<syle type="text/css">
</style>
<style>
div#mp3_player{ width:600px;background:#000; margin:50px auto; }
div#mp3_player > div > audio{  width:500px; background:#000; float:left;  }
div#mp3_player > canvas{ width:600px; height:30px; background:#002D3C; float:left; }
</style>
<script>
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'Nightcore.mp3';
audio.controls = false;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
	document.getElementById('audio_box').appendChild(audio);
	context = new webkitAudioContext(); // AudioContext object instance
	analyser = context.createAnalyser(); // AnalyserNode method
	canvas = document.getElementById('analyser_render');
	ctx = canvas.getContext('2d');
	// Re-route audio playback into the processing graph of the AudioContext
	source = context.createMediaElementSource(audio); 
	source.connect(analyser);
	analyser.connect(context.destination);
	frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
	window.webkitRequestAnimationFrame(frameLooper);
	fbc_array = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(fbc_array);
	ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
	
	ctx.fillStyle = '#00F'; // Color of the bars


	bars = 100;
	for (var i = 0; i < bars; i++) {
		bar_x = i * 3;
		bar_width = 2;
		bar_height = -(fbc_array[i] / 2);
		//  fillRect( x, y, width, height ) // Explanation of the parameters below
		ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
	}
}
</script>
</head>
<body>
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>
</div>
</body>
</html>

рони · #7 (**permalink**) 10.03.2017, 12:03

MininDM,

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div#mp3_player{ width:600px;background:#000; margin:50px auto; }
div#mp3_player > div > audio{  width:500px; background:#000; float:left;  }
div#mp3_player > canvas{ width:600px; height:30px;background:#002D3C;  float:left; }
</style>
<script>
function timeColor() {
  var now = new Date();
  var hours = now.getHours();
  var color = "#0000FF";
  if(hours >= 18 || hours < 9)
    color = "#FFFF00"

  return color;
}

// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'Nightcore.mp3';
audio.controls = false;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
  document.getElementById('audio_box').appendChild(audio);
  context = new AudioContext(); // AudioContext object instance
  analyser = context.createAnalyser(); // AnalyserNode method
  canvas = document.getElementById('analyser_render');
  ctx = canvas.getContext('2d');
  // Re-route audio playback into the processing graph of the AudioContext
  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
  frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
  window.requestAnimationFrame(frameLooper);
  fbc_array = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(fbc_array);
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

  ctx.fillStyle = timeColor(); // Color of the bars


  bars = 100;
  for (var i = 0; i < bars; i++) {
    bar_x = i * 3;
    bar_width = 2;
    bar_height = -(fbc_array[i] / 2);
    //  fillRect( x, y, width, height ) // Explanation of the parameters below
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  }
}
</script>
</head>
<body>
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>
</div>
</body>
</html>

MininDM · #8 (**permalink**) 10.03.2017, 12:23

рони,
Спасибо

Форум

Справочник

Discord чат

Курсы javascript