Невозможно удалить ненужные элементы с веб-страницы.CSS

Разбираемся в CSS
Ответить
Anonymous
 Невозможно удалить ненужные элементы с веб-страницы.

Сообщение Anonymous »

Я новичок в html/css.
Я нашел отличный проект по адресу (https://www.martyncurrey.com/), код которого я хочу перепрофилировать для своего проекта на основе ESP01. Скриншот вывода кода приложен ниже.
Я удалил элементы topContainer и topContainer2, один за другим. Однако в обоих случаях код перестает работать.
Я хочу удалить часы и значок яркости (обведен красным) для своего проекта. Однако, несмотря на мои многодневные роды, я не увенчался успехом. Когда я удаляю различные участки кода для удаления значка яркости и часов, остальная часть страницы перестает работать. Код следующий:

Код: Выделить всё







IOT Webpage Test



body {background-color: #ffffff; font-size: 100% }
#wrapper       { width: 500px; margin: 20px auto;  padding: 5px 5px 5px 5px;    text-align:center;   border: 2px solid blue;   border-radius: 15px;  }
h2             { text-align: center;}
h3             { margin: 0px 0px 5px 0px; }

#topContainer   { display: flex; align-items: center;  justify-content: center;   Margin: 0px auto 2em auto;}
#topContainer2  { text-align: center;  margin-right: 2em;  }
#brightnessIcon {   }

#time           { display: inline; font-family: 'Courier New', Courier, monospace;  font-size: 250%;   }

#dialContainer { display:inline-block;   margin: 0px auto 0px auto;  }
#dial_1        { display:inline-block;  }
#dial_2        { display:inline-block; margin: 0px 0px 0px 30px; }
canvas         { background-color: #ffffff;    }
.bigText       { font-size: 150%;}
.noMargin      { margin: 0px 0px 0px 0px; }

#graphContainer { display:inline-block;  text-align:left; margin: 20px 0px 20px 0px;  }
#key            {  width: 200px;}
.box            { float: left;  height:15px;  width:10px;  margin: 0px 10px 0px 0px; clear: both;     }
.red            { background-color: red; }
.blue           { background-color: blue; }






Temperature & Humidity




Brightness

00:00:00



Temperature
 
00 °C

Humidity
 
00 %



 


 Temperature

 Humidity







//  50)  {  t=-30; }
h++;  if (h > 100) {  h=0;   }
b++ ; if (b>12)    {  b=0;   }

drawSVG(b);
drawDial('canvasTemp',  '#ffaaaa', 160, 20, -30,  50, t);
drawDial('canvasHumid', '#aaaaff', 160, 20,   0, 100, h);
document.getElementById('temp').innerHTML = t;
document.getElementById('humd').innerHTML = h;

graphMin = -30;
graphMax = 100;
drawGraph('graph', graphMin, graphMax, false, t, h);
}

// ===========================================  DIAL  =========================================

function drawDial(canvasID, dialColour, startAngle, stopAngle, minVal, maxVal, dialValue)
{
oneDegreeInRadians = Math.PI/180;
if (stopAngle < startAngle) { stopAngle = stopAngle + 360;}

let arcStartAngleInRadians =  oneDegreeInRadians * (startAngle-5)  ;
let arcStopAngleInRadians  =  oneDegreeInRadians * (stopAngle+5) ;

var c = document.getElementById(canvasID);
var ctx = c.getContext('2d');
ctx.clearRect(0, 0, c.width, c.height);
ctx.save();

let H = c.height;
let W = c.width;

let arcLineWidth = W/5;
ctx.translate(W/2, W/2);            // move coordinates 0,0 to the centre of the canvas

// draw arc
ctx.beginPath();
let radius = W/2 - (arcLineWidth/2) - (W/100);
ctx.lineWidth = arcLineWidth;
ctx.lineCap = 'butt';
ctx.strokeStyle = dialColour;
ctx.arc(0, 0, radius, arcStartAngleInRadians, arcStopAngleInRadians, false);
ctx.stroke();

// draw centre circle
ctx.beginPath();
let centerCircleRadius = W/100*3.5
ctx.strokeStyle = '#000000';
ctx.fillStyle = '#222222';
ctx.lineWidth = 2;
ctx.arc(0, 0, centerCircleRadius, 0, 2 * Math.PI, true);
ctx.stroke();
ctx.fill();

// draw ticks
ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.strokeStyle = '#333333';

ctx.font = '12px Arial';
ctx.fillStyle = '#333333';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';

let tickStartPoint = radius - (arcLineWidth/2) ;   // bottom of the arc
let tickLength =  5/8 * arcLineWidth - 5;

let labelPos = radius + (arcLineWidth/2) - 2;

for (let angle=minVal; angle 10) { numySteps = numySteps /10; }
var numxSteps = 20;

var xStep = graphWidth / numxSteps;
var yStep = graphHeight / numySteps;

ctx.lineWidth = 1;
ctx.strokeStyle = '#e5e5e5';
ctx.lineCap = 'butt';
for (let x = 0; x < c.width; x=x+xStep)
{
ctx.moveTo(x, 0);    ctx.lineTo(x, c.height);     ctx.stroke();
}

for (let y = 0; y 




Пожалуйста, помогите.
TIA
azhaque

Подробнее здесь: https://stackoverflow.com/questions/792 ... om-webpage
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»