JavaScript由浏览器编译运行
JS的导入方式有两种,一种直接定义,第二种通过src引入;可以存放在<head>头部,但是强烈建议放在<body>的最下面,因为如果你引入外部的JS样式很久都不能出来,会影响到用户体验。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> alert('123') </script> </head> <body> <script> alert('456') </script> <script src="commons.js"></script> </body> </html>
JS的变量定义,有var表示局部变量,只能在函数体内被识别,没有var表示全局变量,哪里都可以使用。
<body> <script> function f1(){ i = 123 } f1(); alert(i); </script> </body>
利用JS实现的跑马灯效果:
<body> <div id = "i1" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div> <script> setInterval("f1()",1000); function f1(){ var tag = document.getElementById('i1'); var text = tag.innerText; // alert(text); var a = text.charAt(0); var sub = text.substring(1,text.length); var new_str = sub + a; tag.innerText = new_str; } </script> </body>
JS的序列化
dic = {'k1':'123','k2':456}
Object {k1: "123", k2: 456}
dic_str = JSON.stringify(dic) //将字典转换为字符串
"{"k1":"123","k2":456}"
dic_str
"{"k1":"123","k2":456}"
dic_new = JSON.parse(dic_str) //将字符串转为字典
Object {k1: "123", k2: 456}
dic_new
Object {k1: "123", k2: 456}
JS之encode和decode,针对于URL使用
<script> var site = "http://www.baidu.com?王宝强"; var site_url = encodeURI(site); console.log(site_url); var site_de = decodeURI(site_url); console.log(site_de); </script>
执行结果:
http://www.baidu.com?%E7%8E%8B%E5%AE%9D%E5%BC%BAs3.html:13
http://www.baidu.com?王宝强
JS之escape和unescape针对字符串进行转义,譬如在cookies的使用中
JS之函数的分类
<script> //普通函数 setInterval('f1()',2000) function f1(){ alert('123') } </script> <script> //匿名函数,调用的过程中不使用函数名 setInterval(function(){ alert('123'); },2000) </script> <script> //自执行函数,分为两部分,前面是函数,后面是传递的参数()()。 (function(args){ alert(args); })(123) </script>
JS的作用域
<body> <script> xo = "alex"; function func(){ var xo = "eric"; function inner(){ console.log(xo); } xo = "severn"; return inner; } var ret = func(); ret(); </script> </body>
执行结果:
severn
搜索框的实现:
<body> <div> <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" /> <!--<input id="i2 " type="text" onblur="blur();">--> </div> <script type="text/javascript"> function Focus(){ var tag = document.getElementById('i1'); if (tag.value == "请输入关键字"){ tag.value = ""; } } function Blur(){ var tag = document.getElementById('i1'); if (tag.value.trim().length == 0){ tag.value = "请输入关键字"; } } </script> </body>
模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } .hide{ display: none;!important; } .shade{ position: fixed; top:0; bottom: 0; left: 0; right: 0; background-color: aquamarine; opacity: 0.6; z-index: 1000; } .modal{ height: 200px; 400px; background-color: darkorange; position: fixed; top: 50%; left: 50%; margin-left: -200px; margin-top: -100px; z-index: 1001 } </style> </head> <body> <div style="height: 2000px;background-color: #F1F1F1;"> <input type="button" value="点我" onclick="Click()"/> </div> <div id="shade" class="shade hide"></div> <div id="modal" class="modal hide"> <input type="button" value="取消" onclick="DeClick()"/> </div> <script> function Click(){ var t1 = document.getElementById("shade"); var t2 = document.getElementById("modal"); t1.classList.remove("hide"); t2.classList.remove("hide"); } function DeClick(){ var t1 = document.getElementById("shade"); var t2 = document.getElementById("modal"); t1.classList.add("hide"); t2.classList.add("hide"); } </script> </body> </html>
用JS实现checkbox选择框的选择
<body> <table border="1 solid red" id="tb"> <input type="button" value="全选" onclick="CheckALL()"/> <input type="button" value="取消" onclick="CancelALL()"/> <input type="button" value="反选" onclick="ReverseALL()"/> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td><input type="checkbox"/></td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td><input type="checkbox"/></td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td><input type="checkbox"/></td> <td>内容2</td> <td>内容3</td> </tr> </table> <script> function CheckALL(){ var tb = document.getElementById("tb"); var tbchild = tb.children; var trs = tbchild[0].children; for (var i=1;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; ck.checked = true; // ck.setAttribute("checked","checked"); } } function CancelALL(){ var tb = document.getElementById("tb"); var tbchild = tb.children; var trs = tbchild[0].children; for (var i=1;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; if(ck.checked) { ck.checked = false; // ck.removeAttribute("checked"); } } } function ReverseALL(){ var tb = document.getElementById("tb"); var tbchild = tb.children; var trs = tbchild[0].children; for (var i=1;i<trs.length;i++){ var current_tr = trs[i]; var ck = current_tr.firstElementChild.firstElementChild; if (ck.checked){ ck.checked = false; }else{ ck.checked = true; } } } </script> </body>
JS实现的点赞功能:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .item{ padding:50px; position: relative; } .item span{ position: absolute; top: 50px; left:74px; opacity: 1; font-size: 24px; } </style> </head> <body> <div class="item"> <a onclick="Favor(this)">赞1</a> </div> <div class="item"> <a onclick="Favor(this)">赞2</a> </div> <div class="item"> <a onclick="Favor(this)">赞3</a> </div> <div class="item"> <a onclick="Favor(this)">赞4</a> </div> <script> function Favor(ths){ console.log(ths); console.log(ths.parentElement); var top = 50; var left = 74; var op = 1; var fontSize = 24; var tag = document.createElement("span"); tag.innerText = '+1'; tag.style.position = 'absolute'; tag.style.top = top +'px'; tag.style.left = left +'px'; tag.style.opacity = op; tag.style.fontSize = fontSize +'px'; ths.parentElement.appendChild(tag); // function ftime(){ // top -= 10; // left += 10; // op -= 0.1; // fontSize += 10; // // tag.style.top = top +'px'; // tag.style.left = left +'px'; // tag.style.opacity = op; // tag.style.fontSize = fontSize +'px'; // // if (op <= 0){ // console.log("KKKK") //// clearInterval(interval); //// ths.parentElement.removeChild(tag); // } // } // setInterval('ftime()',50); var interval = setInterval(function(){ top -= 10; left += 10; op -= 0.1; fontSize += 10; tag.style.top = top +'px'; tag.style.left = left +'px'; tag.style.opacity = op; tag.style.fontSize = fontSize +'px'; if (op <= 0){ clearInterval(interval); ths.parentElement.removeChild(tag); } },50) } </script> </body> </html>
JS定时器一次执行:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id = "status" style="color:red"></div> <input type = "submit" onclick="DeleteStatus()" value="删除"/> <script> function DeleteStatus(){ var s = document.getElementById("status"); s.innerText ="删除成功"; setTimeout(function(){ s.innerText = ""; },5000) } </script> </body> </html>
JS之返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .back{ position: fixed; right: 20px; bottom: 20px; } .hide{ display: none; } </style> </head> <body onscroll="BodyScroll()"> <div style="height: 2000px;background-color: aquamarine" ></div> <div id="back" class="back hide" onclick="BackTop()" style="cursor: pointer;color: crimson">返回顶部</div> <script> function BackTop(){ document.body.scrollTop = 0; } function BodyScroll(){ var s = document.body.scrollTop; var t = document.getElementById("back"); if (s >= 100){ t.classList.remove("hide"); }else{ t.classList.add("hide"); } } </script> </body> </html>