{"id":422,"date":"2015-12-01T10:15:24","date_gmt":"2015-12-01T10:15:24","guid":{"rendered":"http:\/\/on5tl.com\/edu\/?p=422"},"modified":"2022-05-27T10:41:26","modified_gmt":"2022-05-27T10:41:26","slug":"%d9%84%d9%88%d8%ad-%d8%a7%d9%84%d8%a3%d9%84%d9%88%d8%a7%d9%86-color-beaker","status":"publish","type":"post","link":"https:\/\/planet-www.com\/ar\/%d9%84%d9%88%d8%ad-%d8%a7%d9%84%d8%a3%d9%84%d9%88%d8%a7%d9%86-color-beaker\/","title":{"rendered":"\u0644\u0648\u062d \u0627\u0644\u0623\u0644\u0648\u0627\u0646 : color beaker"},"content":{"rendered":"

 <\/p>\n

\u062a\u062d\u062f\u064a\u062f \u0644\u0648\u0646 \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062b\u0644\u0627\u062b \u0645\u062f\u062e\u0644\u0627\u062a :<\/h1>\n

\u0646\u0639\u0644\u0645 \u0623\u0646\u0647 \u0628\u0625\u0645\u0643\u0627\u0646\u0646\u0627 \u062a\u062d\u062f\u064a\u062f \u0644\u0648\u0646 \u0645\u0627 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062b\u0644\u0627\u062b\u0629 \u0623\u0631\u0642\u0627\u0645 \u062a\u062d\u062f\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u0647\u064a \u0627\u0644\u0623\u062d\u0645\u0631 \u0648\u0627\u0644\u0623\u062e\u0636\u0631 \u0648\u0627\u0644\u0623\u0632\u0631\u0642
\n\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u0623\u0648\u0644 \u064a\u062d\u062f\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062d\u0645\u0631 \u0648\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u062b\u0627\u0646\u064a \u064a\u062d\u062f\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062e\u0636\u0631 \u0648\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u062b\u0627\u0644\u062b \u064a\u062d\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0632\u0631\u0642
\n\u0633\u0646\u0642\u0648\u0645 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0645\u062b\u0627\u0644 \u0627\u0644\u062a\u0627\u0644\u064a \u0628\u062a\u062c\u0631\u064a\u0628 \u0647\u0630\u0647 \u0623\u0631\u0642\u0627\u0645 \u0645\u062e\u062a\u0644\u0641\u0629 \u0644\u0643\u0644 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u062f\u062e\u0627\u0644 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0645\u0646 0 \u062d\u062a\u0649 \u0627\u0644\u0631\u0642\u0645 f<\/p>\n

[php]
\n&lt;!DOCTYPE html&gt;
\n&lt;html&gt;
\n&lt;head&gt;
\n &lt;meta charset=&quot;utf-8&quot;&gt;
\n&lt;style&gt;<\/p>\n

&lt;\/style&gt;
\n&lt;\/head&gt;
\n&lt;body&gt;
\n &lt;p&gt; enter number from 0 to f :&lt;\/p&gt;
\n &lt;input id=&quot;color1&quot; type=&quot;text&quot;&gt;
\n &lt;input id=&quot;color2&quot; type=&quot;text&quot;&gt;
\n &lt;input id=&quot;color3&quot; type=&quot;text&quot;&gt;
\n &lt;button onclick=&quot;color();&quot;&gt; drow &lt;\/button&gt;<\/p>\n

&lt;div id=&quot;show&quot;&gt;&lt;\/div&gt;<\/p>\n

&lt;script&gt;
\n function color(){
\n var y=&quot;&quot;;
\n var c1=document.getElementById(&quot;color1&quot;).value;
\n var c2=document.getElementById(&quot;color2&quot;).value;
\n var c3=document.getElementById(&quot;color3&quot;).value;
\n y+=’&lt;div style=&quot;width:100px;height:50px;background-color:#’+c1+c2+c3+’;border:1px solid #000;&quot;&gt;&lt;\/div&gt;’;
\n document.getElementById(&quot;show&quot;).innerHTML = y;
\n }
\n &lt;\/script&gt;
\n&lt;\/body&gt;
\n&lt;\/html&gt;
\n[\/php]<\/p>\n

\u0627\u0633\u062a\u062f\u0639\u0627\u0621 \u0627\u0644\u062a\u0627\u0628\u0639 \u064a\u062a\u0645 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 \u0632\u0631 \u0627\u0644\u0631\u0633\u0645
\n\u064a\u0642\u0648\u0645 \u0627\u0644\u062a\u0627\u0628\u0639 \u0628\u062c\u0644\u0628 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0645\u062f\u062e\u0644\u0629 \u0648\u0625\u0636\u0627\u0641\u062a\u0647\u0627 \u0625\u0644\u0649 \u0644\u0648\u0646 \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0640 div \u0627\u0644\u062a\u064a \u0642\u0645\u0646\u0627 \u0628\u0625\u0646\u0634\u0627\u0621\u0647\u0627 \u062f\u0627\u062e\u0644 \u0648\u0633\u0645\u064a \u0627\u0644\u0633\u0643\u0631\u0628\u062a \u062b\u0645 \u064a\u0642\u0648\u0645 \u0627\u0644\u062a\u0627\u0628\u0639 \u0628\u0625\u0636\u0627\u0641\u062a\u0647\u0627 \u0625\u0644\u0649 \u062c\u0633\u0645 \u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c
\n\u0645\u0639 \u0627\u0644\u0627\u0646\u062a\u0628\u0627\u0647 \u0625\u0644\u0649 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0645\u062f\u062e\u0644\u0629 \u0648\u0647\u064a \u0627\u0644\u0645\u0635\u0641\u0648\u0641\u0629 <\/a>\u0627\u0644\u062a\u0627\u0644\u064a\u0629:
\n0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , a , b , c , d , e , f<\/p>\n

\u0644\u0648\u062d \u0627\u0644\u0623\u0644\u0648\u0627\u0646 :<\/h1>\n

\u064a\u0645\u0643\u0646 \u0639\u0645\u0644 \u0644\u0648\u062d \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u0627\u0628\u0639 \u064a\u062d\u0648\u064a \u062b\u0644\u0627\u062b \u062d\u0644\u0642\u0627\u062a \u0645\u062a\u062f\u0627\u062e\u0644\u0629 \u0643\u0644 \u062d\u0644\u0642\u0629 \u062a\u0628\u062f\u0623 \u0645\u0646 0 \u0648\u062a\u0646\u062a\u0647\u064a \u0639\u0646\u062f \u0637\u0648\u0644 \u0627\u0644\u0645\u0635\u0641\u0648\u0641\u0629 <\/a>\u0627\u0644\u062a\u064a \u062a\u062d\u062f\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u0646<\/p>\n

[php]
\n&lt;!DOCTYPE html&gt;
\n&lt;html&gt;
\n&lt;head&gt;
\n &lt;meta charset=&quot;utf-8&quot;&gt;
\n&lt;style&gt;<\/p>\n

.d {
\n display:inline-block;
\n margin:2px;
\n}<\/p>\n

&lt;\/style&gt;
\n&lt;\/head&gt;
\n&lt;body&gt;
\n&lt;div id=&quot;div1&quot; style=&quot;&quot;&gt;
\n&lt;\/div&gt;
\n&lt;script&gt;
\n var x=[&quot;0&quot;,&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;,&quot;6&quot;,&quot;7&quot;,&quot;8&quot;,&quot;9&quot;,&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;e&quot;,&quot;f&quot;];
\n var y=&quot;&quot;;
\n for(i=0;i&lt;x.length;i++){
\n for(j=0;j&lt;x.length;j++){
\n for(q=0;q&lt;x.length;q++){
\n y+=’&lt;div class=&quot;d&quot; style=&quot;width:25px;height:25px;background-color:#’+x[i]+x[j]+x[q]+’;&quot;&gt;&lt;\/div&gt;’;
\n }
\n }
\n }
\n document.getElementById(&quot;div1&quot;).innerHTML = y;
\n&lt;\/script&gt;<\/p>\n

&lt;\/body&gt;
\n&lt;\/html&gt;
\n[\/php]<\/p>\n

\u064a\u0645\u0643\u0646 \u0625\u0636\u0627\u0641\u0629 \u062a\u0627\u0628\u0639 \u064a\u0642\u0648\u0645 \u0628\u062c\u0644\u0628 \u0627\u0644\u0644\u0648\u0646 \u0628\u0627\u0644\u0647\u0643\u0633\u0627 \u0639\u0646\u062f \u0627\u0644\u0646\u0642\u0631 \u0639\u0644\u064a\u0647 :<\/p>\n

[php]
\n&lt;!DOCTYPE html&gt;
\n&lt;html&gt;
\n&lt;head&gt;
\n &lt;meta charset=&quot;utf-8&quot;&gt;
\n &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
\n &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;&quot;&gt;
\n &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/bootstrap.min.css&quot;\/&gt;
\n &lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css&quot;&gt;
\n &lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;
\n &lt;script src=&quot;http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js&quot;&gt;&lt;\/script&gt;
\n&lt;style&gt;<\/p>\n

.d {
\n display:inline-block;
\n margin:0.5px;
\n margin-bottom:0.5px;
\n margin-top:0.3px;
\n}
\n#div1 {
\n width: 500px;
\n height: 300px;
\n line-height: 10%;
\n overflow: scroll;
\n}
\n&lt;\/style&gt;
\n&lt;\/head&gt;
\n&lt;body&gt;
\n&lt;div id=&quot;div1&quot; style=&quot;&quot;&gt;
\n&lt;\/div&gt;
\n&lt;input id=&quot;color&quot; type=&quot;text&quot;&gt;<\/p>\n

&lt;script&gt;
\n var x=[&quot;0&quot;,&quot;1&quot;,&quot;2&quot;,&quot;3&quot;,&quot;4&quot;,&quot;5&quot;,&quot;6&quot;,&quot;7&quot;,&quot;8&quot;,&quot;9&quot;,&quot;a&quot;,&quot;b&quot;,&quot;c&quot;,&quot;d&quot;,&quot;e&quot;,&quot;f&quot;];
\n var y=&quot;&quot;;
\n for(i=0;i&lt;x.length;i++){
\n for(j=0;j&lt;x.length;j++){
\n for(q=0;q&lt;x.length;q++){
\n y+=’&lt;div class=&quot;d&quot; style=&quot;width:8px;height:8px;background-color:#’+x[i]+x[j]+x[q]+’;&quot; onclick=&quot;return hexcolor(this);&quot;&gt;&lt;\/div&gt;’;
\n }
\n }
\n }
\n document.getElementById(&quot;div1&quot;).innerHTML = y;
\n function hexcolor(x){
\n var c=x.style.backgroundColor;
\n document.getElementById(&quot;color&quot;).value=c;
\n }
\n&lt;\/script&gt;<\/p>\n

&lt;\/body&gt;
\n&lt;\/html&gt;
\n[\/php]<\/p>\n

\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0628\u0639\u0636 \u0627\u0644\u062e\u0635\u0627\u0626\u0635 \u0644\u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0648 \u062a\u062d\u062f\u064a\u062f \u062a\u0628\u0627\u0639\u062f\u0647\u0627
\n\u0645\u0646\u0647\u0627 \u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u0640 scroll \u0639\u0646\u062f \u062d\u0635\u0648\u0644 \u0637\u0641\u062d \u0641\u064a \u062d\u062c\u0645 \u0627\u0644\u0640 div
\n\u0648\u062e\u0627\u0635\u064a\u0629 \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0628\u064a\u0646 \u0627\u0644\u0640divs \u0627\u0644\u062a\u064a \u062a\u0634\u0643\u0644 \u0627\u0644\u0627\u0644\u0648\u0627\u0646 \u062d\u064a\u062b \u062a\u0645 \u062a\u0642\u0644\u064a\u0644\u0647\u0627 \u0625\u0644\u0649 10% \u0648\u063a\u064a\u0631\u0647\u0627 \u0645\u0646 \u062e\u0648\u0627\u0635 \u0627\u0644\u062a\u0628\u0627\u0639\u062f \u0627\u0644\u0628\u0633\u064a\u0637\u0629<\/p>\n

[php]
\nline-height: 10%;
\noverflow: scroll;
\n[\/php]<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

\u0646\u0639\u0644\u0645 \u0623\u0646\u0647 \u0628\u0625\u0645\u0643\u0627\u0646\u0646\u0627 \u062a\u062d\u062f\u064a\u062f \u0644\u0648\u0646 \u0645\u0627 \u0645\u0646 \u062e\u0644\u0627\u0644 \u062b\u0644\u0627\u062b\u0629 \u0623\u0631\u0642\u0627\u0645 \u062a\u062d\u062f\u062f \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u0647\u064a \u0627\u0644\u0623\u062d\u0645\u0631 \u0648\u0627\u0644\u0623\u062e\u0636\u0631 \u0648\u0627\u0644\u0623\u0632\u0631\u0642
\n\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u0623\u0648\u0644 \u064a\u062d\u062f\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062d\u0645\u0631 \u0648\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u062b\u0627\u0646\u064a \u064a\u062d\u062f\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u062e\u0636\u0631 \u0648\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u062b\u0627\u0644\u062b \u064a\u062d\u062f \u0645\u0642\u062f\u0627\u0631 \u0627\u0644\u0644\u0648\u0646 \u0627\u0644\u0623\u0632\u0631\u0642<\/p>\n","protected":false},"author":1,"featured_media":447,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,11],"tags":[94,30,51,248],"class_list":["post-422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-11","tag-94","tag-30","tag-51","tag---color-beaker"],"_links":{"self":[{"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/posts\/422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/comments?post=422"}],"version-history":[{"count":13,"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/posts\/422\/revisions"}],"predecessor-version":[{"id":1975,"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/posts\/422\/revisions\/1975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/media\/447"}],"wp:attachment":[{"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/media?parent=422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/categories?post=422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planet-www.com\/ar\/wp-json\/wp\/v2\/tags?post=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}