定时器
2018-06-24 本文已影响0人
松雪宝宝
(1)数组去重
| <!DOCTYPE html> |
| | | +<html lang="en"> |
| | | +<head> |
| | | + <meta charset="UTF-8"> |
| | | + <title>数组去重</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++){ |
| | | + //判断元素第一次出现的位置，恰好是当前索引时，就将元素放入新数组 |
| | | + 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"> |
| | | + /*字符串切断转成数组*/ |
| | | + var sTr = '2018-06-20'; |
| | | + var aRr = sTr.split('-'); |
| | | + // alert(aRr);//2018,06,20 |
| | | + // console.log(aRr); |
| | | + |
| | | + var aRr2 = sTr.split(''); |
| | | + // console.log(aRr2); |
| | | + |
| | | + /*实际上就是修改了<title>标签的内容*/ |
| | | + // document.title = aRr2; |
| | | + |
| | | + var sTr2 = '#div1'; |
| | | + var sTr3 = '.div1'; |
| | | + |
| | | + /*获取指定索引的字符*/ |
| | | + var sTr4 = sTr2.charAt(0); |
| | | + if(sTr4 == '#'){ |
| | | + // alert('id选择器'); |
| | | + } |
| | | + |
| | | + /*查看子串第一次出现的位置*/ |
| | | + var sTr5 = 'Microsoft Yahei'; |
| | | + var num = sTr5.indexOf('Yahei'); |
| | | + // alert(num);//10 |
| | | + |
| | | + var num2 = sTr5.indexOf('xihei'); |
| | | + // alert(num2);//没有找到就弹出-1 |
| | | + |
| | | + /*substring截取子串*/ |
| | | + //从10开始，截到15（包括开始位置，不包括结束位置） |
| | | + // var sTr6 = sTr5.substring(10,15);//Yahei |
| | | + //从10开始截取到末尾 |
| | | + var sTr6 = sTr5.substring(10);//Yahei |
| | | + // alert(sTr6); |
| | | + |
| | | + /*全部转为大写字母*/ |
| | | + // alert(sTr6.toUpperCase());//YAHEI |
| | | + /*全部转为小写字母*/ |
| | | + alert(sTr6.toLowerCase());//yahei |
| | | + </script> |
| | | +</head> |
| | | +<body> |
| | | + |
| | | +</body> |
| | | +</html> |
(2)字符串反转
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>字符串反转</title>
+ <script type="text/javascript">
+ var sTr = "123asdf79888asdfe21";
+ //1、split字符串转成数组
+ //2、reverse数组反转
+ //3、join数组转成字符串
+ var sTr2 = sTr.split('').reverse().join('');
+ alert(sTr2);//12efdsa88897fdsa321
+ </script>
+</head>
+<body>
+
+</body>
+</html>
(3)计算器
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>计算器</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;
+
+ //不做此判断会弹出“NaN”
+ if(val01=="" || val02==""){
+ alert('输入框不能为空！');
+ return;
+ }
+ if(isNaN(val01) || isNaN(val02)){
+ alert('请输入数字！');
+ 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>计算器</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="计算" id="btn" />
+</body>
+</html>
(4)定时器弹框
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>定时器弹框</title>
+ <style type="text/css">
+ .pop{
+ width: 400px;
+ height: 300px;
+ background-color: #fff;
+ border: 1px solid #000;
+ /*固定定位*/
+ position: fixed;
+ /*左上角位于页面中心*/
+ left: 50%;
+ top: 50%;
+ /*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
+ margin-left: -200px;
+ margin-top: -150px;
+ /*弹窗在最上面*/
+ z-index: 9999;
+ }
+ /*遮罩样式*/
+ .mask{
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ left: 0;
+ top: 0;
+ /*设置透明度30%*/
+ opacity: 0.3;
+ filter: alpha(opacity=30);/*兼容IE6、7、8*/
+ /*遮罩在弹窗的下面，在网页所有内容的上面*/
+ z-index: 9990;
+ }
+ .pop_con{
+ display: none;/*默认不显示，用定时器显示*/
+ }
+ </style>
+ <script type="text/javascript">
+ /*
+ setTimeout 只执行一次的定时器
+ clearTimeout 关闭只执行一次的定时器
+ setInterval 反复执行的定时器
+ clearInterval 关闭反复执行的定时器
+ */
+
+ window.onload = function(){
+ var oPop = document.getElementById('pop');
+ var oShut = document.getElementById('shutOff');
+
+ /*setTimeout(showPop, 3000);//开启定时器，3秒后调用函数showPop()弹框
+
+ function showPop(){
+ oPop.style.display = 'block';//显示弹框和遮罩
+ }*/
+ //开启定时器的简写方式：调用匿名函数
+ setTimeout(function(){
+ oPop.style.display = 'block';
+ }, 3000);
+
+ oShut.onclick = function(){
+ oPop.style.display = 'none';//关闭弹框和遮罩
+ }
+ }
+ </script>
+</head>
+<body>
+ <h1>首页标题</h1>
+ <p>页面内容</p>
+ <a href="http://www.baidu.com">百度网</a>
+
+
+ <div class="pop_con" id="pop">
+ <div class="pop">
+ <h3>提示信息！</h3>
+ <a href="#" id="shutOff">关闭</a>
+ </div>
+ <div class="mask"></div>
+ </div>
+</body>
+</html>
(5)定时器的基本用法
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>定时器的基本用法</title>
+ <style type="text/css">
+
+ </style>
+ <script type="text/javascript">
+ //单次定时器
+ var timer = setTimeout(function(){
+ alert('hello!');
+ }, 3000);
+
+ //清除单次定时器
+ clearTimeout(timer);
+
+ //反复循环定时器
+ var timer2 = setInterval(function(){
+ alert('hi~~~');
+ }, 2000);
+
+ //清除反复循环定时器
+ clearInterval(timer2);
+ </script>
+</head>
+<body>
+
+</body>
+</html>
(6)定时器动画
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>定时器动画</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;
+ //反复循环定时器，每30毫秒修改一次盒子的left值
+ var timer = setInterval(function(){
+ left += 2;
+ oBox.style.left = left + 'px';
+
+ //当left值大于700时停止动画（清除定时器）
+ if(left > 700){
+ clearInterval(timer);
+ }
+ },30);
+ }
+ </script>
+</head>
+<body>
+ <div class="box" id="box"></div>
+</body>
+</html>
(7)时钟
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>时钟</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);//弹出美式时间：Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
+ var year = now.getFullYear();//2018年
+ var month = now.getMonth() + 1;//6月弹出5//范围0-11
+ var date = now.getDate();//20号
+ var week = now.getDay();//3//星期几，西半球时间，范围0-6，星期日为一周的第一天，为0
+
+ var hour = now.getHours();
+ var minute = now.getMinutes();
+ var second = now.getSeconds();
+
+ // alert(hour + ":" + minute + ":" + second);//15:33:9
+
+ oBox.innerHTML = '当前时间是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
+ }
+
+ timeGo();
+ setInterval(timeGo, 1000);
+ }
+
+ //此函数将星期的数字转为汉字表示
+ 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;
+ }
+ }
+
+ //此函数将不足两位的数字前面补0
+ function toDouble(num){
+ if(num < 10){
+ return '0' + num;
+ }else{
+ return num;
+ }
+ }
+ </script>
+</head>
+<body>
+ <div id="box"></div>
+</body>
+</html>
(8)倒计时
<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>倒计时</title>
+ <script type="text/javascript">
+ window.onload = function(){
+ //活动第二天要将页面下线，直接跳转到其它页面，不会走后面的代码了
+ // window.location.href = "http://www.baidu.com";
+
+ var oDiv = document.getElementById('div1');
+
+ function timeLeft(){
+ //实际开发中此时间从服务器获取，避免客户端调整时间
+ var now = new Date();
+ var future = new Date(2018,5,20,16,30,20);
+
+ // alert(future - now);//弹出与当前时间相差的毫秒数：12469935436
+ var milli = parseInt((future - now)/1000);
+
+ //活动当天页面下线，避免倒计时到点后继续计负时
+ // if(milli <= 0){
+ // //页面跳转，不执行下面的代码了
+ // window.location.href = "http://www.baidu.com";
+ // }
+
+ 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时00分00秒还有' + day + '天' + toDouble(hour) + '时' + 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">
+ /*
+ 全局变量：函数外部定义的变量，函数内部和外部都可以访问，它的值可以共享
+
+ 局部变量：函数内部定义的变量，函数内部可以访问，外部无法访问。函数内部访问变量时，先在内部查找是否有此变量，如果有，就使用内部变量，如果没有，就去外部查找
+
+ 函数内部如果不用'var'关键字定义变量，变量可能会变成全局变量，如果用严格模式解析会报错
+ */
+ var a = 12;
+
+ function aa(){
+ // var a = 5;
+ var b = 7;
+
+ // alert(a);
+ }
+
+ // alert(a);
+ // alert(b);//报错
+
+ aa();
+ </script>
+</head>
+<body>
+
+</body>
+</html>
