Tuesday, May 30, 2017

javascript/html display color from json file

*** color.json***
colorlist = [{'colors': '#fe3000'}, {'colors': '#ff1000'}, {'colors': '#ff5000'}, {'colors': '#ff9000'}, {'colors': '#ffc000'}, {'colors': '#0f1000'}, {'colors': '#0f5000'}, {'colors': '#0f9000'}, {'colors': '#0fc000'}, {'colors': '#1f1000'}];



***index.html****
<html>
<head>
<script type="text/javascript" language="javascript" src="color.json"></script>
        <script type="text/javascript">
function makeDocument() {
  var frame = document.getElementById("theFrame");
         
  var doc = document.implementation.createHTMLDocument("New Document");
  var p = doc.createElement("p");
  var d1 = document.getElementById("ptext");
  // d1.insertAdjacentHTML('afterend', '<div style="margin-left:0px;width:600px;">#0f1000<div id="two" style="background-color:#0f1000; width:400px;display:inline-block;">.</div></div>');
  // d1.insertAdjacentHTML('afterend', '<div style="margin-left:0px;width:600px;">#b65c1f<div id="two" style="background-color:#b65c1f; width:400px;display:inline-block;">.</div></div>');

  for (var i = 0, len = colorlist.length; i < len; i++) {
        // console.log(colorlist[i].colors);
        d1.insertAdjacentHTML('afterend', '<div style="width:600px;">'+colorlist[i].colors+'<div id="two" style="background-color:'+colorlist[i].colors+'; ">.</div></div>');
        // d1.insertAdjacentHTML('afterend', '<div style="width:600px;">'+colorlist[i].colors+'<div id="two" style="width:400px;display:inline-block;background-color:'+colorlist[i].colors+'; >.</div></div>');


  }

}

        </script>

</head>

<body onload="makeDocument()">

        <p id="ptext">
code/color
        </p>

</body>

No comments:

Post a Comment