Изменение цвета элементов - PHP

Наталья Баева · 31.10.2016, 16:46

Подскажите как задать каждой батарейке свой цвет, можно ли каждому charge задать id и прописать условие через if с изменением цветов или это можно сделать как-то проще?

Код:

.blok
{
  width:$widthBloka;
  height: $heightBloka;
  border: $border solid $lawnGreenColor;
  border-radius:$borderRadius;
  margin-left:$marginLeftBloka;
  margin-top:$marginTopBloka;
  background-color:$lawnGreenColor;
}

PHP код:


			
angular.module("App",[])

.controller("Battery", function($scope)

{

  $scope.batteries = [{charge:[0,0,0,0]},

                     {charge:[0,0,0,1]},

                     {charge:[0,0,1,1]},

                     {charge:[0,1,1,1]},

                     {charge:[1,1,1,1]}];

  

  if(id=1){blok.style.cssText="border: #FF0000;\ background-color: #FF0000;\ ";}

  if(id=2){blok.style.cssText="border: #FF8C00;\ background-color: #FF8C00;\ ";}

  if(id=3){blok.style.cssText="border: #FFFF00;\ background-color: #FFFF00;\ ";}

  if(id=4){blok.style.cssText="border: #7CFC00;\ background-color: #7CFC00;\ ";}

});

Niko777 · 31.10.2016, 18:40

я начинающий программист и вчера прошел так сказать свич кейс, можно через него же сделать нет?

YouTuHowTu · 31.10.2016, 20:58

В одном блоке - одная часть заряда батареи. Подгружай количество блоков +1 от предыдущего через jquery через next

pompiduskus · 31.10.2016, 23:03

Думаювам такой пример поможет.

В работе http://ch3ll0v3k.0fees.us/public/js/battary/

Код:

<!DOCTYPE html>
<html>
<head lang="en-US">
    
    <meta charset="utf-8" />
    <title>Battary</title>

    <style type="text/css">
        #battary{
            float: left; margin-left: 10px; border-radius: 8px;border: solid 8px #FFF;
            width: 120px; height: 245px; display: block; background-image: url('battary.jpg');
            background-repeat: no-repeat; box-shadow: 0 0 10px #000;

        }

        .batt_100pr{ background-position: -467px 0 !important; /* 100% */ }
        .batt_75pr{  background-position: -351px 0 !important; /* 75%  */ }
        .batt_50pr{  background-position: -235px 0 !important; /* 50%  */ }
        .batt_25pr{  background-position: -120px 0 !important; /* 25%  */ }
        .batt_0pr{   background-position: -4px   0 !important; /* 0%   */ }

        #battary_info{
            float: left; width: 140px; height: 140px; display: block;border-radius: 50%;
            line-height: 140px; text-align: center; font-size: 46px; border: solid 10px #333;
            box-shadow: 0 0 15px rgba(0,0,0, 0.60 ); text-shadow: 1px 1px 20px #F00;
            margin: 30px 0 0 200px;    
        }

    </style>

    <script type="text/javascript">

        var battary, battary_info;
        var battary_pr = 100;
        
        window.addEventListener('load', function(){
            battary = document.getElementById('battary');
            battary_info = document.getElementById('battary_info');

            setInterval( bat_anim, 50 ); // each 50 millisecond call bat_anim(); 

        });

        function bat_anim(){

            if( battary_pr <= 100 && battary_pr >= 75 ){
                battary.className = "batt_100pr"; 

            }else if( battary_pr <= 75 && battary_pr >= 50 ){
                battary.className = "batt_75pr"; 

            }else if( battary_pr <= 50 && battary_pr >= 25 ){
                battary.className = "batt_50pr"; 

            }else if( battary_pr <= 25 && battary_pr >= 0 ){
                battary.className = "batt_25pr"; 

            }else if( battary_pr <= 10 && battary_pr >= 0 ){
                battary.className = "batt_0pr"; 

            }else{
                battary_pr = 100; // reset => 100 %
            }

            battary_pr--; //discharge
            battary_info.innerHTML = battary_pr+'%';

        }


    </script>


</head>
<body>

    <div id="battary" class="batt_100pr">
        <div id="battary_info">100%</div>
    </div>

</body>
</html>

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
изменение цвета карты	exliska	C# (си шарп)	3	23.05.2011 10:17
Изменение цвета	XFR	Microsoft Office Excel	6	28.11.2010 13:32
изменение цвета	MaXoN66613	Помощь студентам	2	02.06.2010 18:56
Изменение цвета	girz	Общие вопросы Delphi	6	30.05.2009 13:43
Изменение цвета	Artem	Общие вопросы Delphi	5	12.07.2007 09:07

31.10.2016, 18:40	#2
Niko777 Новичок Джуниор Регистрация: 31.10.2016 Сообщений: 3	я начинающий программист и вчера прошел так сказать свич кейс, можно через него же сделать нет?

31.10.2016, 20:58	#3
YouTuHowTu Пользователь Регистрация: 31.10.2016 Сообщений: 14	В одном блоке - одная часть заряда батареи. Подгружай количество блоков +1 от предыдущего через jquery через next Подпишись на мои видеоуроки! https://www.youtube.com/channel/UCQiWYMJfZ4XUYhOC57X219A?sub_confir mation=1