(1)數(shù)組去重
| <!DOCTYPE html> |
| | | +<html lang="en"> |
| | | +<head> |
| | | + <meta charset="UTF-8"> |
| | | + <title>數(shù)組去重</title> |
| | | + <script type="text/javascript"> |
| | | + var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4]; |
| | | + var aRr2 = []; |
| | | + |
| | | + for(var i=0; i<aRr.length; i++){ |
| | | + //判斷元素第一次出現(xiàn)的位置，恰好是當(dāng)前索引時(shí)，就將元素放入新數(shù)組 |
| | | + if(aRr.indexOf(aRr[i]) == i){ |
| | | + aRr2.push(aRr[i]); |
| | | + } |
| | | + } |
| | | + |
| | | + alert(aRr2);//1,3,4,6,9,2,5 |
| | | + </script> |
| | | +</head> |
| | | +<body> |
| | | + |
| | | +</body> |
| | | +</html> |
[View](https://github.com/phoenixshow/FrontCode/blob/c576e2a3acc5c3b519a0264ac6decb58f29ddb09/demo139_%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%A4%84%E7%90%86%E7%9A%84%E6%96%B9%E6%B3%95.html)
52 [demo139_字符串處理的方法.html](https://github.com/phoenixshow/FrontCode/commit/c576e2a3acc5c3b519a0264ac6decb58f29ddb09#diff-2fe64fbec460a6c275af14e7b7cf2e2d "demo139_字符串處理的方法.html")
| | | @@ -0,0 +1,52 @@ |
| | | +<!DOCTYPE html> |
| | | +<html lang="en"> |
| | | +<head> |
| | | + <meta charset="UTF-8"> |
| | | + <title>字符串處理的方法</title> |
| | | + <script type="text/javascript"> |
| | | + /*字符串切斷轉(zhuǎn)成數(shù)組*/ |
| | | + var sTr = '2018-06-20'; |
| | | + var aRr = sTr.split('-'); |
| | | + // alert(aRr);//2018,06,20 |
| | | + // console.log(aRr); |
| | | + |
| | | + var aRr2 = sTr.split(''); |
| | | + // console.log(aRr2); |
| | | + |
| | | + /*實(shí)際上就是修改了<title>標(biāo)簽的內(nèi)容*/ |
| | | + // document.title = aRr2; |
| | | + |
| | | + var sTr2 = '#div1'; |
| | | + var sTr3 = '.div1'; |
| | | + |
| | | + /*獲取指定索引的字符*/ |
| | | + var sTr4 = sTr2.charAt(0); |
| | | + if(sTr4 == '#'){ |
| | | + // alert('id選擇器'); |
| | | + } |
| | | + |
| | | + /*查看子串第一次出現(xiàn)的位置*/ |
| | | + var sTr5 = 'Microsoft Yahei'; |
| | | + var num = sTr5.indexOf('Yahei'); |
| | | + // alert(num);//10 |
| | | + |
| | | + var num2 = sTr5.indexOf('xihei'); |
| | | + // alert(num2);//沒(méi)有找到就彈出-1 |
| | | + |
| | | + /*substring截取子串*/ |
| | | + //從10開(kāi)始，截到15（包括開(kāi)始位置，不包括結(jié)束位置） |
| | | + // var sTr6 = sTr5.substring(10,15);//Yahei |
| | | + //從10開(kāi)始截取到末尾 |
| | | + var sTr6 = sTr5.substring(10);//Yahei |
| | | + // alert(sTr6); |
| | | + |
| | | + /*全部轉(zhuǎn)為大寫(xiě)字母*/ |
| | | + // alert(sTr6.toUpperCase());//YAHEI |
| | | + /*全部轉(zhuǎn)為小寫(xiě)字母*/ |
| | | + alert(sTr6.toLowerCase());//yahei |
| | | + </script> |
| | | +</head> |
| | | +<body> |
| | | + |
| | | +</body> |
| | | +</html> |
(2)字符串反轉(zhuǎn)
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>字符串反轉(zhuǎn)</title>
+ <script type="text/javascript">
+ var sTr = "123asdf79888asdfe21";
+ //1、split字符串轉(zhuǎn)成數(shù)組
+ //2、reverse數(shù)組反轉(zhuǎn)
+ //3、join數(shù)組轉(zhuǎn)成字符串
+ var sTr2 = sTr.split('').reverse().join('');
+ alert(sTr2);//12efdsa88897fdsa321
+ </script>
+</head>
+<body>
+
+</body>
+</html>
(3)計(jì)算器
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>計(jì)算器</title>
+ <script type="text/javascript">
+ window.onload = function(){
+ var oInput01 = document.getElementById('input01');
+ var oInput02 = document.getElementById('input02');
+ var oSelect = document.getElementById('select');
+ var oBtn = document.getElementById('btn');
+
+ oBtn.onclick = function(){
+ var val01 = oInput01.value;
+ var val02 = oInput02.value;
+
+ //不做此判斷會(huì)彈出“NaN”
+ if(val01=="" || val02==""){
+ alert('輸入框不能為空！');
+ return;
+ }
+ if(isNaN(val01) || isNaN(val02)){
+ alert('請(qǐng)輸入數(shù)字！');
+ return;
+ }
+ switch(oSelect.value){
+ case '0':
+ alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
+ break;
+ case '1':
+ alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
+ break;
+ case '2':
+ alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
+ break;
+ case '3':
+ alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
+ break;
+ }
+ }
+ }
+ </script>
+</head>
+<body>
+ <h1>計(jì)算器</h1>
+ <input type="text" name="" id="input01" />
+ <select id="select">
+ <option value="0">+</option>
+ <option value="1">-</option>
+ <option value="2">*</option>
+ <option value="3">/</option>
+ </select>
+ <input type="text" name="" id="input02" />
+ <input type="button" name="" value="計(jì)算" id="btn" />
+</body>
+</html>
(4)定時(shí)器彈框
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>定時(shí)器彈框</title>
+ <style type="text/css">
+ .pop{
+ width: 400px;
+ height: 300px;
+ background-color: #fff;
+ border: 1px solid #000;
+ /*固定定位*/
+ position: fixed;
+ /*左上角位于頁(yè)面中心*/
+ left: 50%;
+ top: 50%;
+ /*讓div向左偏移半個(gè)寬度、向上偏移半個(gè)高度，使div位于頁(yè)面中心*/
+ margin-left: -200px;
+ margin-top: -150px;
+ /*彈窗在最上面*/
+ z-index: 9999;
+ }
+ /*遮罩樣式*/
+ .mask{
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ left: 0;
+ top: 0;
+ /*設(shè)置透明度30%*/
+ opacity: 0.3;
+ filter: alpha(opacity=30);/*兼容IE6、7、8*/
+ /*遮罩在彈窗的下面，在網(wǎng)頁(yè)所有內(nèi)容的上面*/
+ z-index: 9990;
+ }
+ .pop_con{
+ display: none;/*默認(rèn)不顯示，用定時(shí)器顯示*/
+ }
+ </style>
+ <script type="text/javascript">
+ /*
+ setTimeout 只執(zhí)行一次的定時(shí)器
+ clearTimeout 關(guān)閉只執(zhí)行一次的定時(shí)器
+ setInterval 反復(fù)執(zhí)行的定時(shí)器
+ clearInterval 關(guān)閉反復(fù)執(zhí)行的定時(shí)器
+ */
+
+ window.onload = function(){
+ var oPop = document.getElementById('pop');
+ var oShut = document.getElementById('shutOff');
+
+ /*setTimeout(showPop, 3000);//開(kāi)啟定時(shí)器，3秒后調(diào)用函數(shù)showPop()彈框
+
+ function showPop(){
+ oPop.style.display = 'block';//顯示彈框和遮罩
+ }*/
+ //開(kāi)啟定時(shí)器的簡(jiǎn)寫(xiě)方式：調(diào)用匿名函數(shù)
+ setTimeout(function(){
+ oPop.style.display = 'block';
+ }, 3000);
+
+ oShut.onclick = function(){
+ oPop.style.display = 'none';//關(guān)閉彈框和遮罩
+ }
+ }
+ </script>
+</head>
+<body>
+ <h1>首頁(yè)標(biāo)題</h1>
+ <p>頁(yè)面內(nèi)容</p>
+ <a >百度網(wǎng)</a>
+
+
+ <div class="pop_con" id="pop">
+ <div class="pop">
+ <h3>提示信息！</h3>
+ <a href="#" id="shutOff">關(guān)閉</a>
+ </div>
+ <div class="mask"></div>
+ </div>
+</body>
+</html>
(5)定時(shí)器的基本用法
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>定時(shí)器的基本用法</title>
+ <style type="text/css">
+
+ </style>
+ <script type="text/javascript">
+ //單次定時(shí)器
+ var timer = setTimeout(function(){
+ alert('hello!');
+ }, 3000);
+
+ //清除單次定時(shí)器
+ clearTimeout(timer);
+
+ //反復(fù)循環(huán)定時(shí)器
+ var timer2 = setInterval(function(){
+ alert('hi~~~');
+ }, 2000);
+
+ //清除反復(fù)循環(huán)定時(shí)器
+ clearInterval(timer2);
+ </script>
+</head>
+<body>
+
+</body>
+</html>
(6)定時(shí)器動(dòng)畫(huà)
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>定時(shí)器動(dòng)畫(huà)</title>
+ <style type="text/css">
+ .box{
+ width: 100px;
+ height: 100px;
+ background-color: gold;
+ position: fixed;
+ left: 20px;
+ top: 20px;
+ }
+ </style>
+ <script type="text/javascript">
+ window.onload = function(){
+ var oBox = document.getElementById('box');
+
+ var left = 20;
+ //反復(fù)循環(huán)定時(shí)器，每30毫秒修改一次盒子的left值
+ var timer = setInterval(function(){
+ left += 2;
+ oBox.style.left = left + 'px';
+
+ //當(dāng)left值大于700時(shí)停止動(dòng)畫(huà)（清除定時(shí)器）
+ if(left > 700){
+ clearInterval(timer);
+ }
+ },30);
+ }
+ </script>
+</head>
+<body>
+ <div class="box" id="box"></div>
+</body>
+</html>
(7)時(shí)鐘
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>時(shí)鐘</title>
+ <style type="text/css">
+
+ </style>
+ <script type="text/javascript">
+ window.onload = function(){
+ var oBox = document.getElementById('box');
+
+ function timeGo(){
+ var now = new Date();
+ // alert(now);//彈出美式時(shí)間：Wed Jun 20 2018 15:27:13 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
+ var year = now.getFullYear();//2018年
+ var month = now.getMonth() + 1;//6月彈出5//范圍0-11
+ var date = now.getDate();//20號(hào)
+ var week = now.getDay();//3//星期幾，西半球時(shí)間，范圍0-6，星期日為一周的第一天，為0
+
+ var hour = now.getHours();
+ var minute = now.getMinutes();
+ var second = now.getSeconds();
+
+ // alert(hour + ":" + minute + ":" + second);//15:33:9
+
+ oBox.innerHTML = '當(dāng)前時(shí)間是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
+ }
+
+ timeGo();
+ setInterval(timeGo, 1000);
+ }
+
+ //此函數(shù)將星期的數(shù)字轉(zhuǎn)為漢字表示
+ function toWeek(num){
+ switch(num){
+ case 0:
+ return '星期天';
+ break;
+ case 1:
+ return '星期一';
+ break;
+ case 2:
+ return '星期二';
+ break;
+ case 3:
+ return '星期三';
+ break;
+ case 4:
+ return '星期四';
+ break;
+ case 5:
+ return '星期五';
+ break;
+ case 6:
+ return '星期六';
+ break;
+ }
+ }
+
+ //此函數(shù)將不足兩位的數(shù)字前面補(bǔ)0
+ function toDouble(num){
+ if(num < 10){
+ return '0' + num;
+ }else{
+ return num;
+ }
+ }
+ </script>
+</head>
+<body>
+ <div id="box"></div>
+</body>
+</html>
(8)倒計(jì)時(shí)
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>倒計(jì)時(shí)</title>
+ <script type="text/javascript">
+ window.onload = function(){
+ //活動(dòng)第二天要將頁(yè)面下線(xiàn)，直接跳轉(zhuǎn)到其它頁(yè)面，不會(huì)走后面的代碼了
+ // window.location.;
+
+ var oDiv = document.getElementById('div1');
+
+ function timeLeft(){
+ //實(shí)際開(kāi)發(fā)中此時(shí)間從服務(wù)器獲取，避免客戶(hù)端調(diào)整時(shí)間
+ var now = new Date();
+ var future = new Date(2018,5,20,16,30,20);
+
+ // alert(future - now);//彈出與當(dāng)前時(shí)間相差的毫秒數(shù)：12469935436
+ var milli = parseInt((future - now)/1000);
+
+ //活動(dòng)當(dāng)天頁(yè)面下線(xiàn)，避免倒計(jì)時(shí)到點(diǎn)后繼續(xù)計(jì)負(fù)時(shí)
+ // if(milli <= 0){
+ // //頁(yè)面跳轉(zhuǎn)，不執(zhí)行下面的代碼了
+ // window.location.;
+ // }
+
+ var day = parseInt(milli / 86400);
+ var hour = parseInt(milli % 86400 / 3600);
+ var minute = parseInt(((milli % 86400) % 3600) / 60);
+ var second = milli % 60;
+
+ oDiv.innerHTML = '距離2018年11月12日00時(shí)00分00秒還有' + day + '天' + toDouble(hour) + '時(shí)' + toDouble(minute) + '分' + toDouble(second) + '秒';
+ }
+
+ timeLeft();
+ setInterval(timeLeft, 1000);
+ }
+
+ function toDouble(num){
+ if(num < 10){
+ return '0' + num;
+ }else{
+ return num;
+ }
+ }
+ </script>
+</head>
+<body>
+ <div id="div1"></div>
+</body>
+</html>
(9)變量的作用域
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>變量的作用域</title>
+ <script type="text/javascript">
+ /*
+ 全局變量：函數(shù)外部定義的變量，函數(shù)內(nèi)部和外部都可以訪(fǎng)問(wèn)，它的值可以共享
+
+ 局部變量：函數(shù)內(nèi)部定義的變量，函數(shù)內(nèi)部可以訪(fǎng)問(wèn)，外部無(wú)法訪(fǎng)問(wèn)。函數(shù)內(nèi)部訪(fǎng)問(wèn)變量時(shí)，先在內(nèi)部查找是否有此變量，如果有，就使用內(nèi)部變量，如果沒(méi)有，就去外部查找
+
+ 函數(shù)內(nèi)部如果不用'var'關(guān)鍵字定義變量，變量可能會(huì)變成全局變量，如果用嚴(yán)格模式解析會(huì)報(bào)錯(cuò)
+ */
+ var a = 12;
+
+ function aa(){
+ // var a = 5;
+ var b = 7;
+
+ // alert(a);
+ }
+
+ // alert(a);
+ // alert(b);//報(bào)錯(cuò)
+
+ aa();
+ </script>
+</head>
+<body>
+
+</body>
+</html>
