{"id":38,"date":"2022-12-16T12:28:46","date_gmt":"2022-12-16T03:28:46","guid":{"rendered":"http:\/\/phantom-cgray03.xyz\/?p=38"},"modified":"2023-02-01T17:09:51","modified_gmt":"2023-02-01T08:09:51","slug":"post-38","status":"publish","type":"post","link":"https:\/\/phantom-cgray03.xyz\/?p=38","title":{"rendered":"\u56de\u7b54\u5f8c\u30c0\u30df\u30fc\u7d50\u679c\u8868\u793a\u203b\u8981javascript(\u30a2\u30f3\u30b1\u30fc\u30c8)"},"content":{"rendered":"
\n

Q1.\u30a2\u30f3\u30b1\u30fc\u30c8\u898b\u51fa\u3057\u304c\u5165\u308a\u307e\u3059<\/p>\n

\n \"\"\n <\/div>\n
\n
\n
\n
\u56de\u7b54\uff11<\/span><\/div>\n
\u56de\u7b54\uff11<\/p>\n
\u25cf\u25cf\u7968<\/span><\/div>\n

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

\n
\u56de\u7b54\uff12<\/span><\/div>\n
\u56de\u7b54\uff12<\/p>\n
\u25cf\u25cf\u7968<\/span><\/div>\n

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

\n
\u56de\u7b54\uff13<\/span><\/div>\n
\u56de\u7b54\uff13<\/p>\n
\u25cf\u25cf\u7968<\/span><\/div>\n

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

\n
\u56de\u7b54\uff14<\/span><\/div>\n
\u56de\u7b54\uff14<\/p>\n
\u25cf\u25cf\u7968<\/span><\/div>\n

<\/span><\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/form>\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 sbAncChoices = sbAncChoices || {};\r\n    (function(_) {\r\n\r\n        \/* \u5bfe\u8c61\u306eclass *\/\r\n        const target = '.js-anc-choices';\r\n\r\n        _.questionnaire = function(selectors) {\r\n            let elList = document.querySelectorAll(selectors);\r\n            elList.forEach(function(el) {\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                    }, false);\r\n                });\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        };\r\n\r\n        _.init = function() {\r\n            _.questionnaire(target);\r\n        };\r\n\r\n    })(sbAncChoices);\r\n<\/script>\r\n<!-- JavaScript head\u3053\u3053\u307e\u3067 -->\r\n\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', sbAncChoices.init, false);\r\n<\/script>\r\n<!-- JavaScript body\u3053\u3053\u307e\u3067 -->\r\n<\/code><\/pre>\n
HTML<\/p>\n
\r\n<div class="blackwood_box js-anc-choices">\r\n    <p class="head">Q1.\u30a2\u30f3\u30b1\u30fc\u30c8\u898b\u51fa\u3057\u304c\u5165\u308a\u307e\u3059<\/p>\r\n    <div class="img__box">\r\n        <img src="https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png" alt="" height="360" width="540" draggable="false">\r\n    <\/div>\r\n    <div class="choices_box">\r\n        <form>\r\n            <div class="choices">\r\n                <div class="selecter"><span class="choice-radio">\u56de\u7b54\uff11<\/span><\/div>\r\n                <div class="results"><span class="result-text">\u56de\u7b54\uff11<span>\r\n                            <div class="wood-line" style="width:52%"><span>\u25cf\u25cf\u7968<\/span><\/div>\r\n                        <\/span><\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class="choices">\r\n                <div class="selecter"><span class="choice-radio">\u56de\u7b54\uff12<\/span><\/div>\r\n                <div class="results"><span class="result-text">\u56de\u7b54\uff12<span>\r\n                            <div class="wood-line" style="width:20%"><span>\u25cf\u25cf\u7968<\/span><\/div>\r\n                        <\/span><\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class="choices">\r\n                <div class="selecter"><span class="choice-radio">\u56de\u7b54\uff13<\/span><\/div>\r\n                <div class="results"><span class="result-text">\u56de\u7b54\uff13<span>\r\n                            <div class="wood-line" style="width:15%"><span>\u25cf\u25cf\u7968<\/span><\/div>\r\n                        <\/span><\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class="choices">\r\n                <div class="selecter"><span class="choice-radio">\u56de\u7b54\uff14<\/span><\/div>\r\n                <div class="results"><span class="result-text">\u56de\u7b54\uff14<span>\r\n                            <div class="wood-line" style="width:13%"><span>\u25cf\u25cf\u7968<\/span><\/div>\r\n                        <\/span><\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/form>\r\n    <\/div>\r\n<\/div><\/code><\/pre>\n
<\/code><\/p>\n
CSS<\/p>\n
 .blackwood_box .head {\r\n  width: calc(100% - 20px);\r\n  height: auto;\r\n  background: #EAA8BF;\r\n  padding: 10px;\r\n  margin: 0;\r\n  color: #fff;\r\n  font-size: 30px;\r\n  font-weight: bold;\r\n  text-align: center;\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n   .blackwood_box .head {\r\n    font-size: 19px;\r\n    margin: 30px 0 20px;\r\n  }\r\n}\r\n\r\n .img__box,\r\n .choices_box {\r\n  width: calc(100% - 20px);\r\n  height: auto;\r\n  padding: 0 10px;\r\n  margin-top: 10px;\r\n}\r\n\r\n .img__box img {\r\n  width: 100%;\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 .blackwood_box .selecter {\r\n  display: block;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n .blackwood_box .selecter>span {\r\n  border: solid 2px #222;\r\n  display: block;\r\n  padding: 10px 15px;\r\n  font-weight: bold;\r\n  border-radius: 10vw;\r\n}\r\n\r\n .blackwood_box .selecter>span:hover {\r\n  background: #222;\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: #222;\r\n  color: white;\r\n  border-radius: 10vw;\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 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}\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%22currentColor%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  border: 1px solid #000000;\r\n  border-radius: 30px;\r\n}\r\n\r\n .widthimp {\r\n  width: 1% !important;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Q1.\u30a2\u30f3\u30b1\u30fc\u30c8\u898b\u51fa\u3057\u304c\u5165\u308a\u307e\u3059 \u56de\u7b54\uff11 \u56de\u7b54\uff11 \u25cf\u25cf\u7968 \u56de\u7b54\uff12 \u56de\u7b54\uff12 \u25cf\u25cf\u7968 \u56de\u7b54\uff13 \u56de\u7b54\uff13 \u25cf\u25cf\u7968 \u56de\u7b54\uff14 \u56de\u7b54\uff14 \u25cf\u25cf\u7968 \u4e0b\u8a18Beyond\u30b3\u30fc\u30c9 JS head lt;!– \u30bf\u30b0\u8a2d\u5b9a\u306eJavaScript h<\/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-38","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\/38","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=38"}],"version-history":[{"count":2,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/38\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}