{"id":28,"date":"2022-12-16T12:09:25","date_gmt":"2022-12-16T03:09:25","guid":{"rendered":"http:\/\/phantom-cgray03.xyz\/?p=28"},"modified":"2023-02-01T17:09:03","modified_gmt":"2023-02-01T08:09:03","slug":"28","status":"publish","type":"post","link":"https:\/\/phantom-cgray03.xyz\/?p=28","title":{"rendered":"\u9078\u629e\u5f8c\u30c0\u30df\u30fc\u7d50\u679c\u3068\u8a08\u7b97\u7d50\u679c\u8868\u793a\u203b\u8981javascript(\u30a2\u30f3\u30b1\u30fc\u30c8)"},"content":{"rendered":"
\n
\n
\n <\/p>\n
\n
\uff5e8\u4e07\u5186\u53f0<\/span><\/div>\n
\uff5e8\u4e07\u5186\u53f0<\/p>\n
\u25cf\u25cf\uff05<\/span><\/div>\n

<\/span><\/span>\n <\/div>\n<\/p><\/div>\n

<\/p>\n

\n
9\u4e07\u5186\u53f0\uff5e12\u4e07\u5186\u53f0<\/span><\/div>\n
9\u4e07\u5186\u53f0\uff5e12\u4e07\u5186\u53f0<\/p>\n
\u25cf\u25cf\uff05<\/span><\/div>\n

<\/span><\/span>\n <\/div>\n<\/p><\/div>\n

<\/p>\n

\n
13\u4e07\u5186\u53f0\uff5e16\u4e07\u5186\u4ee3<\/span><\/div>\n
13\u4e07\u5186\u53f0\uff5e16\u4e07\u5186\u4ee3<\/p>\n
\u25cf\u25cf\uff05<\/span><\/div>\n

<\/span><\/span>\n <\/div>\n<\/p><\/div>\n

<\/p>\n

\n
17\u4e07\u5186\u53f0\uff5e<\/span><\/div>\n
17\u4e07\u5186\u53f0\uff5e<\/p>\n
\u25cf\u25cf\uff05<\/span><\/div>\n

<\/span><\/span>\n <\/div>\n<\/p><\/div>\n


\n <\/form>\n<\/p><\/div>\n

\n

\u4eca\u306e\u5bb6\u306b\u4f4f\u307f\u7d9a\u3051\u308b\u5834\u5408\u30fb\u30fb\u30fb
\n <\/span>
\n \u640d\u3057\u3066\u3057\u307e\u3046\u304b\u3082\u3057\u308c\u307e\u305b\u3093\uff01\n <\/p>\n<\/p><\/div>\n<\/div>\n

\u4e0b\u8a18Beyond\u30b3\u30fc\u30c9<\/p>\n

JS head<\/p>\n

<!-- \u30bf\u30b0\u8a2d\u5b9a\u306eJavaScript head\u306b\u4ee5\u4e0b\u3092\u30ab\u30c3\u30c8\u3057\u3066\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\u3002\r\n    \u540c\u4e00widget\u3092\u8907\u6570\u8ffd\u52a0\u3059\u308b\u5834\u5408\u3001\u8907\u6570\u56de\u8cbc\u4ed8\u3051\u306f\u4e0d\u8981\u3067\u3059\u3002 -->\r\n<script>\r\n    var sbQuestionGraphAndCalc = sbQuestionGraphAndCalc || {};\r\n    (function(_) {\r\n\r\n        const target = '.js-anc-graph-calc';\r\n\r\n        _.questionnaire = function(el) {\r\n            let resultBox = el.querySelector('.js-resultBox');\r\n            let resultTxt = el.querySelector('.js-result');\r\n            let minPlace, maxPlace;\r\n            let itemList = el.querySelectorAll('.choices');\r\n\r\n            itemList.forEach(function(item) {\r\n                let radio = item.querySelector('.choice-radio');\r\n                radio.addEventListener('click', function() {\r\n                    item.classList.add('checked');\r\n                    setView();\r\n                    minPlace = radio.dataset.minprice;\r\n                    maxPlace = radio.dataset.maxprice;\r\n                    if (resultTxt) {\r\n                        calcMoney(minPlace, maxPlace);\r\n                        resultBox.style.display = 'block';\r\n                    }\r\n                }, false);\r\n            });\r\n\r\n            function setView() {\r\n                itemList.forEach(function(item) {\r\n                    let select = item.querySelector('.selecter');\r\n                    let result = item.querySelector('.results');\r\n                    let woodLine = result.querySelector('.wood-line');\r\n\r\n\r\n                    item.style.opacity = '0.7';\r\n                    item.style.opacity = '';\r\n                    select.style.display = "none";\r\n                    result.classList.add('show_result');\r\n                    woodLine.classList.add('widthimp');\r\n\r\n                    let offTimer = setTimeout(function() {\r\n                        woodLine.classList.remove('widthimp');\r\n                    }, 50)\r\n\r\n                });\r\n            }\r\n\r\n            function calcMoney(min, max) {\r\n                let minCalc = parseInt((min - 6) * 12 * 35);\r\n                let maxCalc = parseInt((max - 6) * 12 * 35);\r\n                let text;\r\n                if (min == 0) {\r\n                    text = '<span class="kara">\u301c<\/span>' + maxCalc + '<span class="unit">\u4e07\u5186<\/span>';\r\n                } else if (max == 0) {\r\n                    text = minCalc + '<span class="unit">\u4e07\u5186<\/span><span class="kara">\u301c<\/span>';\r\n                } else {\r\n                    text = minCalc + '<span class="unit">\u4e07\u5186<\/span><span class="kara">\u301c<\/span>' + maxCalc + '<span class="unit">\u4e07\u5186<\/span>';\r\n                }\r\n                resultTxt.innerHTML = text;\r\n            }\r\n        };\r\n\r\n        _.init = function() {\r\n            Array.from(document.querySelectorAll(target), el => {\r\n                _.questionnaire(el);\r\n            })\r\n        };\r\n\r\n    })(sbQuestionGraphAndCalc);\r\n<\/script>\r\n<!-- JavaScript head\u3053\u3053\u307e\u3067 -->\r\n\r\n<!-- \u30bf\u30b0\u8a2d\u5b9a\u306eJavaScript body\u306b\u4ee5\u4e0b\u3092\u30ab\u30c3\u30c8\u3057\u3066\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\u3002\r\n    \u540c\u4e00widget\u3092\u8907\u6570\u8ffd\u52a0\u3059\u308b\u5834\u5408\u3001\u8907\u6570\u56de\u8cbc\u4ed8\u3051\u306f\u4e0d\u8981\u3067\u3059\u3002 -->\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', sbQuestionGraphAndCalc.init, false);\r\n<\/script>\r\n<!-- JavaScript body\u3053\u3053\u307e\u3067 --><\/code><\/pre>\n
HTML<\/p>\n
<div class="blackwood_box js-anc-graph-calc">\r\n    <div class="choices_box">\r\n        <form>\r\n            <!--\u56de\u7b541\u3053\u3053\u304b\u3089-->\r\n            <div class="choices">\r\n                <div class="selecter"><span class="choice-radio" data-minprice="0" data-maxprice="8">\uff5e8\u4e07\u5186\u53f0<\/span><\/div>\r\n                <div class="results"><span class="result-text">\uff5e8\u4e07\u5186\u53f0<span>\r\n                            <div class="wood-line" style="width:52%"><span>\u25cf\u25cf\uff05<\/span><\/div>\r\n                        <\/span><\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <!--\u56de\u7b541\u3053\u3053\u307e\u3067--><!--\u56de\u7b542\u3053\u3053\u304b\u3089-->\r\n            <div class="choices">\r\n                <div class="selecter"><span class="choice-radio" data-minprice="9" data-maxprice="12">9\u4e07\u5186\u53f0\uff5e12\u4e07\u5186\u53f0<\/span><\/div>\r\n                <div class="results"><span class="result-text">9\u4e07\u5186\u53f0\uff5e12\u4e07\u5186\u53f0<span>\r\n                            <div class="wood-line" style="width:20%"><span>\u25cf\u25cf\uff05<\/span><\/div>\r\n                        <\/span><\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <!--\u56de\u7b542\u3053\u3053\u307e\u3067--><!--\u56de\u7b543\u3053\u3053\u304b\u3089-->\r\n            <div class="choices">\r\n                <div class="selecter"><span class="choice-radio" data-minprice="13" data-maxprice="16">13\u4e07\u5186\u53f0\uff5e16\u4e07\u5186\u4ee3<\/span><\/div>\r\n                <div class="results"><span class="result-text">13\u4e07\u5186\u53f0\uff5e16\u4e07\u5186\u4ee3<span>\r\n                            <div class="wood-line" style="width:15%"><span>\u25cf\u25cf\uff05<\/span><\/div>\r\n                        <\/span><\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <!--\u56de\u7b543\u3053\u3053\u307e\u3067--><!--\u56de\u7b544\u3053\u3053\u304b\u3089-->\r\n            <div class="choices">\r\n                <div class="selecter"><span class="choice-radio" data-minprice="17" data-maxprice="0">17\u4e07\u5186\u53f0\uff5e<\/span><\/div>\r\n                <div class="results"><span class="result-text">17\u4e07\u5186\u53f0\uff5e<span>\r\n                            <div class="wood-line" style="width:13%"><span>\u25cf\u25cf\uff05<\/span><\/div>\r\n                        <\/span><\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <!--\u56de\u7b544\u3053\u3053\u307e\u3067-->\r\n        <\/form>\r\n    <\/div>\r\n    <div class="result__box js-resultBox">\r\n        <p class="text">\u4eca\u306e\u5bb6\u306b\u4f4f\u307f\u7d9a\u3051\u308b\u5834\u5408\u30fb\u30fb\u30fb<br>\r\n            <span class="select js-result"><\/span><br>\r\n            \u640d\u3057\u3066\u3057\u307e\u3046\u304b\u3082\u3057\u308c\u307e\u305b\u3093\uff01\r\n        <\/p>\r\n    <\/div>\r\n<\/div>\r\n<\/code><\/pre>\n
CSS<\/p>\n
 .blackwood_box {\r\n  position: relative;\r\n  color: #613d29;\r\n  margin: 30px 0;\r\n}\r\n\r\n .blackwood_box .results {\r\n  display: none;\r\n}\r\n\r\n .blackwood_box .results.show_result {\r\n  display: block;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n .blackwood_box .selecter {\r\n  margin-bottom: 10px;\r\n}\r\n\r\n .blackwood_box .selecter>span {\r\n  border: solid 3px #613d29;\r\n  display: block;\r\n  padding: 10px 15px;\r\n  font-weight: bold;\r\n  border-radius: 28px;\r\n}\r\n\r\n .blackwood_box .selecter>span:hover {\r\n  background: #f96680;\r\n  border-color: #fff;\r\n  color: #fff;\r\n  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);\r\n  transition: 200ms;\r\n}\r\n\r\n .show_result .wood-line {\r\n  background: #f96680;\r\n  color: white;\r\n  border-radius: 30px;\r\n  transition: 1s;\r\n  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);\r\n  width: 1%;\r\n}\r\n\r\n .wood-line span {\r\n  width: 100%;\r\n  text-align: right;\r\n  display: block;\r\n  padding: 5px 10px 5px 0;\r\n  box-sizing: border-box;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/*\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u8868\u793a\u6642\uff08max-width\u306f\u9069\u5b9c\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\uff09*\/\r\n@media screen and (max-width:767px) {\r\n   .wood-line span {\r\n    padding-right: 3px;\r\n    font-size: 0.7em;\r\n  }\r\n}\r\n\r\n span.result-text {\r\n  font-weight: bold;\r\n}\r\n\r\n .checked .results span.result-text {\r\n  padding-left: 1.1em;\r\n  position: relative;\r\n  color: red;\r\n}\r\n\r\n .checked .results span.result-text::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 1em;\r\n  height: 1em;\r\n  background-position: center center;\r\n  background-repeat: no-repeat;\r\n  background-image: url('data:image\/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22check%22%20class%3D%22svg-inline--fa%20fa-check%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ff0000%22%20d%3D%22M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');\r\n}\r\n\r\n span.result-text>span {\r\n  display: block;\r\n}\r\n\r\n .result__box {\r\n  margin-top: 50px;\r\n  display: none;\r\n}\r\n\r\n .result__box .text {\r\n  font-size: 1.3em;\r\n  font-weight: bold;\r\n  line-height: 1.5;\r\n}\r\n\r\n .result__box .text .select {\r\n  font-size: 1.5em;\r\n  color: #E06A3B;\r\n  font-weight: bold;\r\n  letter-spacing: 0.03em;\r\n}\r\n\r\n .result__box .text .select .unit {\r\n  font-size: 0.7em;\r\n}\r\n\r\n .result__box .text .select .kara {\r\n  color: #613d29;\r\n  font-size: 0.7em;\r\n}\r\n\r\n .widthimp {\r\n  width: 1% !important;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\uff5e8\u4e07\u5186\u53f0 \uff5e8\u4e07\u5186\u53f0 \u25cf\u25cf\uff05 9\u4e07\u5186\u53f0\uff5e12\u4e07\u5186\u53f0 9\u4e07\u5186\u53f0\uff5e12\u4e07\u5186\u53f0 \u25cf\u25cf\uff05 13\u4e07\u5186\u53f0\uff5e16\u4e07\u5186\u4ee3 13\u4e07\u5186\u53f0\uff5e16\u4e07\u5186\u4ee3 \u25cf\u25cf\uff05 17\u4e07\u5186\u53f0\uff5e 17\u4e07\u5186\u53f0\uff5e \u25cf\u25cf\uff05 \u4eca\u306e\u5bb6\u306b\u4f4f\u307f\u7d9a\u3051\u308b\u5834\u5408\u30fb\u30fb\u30fb \u640d\u3057\u3066\u3057\u307e\u3046\u304b<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,1],"tags":[4,3],"class_list":["post-28","post","type-post","status-publish","format-standard","hentry","category-6","category-uncategorized","tag-simplicity02","tag-3"],"_links":{"self":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":9,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":37,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/28\/revisions\/37"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}