<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function myFunction() { alert("Hello World!"); } //才参数的函数 //如果函数中带有return就会停在return的位置，并且给调用方进行返回值 function myFunctionT(a,b){ alert(a+","+b); return a; } </script> <style> * { border: none; font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; } body { } .center { background-color: #fff; border-radius: 50%; height: 600px; margin: auto; width: 600px; } h1 { color: #495678; font-size: 30px; margin-top: 20px; padding-top: 50px; display: block; text-align: center; text-decoration: none; } a { color: #495678; font-size: 30px; display: block; text-align: center; text-decoration: none; padding-top: 20px; } form { background-color: #495678; box-shadow: 4px 4px #3d4a65; margin: 40px auto; padding: 40px 0 30px 40px; width: 280px; } .btn { outline: none; cursor: pointer; font-size: 20px; height: 45px; margin: 5px 0 5px 10px; width: 45px; } .btn:first-child { margin: 5px 0 5px 10px; } .btn, #display, form { border-radius: 25px; } #display { outline: none; background-color: #98d1dc; box-shadow: inset 6px 6px 0px #3facc0; color: #dededc; font-size: 20px; height: 47px; text-align: right; width: 165px; padding-right: 10px; margin-left: 10px; } .number { background-color: #72778b; box-shadow: 0 5px #5f6680; color: #dededc; } .number:active { box-shadow: 0 2px #5f6680; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); } .operator { background-color: #dededc; box-shadow: 0 5px #bebebe; color: #72778b; } .operator:active { box-shadow: 0 2px #bebebe; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); } .other { background-color: #e3844c; box-shadow: 0 5px #e76a3d; color: #dededc; } .other:active { box-shadow: 0 2px #e76a3d; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); -moz-tranform: translateY(2px); transform: translateY(2px); } </style> </head> <body> <!--示例--> <button onclick="myFunction()">点我</button> <button onclick="myFunctionT('Bob','Builder')">点击这里</button> <!--简单的计算器--> <div class="center"> <h1>HTML CSS, JavaScript 计算器</h1> <a href="https://github.com/guuibayer/simple-calculator" target="_blank"><i class="fa fa-github"></i></a> <form name="calculator"> <input type="button" id="clear" class="btn other" value="C"> <input type="text" id="display"> <br> <input type="button" class="btn number" value="7" onclick="get(this.value);"> <input type="button" class="btn number" value="8" onclick="get(this.value);"> <input type="button" class="btn number" value="9" onclick="get(this.value);"> <input type="button" class="btn operator" value="+" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="4" onclick="get(this.value);"> <input type="button" class="btn number" value="5" onclick="get(this.value);"> <input type="button" class="btn number" value="6" onclick="get(this.value);"> <input type="button" class="btn operator" value="*" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="1" onclick="get(this.value);"> <input type="button" class="btn number" value="2" onclick="get(this.value);"> <input type="button" class="btn number" value="3" onclick="get(this.value);"> <input type="button" class="btn operator" value="-" onclick="get(this.value);"> <br> <input type="button" class="btn number" value="0" onclick="get(this.value);"> <input type="button" class="btn operator" value="." onclick="get(this.value);"> <input type="button" class="btn operator" value="/" onclick="get(this.value);"> <input type="button" class="btn other" value="=" onclick="calculates();"> </form> </div> <script> /* limpa o display */ /*事件监听addEventListener，当clear被点击，就执行下面的方法清空input中的值*/ document.getElementById("clear").addEventListener("click", function() { document.getElementById("display").value = ""; }); /* recebe os valores */ function get(value) { document.getElementById("display").value += value; } /* calcula */ /*js中eval对算术表达式进行求值*/ function calculates() { var result = 0; result = document.getElementById("display").value; document.getElementById("display").value = ""; document.getElementById("display").value = eval(result); }; </script>
//fuxuankuang
看书：<input type="checkbox" name="checkbox" value=1><br> 写字：<input type="checkbox" name="checkbox"value=2><br> 打一下：<input type="checkbox" name="checkbox"value=3><br> 玩游戏：<input type="checkbox" name="checkbox"value=4><br> <input type="button" value="全选" onclick="allcheck(this)"> <script> var checkAll = false; function allcheck(element){ console.log(element); checkAll = !checkAll; console.log(checkAll); //改变了input的值 element.value=checkAll?"全不选":"全选"; console.log(element.value); let inputs = document.getElementsByName('checkbox') for( var index in inputs){ inputs[index].checked = checkAll; } } </script> </body> </html>
原文地址：http://www.cnblogs.com/H-Yan/p/16908583.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
