{"id":4250,"date":"2013-02-09T14:27:48","date_gmt":"2013-02-09T05:27:48","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=4250"},"modified":"2013-02-09T14:27:48","modified_gmt":"2013-02-09T05:27:48","slug":"html5-web%e3%82%b9%e3%83%88%e3%83%ac%e3%83%bc%e3%82%b8%e3%81%a7%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e4%bf%9d%e5%ad%98-%e3%81%9d%e3%81%ae4%ef%bc%88%e3%81%aa%e3%82%93%e3%81%a1%e3%82%83%e3%81%a3%e3%81%a6","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=4250","title":{"rendered":"HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e4\uff08\u306a\u3093\u3061\u3083\u3063\u3066\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u30fb\u30b2\u30fc\u30b8\uff09"},"content":{"rendered":"

\u524d\u56de\u306e<\/p>\n

HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e3\uff08\u30af\u30a8\u30b9\u30c8\u9032\u884cCSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff09<\/a><\/h3>\n

\u306e\u7d9a\u304d\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n

\u524d\u56de\u307e\u3067\u306f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u80cc\u666f\u753b\u50cf\u304cCSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3057\u3001\u6b69\u3044\u3066\u3044\u308b\u611f\u3058\u307e\u3067\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u4eca\u56de\u306f\u3001\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u300cQuest\u9032\u6357\u300d\u300cEx\u300d\u300cGold\u300d<\/strong>\u306e<\/p>\n

\u30b2\u30fc\u30b8\u53ca\u3073\u6570\u5024\u304c\u5909\u308f\u308b\u3068\u3053\u308d\u3092\u884c\u3063\u3066\u884c\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

\u5bfe\u8c61DOM\u53d6\u5f97<\/h4>\n

\u5bfe\u8c61\u3068\u306a\u308bDOM\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306e\u8a18\u8ff0\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n

HTML<\/strong><\/p>\n

\r\n<ul class="statusLi">\r\n  <li class="lv">Lv:<span class="val">1<\/span><\/li>\r\n  <li class="quest">Quest\u9032\u6357:<span class="Gauge"><b style="width:10%;"><\/b><\/span><span class="val">10<\/span><\/li>\r\n  <li class="ex">Ex:<span class="Gauge"><b style="width:20%;"><\/b><\/span><span class="val">10<\/span><\/li>\r\n  <li class="gold"><span class="val">100<\/span>Gold<\/li>\r\n<\/ul><\/pre>\n
\u3053\u3053\u3089\u3078\u3093\u306e\u8981\u7d20\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n
Javascript<\/strong><\/p>\n
\r\nlvElem = document.querySelector('.lv > .val'),\r\nquestValElem = document.querySelector('.quest > .val'),\r\nexValElem = document.querySelector('.ex > .val'),\r\ngoldElem = document.querySelector('.gold > .val'),\r\nquestGauge = document.querySelector('.quest > .Gauge > b'),\r\nexGauge = document.querySelector('.ex > .Gauge > b');\r\n<\/pre>\n
\u305d\u308c\u305e\u308c\u306e\u8981\u7d20\u306b\u306f\u3007\u3007Elem\u3001\u30b2\u30fc\u30b8\u306e\u8981\u7d20\u306b\u5bfe\u3057\u3066\u306f\u3007\u3007Gauge\u3068\u3044\u3046\u5909\u6570\u306b\u683c\u7d0d\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u7d9a\u3044\u3066\u30da\u30fc\u30b8\u3092\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304d\u305f\u521d\u671f\u306e\u5024\u306e\u5909\u6570\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n
\u521d\u671f\u5024\u8a2d\u5b9a<\/h4>\n
Javascript<\/strong><\/p>\n
\r\nlv = 1,\r\nquestVal = 0,\r\nexVal = 0,\r\ngold = 0;<\/pre>\n
lv\u306f1\u306e\u5024\u3092\u3001questVal\u3001exVal\u3001gold\u306e\u5024\u306b\u306f0\u3092\u4ee3\u5165\u3057\u307e\u3059\u3002<\/p>\n
\u307e\u305f\u3053\u308c\u3089\u306e\u5024\u3092HTML\u306b\u3082\u53cd\u6620\u3055\u305b\u307e\u3057\u3087\u3046\u3002<\/p>\n
Javascript<\/strong><\/p>\n
\r\nquestValElem.innerHTML = questVal;\r\nexValElem.innerHTML = exVal;\r\ngoldElem.innerHTML = gold;\r\nquestGauge.style.width = questVal + \"%\";\r\nexGauge.style.width = exVal + \"%\";<\/pre>\n
innerHTML\u3092\u4f7f\u3044\u3001\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u305d\u308c\u305e\u308c\u306e\u8981\u7d20\u306e\u5024\u3092\u5909\u66f4\u81f4\u3057\u307e\u3059\u3002\u307e\u305f\u3001\u30b2\u30fc\u30b8\u3092\u8868\u793a\u3057\u3066\u3044\u308b\u8981\u7d20\uff08\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\uff09\u306ewidth\u306e\u5024\u3092questVal\u3068exVal\u3092\u53c2\u7167\u306b\u4ee3\u5165\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
\u3053\u308c\u3089\u306e\u95a2\u6570\u3092setStatus\u3068\u3057\u3066\u307e\u3068\u3081\u307e\u3059\u3002<\/p>\n
Javascript<\/strong><\/p>\n
\r\nfunction setStatus(){\r\n  questValElem.innerHTML = questVal;\r\n  exValElem.innerHTML = exVal;\r\n  goldElem.innerHTML = gold;\r\n  questGauge.style.width = questVal + \"%\";\r\n  exGauge.style.width = exVal + \"%\";\r\n}\r\n<\/pre>\n
\u6700\u5f8c\u306b\u3053\u306e\u95a2\u6570\u3092\u547c\u3073\u51fa\u3059\u69d8\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
setStatus();<\/pre>\n
\u3053\u3053\u307e\u3067\u306escript\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
Javascript<\/strong><\/p>\n
function game(){\r\n  var btn = document.querySelector('.btn'),\r\n      questImg = document.querySelector('.questImg'),\r\n      img = questImg.querySelector('img'),\r\n      lvElem = document.querySelector('.lv > .val'),\r\n      questValElem = document.querySelector('.quest > .val'),\r\n      exValElem = document.querySelector('.ex > .val'),\r\n      goldElem = document.querySelector('.gold > .val'),\r\n      questGauge = document.querySelector('.quest > .Gauge > b'),\r\n      exGauge = document.querySelector('.ex > .Gauge > b'),\r\n      lv = 1,\r\n      questVal = 0,\r\n      exVal = 0,\r\n      gold = 0;\r\n      \r\n  img.addEventListener('webkitAnimationEnd', function(){\r\n    questImg.classList.remove('move');\r\n  }, false);\r\n  \r\n  btn.addEventListener("click", function(){\r\n    questImg.classList.add('move');\r\n  }, false);\r\n  \r\n  function setStatus(){\r\n    questValElem.innerHTML = questVal;\r\n    exValElem.innerHTML = exVal;\r\n    goldElem.innerHTML = gold;\r\n    questGauge.style.width = questVal + "%";\r\n    exGauge.style.width = exVal + "%";\r\n  }\r\n  setStatus();\r\n}\r\nwindow.addEventListener("DOMContentLoaded", game, false);<\/pre>\n
\u4e0a\u8a18\u306escript\u306b\u3088\u3063\u3066\u3001\u30da\u30fc\u30b8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304d\u305f\u6642\u3001\u300cLv\u306f\uff11\u300d\u300cQuest\u9032\u6357\u306e\u30b2\u30fc\u30b8\u306f0\u300d\u300cEx\u306e\u30b2\u30fc\u30b8\u306f0\u300d\u300cGold\u306f0\u300d\u3068\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u30b2\u30fc\u30b8\u306e\u5897\u52a0<\/h4>\n
\u66f4\u306b\u3001\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af<\/strong>\u3059\u308b\u3068\u3001\u300cQuest\u9032\u6357\u306e\u30b2\u30fc\u30b8\u300d\u300cEx\u306e\u30b2\u30fc\u30b8\u300d\u300cGold\u300d<\/strong>\u306e\u5024\u304c\u5897\u52a0\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002\u4eee\u306b\u300c\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u5ea6\u306b\u5024\u304c10\u5897\u52a0\u300d<\/strong>\u3059\u308b\u3068\u3044\u3046\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n
Javascript<\/strong><\/p>\n
\r\nquestVal += 10;\r\nexVal += 10;\r\ngold += 10;<\/p>\r\n<\/pre>\n
\u4e0a\u8a18\u306e\u8a18\u8ff0\u3092btn.addEventListener(“click”, function(){\u301c\u301c \u5185\u306b\u8a18\u8ff0\u3057\u6700\u5f8c\u306b\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u30bb\u30c3\u30c8\u3059\u308b\u305f\u3081\u306bsetStatus()\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
Javascript<\/strong><\/p>\n
\r\nbtn.addEventListener(\"click\", function(){\r\n  questImg.classList.add('move');\r\n  questVal += 10;\r\n  exVal += 10;\r\n  gold += 10;\r\n  setStatus();\r\n}, false);\r\n<\/pre>\n
\u3053\u3053\u307e\u3067\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u4ee5\u4e0b\u306e\u30ea\u30f3\u30af\u304b\u3089\u5b9c\u3057\u304f\u304a\u9858\u3044\u81f4\u3057\u307e\u3059\u3002<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/a><\/strong><\/p>\n
http:\/\/webcyou.com\/demo\/js\/webstorage\/index004.html<\/a><\/p>\n
\u3053\u3053\u307e\u3067\u306escript\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n
Javascript<\/strong><\/p>\n
function game(){\r\n  var btn = document.querySelector('.btn'),\r\n      questImg = document.querySelector('.questImg'),\r\n      img = questImg.querySelector('img'),\r\n      lvElem = document.querySelector('.lv > .val'),\r\n      questValElem = document.querySelector('.quest > .val'),\r\n      exValElem = document.querySelector('.ex > .val'),\r\n      goldElem = document.querySelector('.gold > .val'),\r\n      questGauge = document.querySelector('.quest > .Gauge > b'),\r\n      exGauge = document.querySelector('.ex > .Gauge > b'),\r\n      lv = 1,\r\n      questVal = 0,\r\n      exVal = 0,\r\n      gold = 0;\r\n\r\n  img.addEventListener('webkitAnimationEnd', function(){\r\n      questImg.classList.remove('move');\r\n  }, false);\r\n  \r\n  btn.addEventListener("click", function(){\r\n    questImg.classList.add('move');\r\n    questVal += 10;\r\n    exVal += 10;\r\n    gold += 10;\r\n    setStatus();\r\n  }, false);\r\n  \r\n  function setStatus(){\r\n    questValElem.innerHTML = questVal;\r\n    exValElem.innerHTML = exVal;\r\n    goldElem.innerHTML = gold;\r\n    questGauge.style.width = questVal + "%";\r\n    exGauge.style.width = exVal + "%";\r\n  }\r\n  setStatus();\r\n}\r\nwindow.addEventListener("DOMContentLoaded", game, false);<\/pre>\n
 <\/p>\n
\u4eca\u306e\u6bb5\u968e\u3060\u3068\u3001\u30af\u30ea\u30c3\u30af\u3059\u308b\u5ea6\u306b10\u305a\u3064\u5897\u52a0\u3059\u308b\u306e\u3067\u3059\u304c\u3001100%\u3092\u8d85\u3048\u308b\u5024\u3068\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u306e\u3067\u3001\u8d85\u3048\u306a\u3044\u3088\u3046\u306b setStatus\u95a2\u6570\u5185\u306b if(questVal >= 100){\u301c\u306e\u3088\u3046\u306b\u300c100\u3092\u8d85\u3048\u308b\u3068\u301c\u301c\u300d\u306eif\u6587\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u307e\u305f\u3001\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u672c\u6765\u306e\u30ea\u30f3\u30af\u5148\u306b\u3082\u98db\u3073 index.html# \u306e\u3088\u3046\u306aurl\u306b\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u306e\u3067\u3001\u672c\u6765\u306e\u30ea\u30f3\u30af\u5148\u3078\u306e\u30b8\u30e3\u30f3\u30d7\u306f\u7121\u52b9\u306b\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
\u4ee5\u4e0b\u3092\u305d\u308c\u305e\u308c\u8ffd\u52a0<\/p>\n
if(questVal >= 100){\r\n      questVal = 0;\r\n    }\r\n    if(exVal >= 100){\r\n      exVal = 0;\r\n    }<\/pre>\n
e.preventDefault()<\/pre>\n
 <\/p>\n
\u3053\u3053\u307e\u3067\u306e\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u4ee5\u4e0b\u306e\u30ea\u30f3\u30af\u304b\u3089\u5b9c\u3057\u304f\u304a\u9858\u3044\u81f4\u3057\u307e\u3059\u3002<\/p>\n
\u30c7\u30e2\u30da\u30fc\u30b8<\/strong><\/a><\/p>\n
http:\/\/webcyou.com\/demo\/js\/webstorage\/index005.html<\/a><\/p>\n
Javascript<\/strong><\/p>\n
function game(){\r\n  var btn = document.querySelector('.btn'),\r\n      questImg = document.querySelector('.questImg'),\r\n      img = questImg.querySelector('img'),\r\n      lvElem = document.querySelector('.lv > .val'),\r\n      questValElem = document.querySelector('.quest > .val'),\r\n      exValElem = document.querySelector('.ex > .val'),\r\n      goldElem = document.querySelector('.gold > .val'),\r\n      questGauge = document.querySelector('.quest > .Gauge > b'),\r\n      exGauge = document.querySelector('.ex > .Gauge > b'),\r\n      lv = 1,\r\n      questVal = 0,\r\n      exVal = 0,\r\n      gold = 0;\r\n  \r\n  img.addEventListener('webkitAnimationEnd', function(){\r\n      questImg.classList.remove('move');\r\n  }, false);\r\n  \r\n  btn.addEventListener("click", function(e){\r\n    e.preventDefault()\r\n    questImg.classList.add('move');\r\n    questVal += 10;\r\n    exVal += 10;\r\n    gold += 10;\r\n    setStatus();\r\n  }, false);\r\n  \r\n  function setStatus(){\r\n    questValElem.innerHTML = questVal;\r\n    exValElem.innerHTML = exVal;\r\n    goldElem.innerHTML = gold;\r\n    questGauge.style.width = questVal + "%";\r\n    exGauge.style.width = exVal + "%";\r\n  \r\n  if(questVal >= 100){\r\n      questVal = 0;\r\n    }\r\n    if(exVal >= 100){\r\n      exVal = 0;\r\n    }\r\n  }\r\n  setStatus();\r\n}\r\nwindow.addEventListener("DOMContentLoaded", game, false);<\/pre>\n
\u4eca\u56de\u306f\u3053\u3053\u307e\u3067\u3068\u306a\u308a\u307e\u3059\u3002\u3061\u306a\u307f\u306b\u5b9f\u969b\u306b\u6d41\u901a\u3057\u3066\u3044\u308b\u30bd\u30fc\u30b7\u30e3\u30eb\u30b2\u30fc\u30e0\u3068\u306f\u7570\u306a\u308a\u307e\u3059\u306e\u3067\u3054\u4e86\u627f\u306e\u307b\u3069\u3092\u5b9c\u3057\u304f\u304a\u9858\u3044\u81f4\u3057\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u524d\u56de\u306e HTML5 Web\u30b9\u30c8\u30ec\u30fc\u30b8\u3067\u30c7\u30fc\u30bf\u3092\u4fdd\u5b58 \u305d\u306e3\uff08\u30af\u30a8\u30b9\u30c8\u9032\u884cCSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff09 \u306e\u7d9a\u304d\u306b\u306a\u308a\u307e\u3059\u3002 \u524d\u56de\u307e\u3067\u306f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u80cc\u666f\u753b\u50cf\u304cCSS3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3057\u3001\u6b69\u3044\u3066\u3044\u308b\u611f\u3058\u307e\u3067\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[171,59,167,177,170,168,176,166,37,47,46,178,138,118],"class_list":["post-4250","post","type-post","status-publish","format-standard","hentry","category-html5","tag-android","tag-android-sdk","tag-css","tag-css3","tag-flash","tag-html","tag-html5","tag-iphone","tag-iphone-","tag-javascript-2","tag-js","tag-178","tag-138","tag-118"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4250"}],"version-history":[{"count":1,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4250\/revisions"}],"predecessor-version":[{"id":4253,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4250\/revisions\/4253"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}