Twikoo
在link下index.md
中添加如下代码即可实现
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <p style="padding:0 0 0 .8rem"> 请<strong>勾选</strong>你符合的条件: </p> <div id="friendlink_checkboxs" style="padding:0 0 0 1.6rem"> <p> <label class="checkbox"> <input type="checkbox" id="checkbox1" onclick="checkForm()"> 我已添加 <b>Hwe</b> 博客的友情链接 </label> </p> <p> <label class="checkbox"> <input type="checkbox" id="checkbox2" onclick="checkForm()"> 我的链接主体为 <b>个人</b>,网站类型为<b>博客</b> </label> </p> <p> <label class="checkbox"> <input type="checkbox" id="checkbox3" onclick="checkForm()">我的网站现在可以在中国大陆区域正常访问 </label> </p> <p> <label class="checkbox"> <input type="checkbox" id="checkbox4" onclick="checkForm()">网站内容符合中国大陆法律法规 </label> </p> <p> <label class="checkbox"> <input type="checkbox" id="checkbox5" onclick="checkForm()">我的网站可以在1分钟内加载完成首屏 </label> </p> </div>
|
javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <script> var twikooSubmit = document.getElementsByClassName("tk-submit")[0]; if (twikooSubmit) { twikooSubmit.style.opacity = "0"; } function checkForm() { var checkbox1 = document.getElementById("checkbox1"); var checkbox2 = document.getElementById("checkbox2"); var checkbox3 = document.getElementById("checkbox3"); var checkbox4 = document.getElementById("checkbox4"); var checkbox5 = document.getElementById("checkbox5"); var twikooSubmit = document.getElementsByClassName("tk-submit")[0]; if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked && checkbox5.checked) { twikooSubmit.style.opacity = "1"; twikooSubmit.style.height = "auto"; twikooSubmit.style.overflow = "auto"; var input = document.getElementsByClassName('el-textarea__inner')[0]; let evt = document.createEvent('HTMLEvents'); evt.initEvent('input', true, true); input.value = '昵称(请勿包含博客等字样):\n网站地址(要求博客地址,请勿提交个人主页):\n头像图片url(请提供尽可能清晰的图片,我会上传到我自己的图床):\n描述:\n'; input.dispatchEvent(evt); input.focus(); input.setSelectionRange(-1, -1); } else { twikooSubmit.style.opacity = "0"; twikooSubmit.style.height = "0"; twikooSubmit.style.overflow = "hidden"; } } </script>
|
css
1 2 3 4 5 6 7 8
| <style> .tk-comments > .tk-submit { opacity: 0; height: 0; transition: opacity .5s, height .5s; overflow: hidden; } </style>
|
Waline
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <p style="padding:0 0 0 .8rem"> 请<strong>勾选</strong>你符合的条件,满足所有条件才可评论申请: </p> <div id="friendlink_checkboxs" style="padding:0 0 0 1.6rem"> <p> <label class="checkbox"> <input type="checkbox" id="checkbox1" onclick="checkForm()"> 我已添加 <b>Hwe</b>的友情链接 </label> </p> <p> <label class="checkbox"> <input type="checkbox" id="checkbox2" onclick="checkForm()"> 我的链接主体为<b>个人</b>,网站类型为<b>博客</b> </label> </p> <p> <label class="checkbox"> <input type="checkbox" id="checkbox3" onclick="checkForm()">我的网站现在可以在中国大陆区域正常访问 </label> </p> <p> <label class="checkbox"> <input type="checkbox" id="checkbox4" onclick="checkForm()">网站内容符合中国大陆法律法规 </label> </p> <p> <label class="checkbox"> <input type="checkbox" id="checkbox5" onclick="checkForm()">我的网站可以在1分钟内加载完成首屏 </label> </p> </div>
|
javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <script> var walineSubmit = document.getElementsByClassName("wl-comment")[0]; if (walineSubmit) { walineSubmit.style.opacity = "0"; } function checkForm() { var checkbox1 = document.getElementById("checkbox1"); var checkbox2 = document.getElementById("checkbox2"); var checkbox3 = document.getElementById("checkbox3"); var checkbox4 = document.getElementById("checkbox4"); var checkbox5 = document.getElementById("checkbox5"); var walineSubmit = document.getElementsByClassName("wl-comment")[0]; if (checkbox1.checked && checkbox2.checked && checkbox3.checked && checkbox4.checked && checkbox5.checked) { walineSubmit.style.opacity = "1"; walineSubmit.style.height = "auto"; walineSubmit.style.overflow = "auto"; var input = document.getElementsByClassName("wl-editor")[0]; let evt = new Event('input'); input.dispatchEvent(evt); input.value = '昵称: \n博客链接: \n头像链接: \n描述: \n'; input.setSelectionRange(-1, -1); } else { walineSubmit.style.opacity = "0"; walineSubmit.style.height = "0"; walineSubmit.style.overflow = "hidden"; } } </script>
|
css
1 2 3 4 5 6 7 8
| <style> .wl-comment { opacity: 0; height: 0; transition: opacity .5s, height .5s; overflow: hidden; } </style>
|
效果
请勾选你符合的条件: