今日内容: setInterval setTimeout
js基本语法
js是脚本语言，使用<script></script>标签，写在</body>的上面；弱类型语言 变量可以指向任意的量。
定义函数
function easymethod(){}//常规设置
var Method=function(a,b){}//变量式设置
var Method=function(a,b){if(a){console.log(true);}else{console.log(false);}console.log(a+"------");console.log(b+"-------");console.log(arguments);} Method();//没传量a和b就是undefined 判断为false
Method(10,11,12);//多出来的都在arguments,数组形式
判断类型
使用typeof关键字，例如：var str="123";typeof str；
对象操作
function easymethod(){
//在浏览器的控制台打印测试数据
console.log("this is easymethod")
//声明对象
//弱类型语言 变量可以指向任意的量
var name="张三"//局部变量
let obj={};//定义类
obj.name="李四";//添加属性
obj["sex"]="男";//[]变量或字符串表示obj.sex="男"；
delete obj.sex;//删除属性
obj.study=function(){//定义成员属性
var s="ab\"c";//\是转义符
var arr=[];//定义数组
const username="张三"; //常量
}
var Method=function(a,b){
if(a){
console.log(true);
}else{
console.log(false);
}
console.log(a+"------");
console.log(b+"-------");
console.log(arguments);
}
对数组操作
js中数组无长度 类型限制，没有下标越界；
//头部添加
arr.unshift("头部");
console.log(arr);
//从尾部添加
arr.push("尾部");
console.log(arr);
//从头部删除
arr.shift();
console.log(arr);
//从尾部删除
arr.pop();
console.log(arr);
//删除并插入
arr=[1,2,3,4];
arr.splice(1);//删除下标位置以及其后所有元素
console.log(arr);
arr=[1,2,3,4];
arr.splice(1,1,33,44,55);//删除下标位置删除指定个数，添加元素，追加在下标为1的位置
console.log(arr);
点击事件onclick
<button type="button" οnclick="easymethod()">点击</button>
点击按钮调用easymethod方法；
DOM
全称document object model，是直接对标签进行操作。
常用方法
获取dom组件对象
var btn=document.getElementById("btn");//根据id获取组件对象
//设置标签内容
// box.innerHTML="<h1>变化了</h>";
//改变标签内文本
box.innerText="变化了";
使用举例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="box">变化</div><button type="button" id="btn" >点击</button><script>//DOM操作 对标签进行操作function clickme(){console.log("ok");let box=document.getElementById("box");box=document.getElementsByTagName()//设置标签内容// box.innerHTML="<h1>变化了</h>";//改变标签内文本box.innerText="变化了";}//获取dom组件对象var btn=document.getElementById("btn");btn.onclick=clickme;</script></body>
</html>setInterval和setTimeout
是JavaScript中用于定时执行代码的两个函数。
setInterval(function, delay)：每隔指定的延迟时间（毫秒）重复执行一次给定的函数。
clearInterval();用于取消之前通过 setInterval() 设置的重复执行的定时器。
// 设置一个定时器，每秒执行一次
var intervalId = setInterval(function() {console.log("这个信息会每秒打印一次，直到定时器被取消");
}, 1000);// 取消上面设置的定时器
clearInterval(intervalId);setTimeout(function, delay)：在指定的延迟时间（毫秒）后执行一次给定的函数。
组合使用：
var interval=setInterval(function(){console.log("执行")},100);setTimeout(function(){//清空之前计时显示clearInterval(interval);},800);扩展：
<input class="maxBox" type="text" id="txt" placeholder="请在里面输入号码最大值！">
const txt=document.getElementById("txt");
//不允许更改文本内容
txt.setAttribute("readonly", "readonly");
//输入框删除readonly
txt.removeAttribute("readonly");
使用实例：随机抽取数据
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.maxBox {padding: 4px 6px;font-size: 16px;color: #3EAFE0;}.clickBtn {border: 1px solid #3EAFE0;background-color: #3EAFE0;color: #FFF;font-size: 14px;padding: 4px 6px;}.result {font-size: 80px;color: #3EAFE0;font-weight: bold;padding: 30px;}.txt_center {text-align: center;}.exist {border: 1px solid #EEE;padding: 20px;margin: 20px auto;width: 600px;min-height: 100px;text-align: left;}.exist span {display: inline-block;padding: 2px 10px;margin: 4px;border-radius: 3px;background-color: #3EAFE0;color: #FFFFFF;}.info {border: 1px solid blue;color: #000;font-weight: 500;padding: 20px;margin: 20px auto;width: 600px;}</style>
</head><body><div class="txt_center"><div class="result"><span class="" id="result">0</span></div><input class="maxBox" type="text" id="txt" placeholder="请在里面输入号码最大值！"><input class="clickBtn" type="button" id="btn" value="抽号"><div class="exist"><div>已抽取：</div><div id="exist"><span>23</span><span>65</span><span>12</span></div></div></div><!--练习说明--><div class="info">1、在文本框中输入抽号最大值<br/> 2、点击按钮，开始抽号，随机生成1~最大值之间的整数<br/> 3、已经抽取的号码存入一个数组<br/> 4、为了保证号码的唯一性，每次生成一个号码，跟数组中的已抽取的号码比对<br/> 5、如果已存在，重新生成号码<br/> 6、如果不存在，放入数组中保存，并显示出来<br/> 7、将号码结果放入result中显示出来<br/> 8、将已经生成的号码（数组）存入exist中显示出来<br/> 9、给抽号按钮添加一个3s倒计时，倒计时结束前不可点击按钮</div><script>const btn=document.getElementById("btn");const txt=document.getElementById("txt");const exist=document.getElementById("exist");const result=document.getElementById("result");var start=false;btn.onclick=method;const arr=[];function method(){var val=txt.value;if(!val){alert("请输入数字");}else {if(!start){start=true;txt.setAttribute("readonly","readonly");for(var i=0;i<val;i++){arr[i]=Number(i+1);}exist.innerHTML="";}else if(start&&arr.length==0){txt.removeAttribute("readonly");start=false;txt.value="";return;}var interval=setInterval(function(){let ran=Math.floor(Math.random()*(arr.length));var num=arr[ran];result.innerText=num;},100);setTimeout(function(){//清空之前计时显示clearInterval(interval);var numIndex=Math.floor(Math.random()*(arr.length));var num=arr[numIndex];result.innerText=num;exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>";arr.splice(numIndex,1);//},800);}}//每300毫秒执行一次// setInterval(function(){// console.log(Math.random());// },300); // setTimeout(function(){// console.log(Math.random());// },300); // const btn=document.getElementById("btn");// const txt=document.getElementById("txt");// const result=document.getElementById("result");// const exist=document.getElementById("exist");// const arr=[];// var start=false;// btn.onclick=method;// function method(){// //获取输入框的内容// var val=txt.value;// //如果输入框没有数据，提示填入数据，// //如果有就：// if(!val){// alert("请输入内容");// }else{// if(!start){// //不是则就初始化，并抽号// start=true;// //不允许更改// txt.setAttribute("readonly", "readonly");// //准备数组// for(var i=1;i<=Number(val);i++){// arr[i-1]=i;// }// // console.log(arr);// //清空之前选择出来的内容// exist.innerHTML="";// }// //如果是启动状态，并且数组没有可选元素，恢复可填入状态// if(start&&arr.length==0){// //输入框清空// txt.value="";// //输入框删除readonly// txt.removeAttribute("readonly");// //状态改为false；// start=false;// //并且结束方法// return;// }// //如果是开始状态就抽号// //随机下标，获取下标位置内容// let ranIndex=Math.floor(Math.random()*(arr.length));// // console.log(ranIndex);// let num=arr[ranIndex];// //将内容显示在result中，追加在exist组件中，// result.innerText=num;// exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>";// //将该位置的元素删除// arr.splice(ranIndex,1);// //要有一个数组，如果没有数据提示抽完，并且将状态改为false；// }// }</script>
</body></html>
