今日内容: 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>
本文转载自: https://blog.csdn.net/tcwjy2021/article/details/140778956
版权归原作者 学好Java就能抓住她的心吗 所有， 如有侵权，请联系我们删除。
版权归原作者 学好Java就能抓住她的心吗 所有， 如有侵权，请联系我们删除。