JS代码写在body结束标签的上面
如点击按钮调用方法:
在浏览器的控制台打印 测试数据 console.log()
javascript
<body>
<button type="button" onclick="easymethod()">点击我</button>
<script>
//JS代码,写在body标签的上面
function easymethod(){
//在浏览器的控制台打印测试数据
console.log("this is easymethod");//打印
}
</script>
</body>
在浏览器中右键点检查,查看控制台输出
声明变量
JavaScript是一种弱类型语言 。这意味着在JavaScript中,变量的数据类型可以随时改变 ,不需要事先声明或指定。可以在同一个变量中存储不同类型的数据,而不会引发错误。这使得JavaScript非常灵活,但也可能导致一些类型相关的错误。
-
let
关键字用于声明一个局部变量,作用域限制在当前的代码块内。使用let
声明的变量可以被重新赋值,也可以在相同作用域内重新声明。 -
const
关键字用于声明一个常量,表示其值是不可变的。一旦被赋值后,不能再重新赋值。const
声明的变量必须在声明时进行初始化。 -
var
关键字用于声明一个变量,其作用域可以是全局的或函数内部 的。使用var
声明的变量可以被重新赋值,也可以在相同作用域内重新声明。
javascript
//弱类型语言:变量可以指向任意类型的对象
//局部变量
let obj={};//大括号就是一个对象
//常量
const username="张三";
var sex="男";
对象操作
给对象添加属性和方法,直接在点后面跟上即可:
javascript
obj.name="李四";
obj.study=function(){}
obj["sex"]="男";
var proName="sex";
obj[proName]="nv";
删除属性 delete
javascript
//删除属性
delete obj.sex;
方法调用
javascript
//程序运行阶段赋值的函数只有在后面才能调用
var method=function(a,b){//只需要声明传入几个形参,跟实参的个数没有关系
if(a){
console.log(true);
}else{
console.log(false);
}
console.log(a+"-----");
console.log(b+"-----");
console.log(arguments);//当做传入实参的数值,可变参数
}
在 JavaScript 中,函数可以赋值给变量,并且可以作为参数传递和返回值。 在这段代码中,函数赋值给了 method
变量。
在这个函数中,形参数量是 (a, b)
,但是实际传入的参数数量可以是任意个数。 在函数体内,可以通过 arguments
对象来访问传入的所有实参。**arguments
**对象是一个类数组对象,包含了调用函数时传入的所有实参。
判断类型
typeof返回这个变量的类型名称:字符串类型 string 小写、数字类型 number
javascript
var str="123";
console.log(typeof str);//typeof obj返回这个变量的类型名称小写
num=123;
console.log(typeof num);//打印number
数组操作
5个方法:
1.从头部添加 ,其他元素后移 arr.unshift ("头部");
2.从尾部添加 arr.push ("尾部");
3.从头部删除 arr.shift ();
4.从尾部删除 arr.pop ();
5.删除并插入 :
删除下标位置以及其后所有元素 arr.splice (1);
删除下标位置以及删除个数 arr.splice (1,2);
删除下标位置,删除个数(只加不删就是0),添加元素 arr.splice(1,0,33,44,55);
javascript
//数组添加元素
//从头部添加,其他元素后移
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,2);//删除下标位置以及删除个数
console.log(arr);
arr=[1,2,3,4];
arr.splice(1,0,33,44,55);//删除下标位置,删除个数(只加不删就是0),添加元素
console.log(arr);
DOM
(Document Object Model)
DOM(文档对象模型)是 HTML 文档的编程接口,它可以使 JavaScript 与 HTML 文档进行交互。通过使用 DOM,可以动态地修改 HTML 元素的结构、样式和内容,以及响应用户的交互事件。
DOM 是一个树状结构,它由多个节点组成。每个节点代表 HTML 文档中的一个元素、属性、文本或注释。
在 JavaScript 中,可以通过 DOM 方法和属性来操纵 HTML 元素。
修改组件内容样式:
box**.innerHTML="<h1>标题</h1>" 修改内容作为html标签**
box**.innerText="文本内容" 修改内容作为文本**
function 定义函数
javascript
let num=0;
function clickme(){
console.log("Ok");
let box=document.getElementById("box");
num++;
//box.innerHTML="<h1>大家很帅</h1>"//作为html标签
box.innerText="点击次数:"+num;//作为文本
}
//clickme();
获取dom组件对象:通过id、class、name属性以及标签名
javascript
//获取dom组件对象
var btn=document.getElementById("btn");
btn.onclick=clickme;
document.getElementsByClassName("");//通过class属性获取
document.getElementsByName("");//通过name属性获取
document.getElementsByTagName("");//通过标签名
在js中,Math方法如随机数、下取整等与java类似
定时器
定时执行 setInterval 每隔多少毫秒执行一次
延迟执行 setTimeout 延迟多少毫秒执行
这种计时独立于主线程之外执行,clearInterval() 用于清空计时
javascript
// function easymethod(){}
// setInterval(easymethod);
var interval = setInterval(function(){
console.log(Math.random());
}
,300);//每隔300毫秒执行一次
setTimeout(function(){
clearInterval(interval);
console.log(Math.random());
},1000)//延迟一秒执行
综合案例:抽号网页JS实现
html
<!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></script>
</body>
</html>
**<br/>**标签是HTML语言中的一个空标签,用于在页面中插入一个换行符。它不需要闭合标签,直接写为<br/>即可。它常用于段落之间、列表项之间或需要强制换行的其他情况。
**<span>**标签是HTML语言中用来定义文本样式的标签之一。它可以用来改变文本的颜色、字体、大小等样式。在HTML中,<span>标签是一个行内元素,它可以嵌套在其他标签之中,或者包裹一部分文本。嵌套在<span>标签中的文本可以使用CSS样式表的选择器来定义样式,从而改变其外观。通过使用<span>标签,可以对文本进行灵活的样式设计,使页面看起来更加美观、有层次感。
下面是JS代码实现:
这里我将代码做了些许调整,改为了一个简易的抽卡模拟器,逻辑大致相同
javascript
<script>
const btn=document.getElementById("btn");
const txt=document.getElementById("txt");
const result=document.getElementById("result");
const exist=document.getElementById("exist");
const arr=[];//const不能赋值但是可以修改里面的内容
var start=false;
btn.onclick=method;//将函数当做变量赋给这个属性,没有小括号
function method(){
//获取输入框中的内容(数字)
var val=txt.value;
//如果输入框内没有数据,就提示填入数据
if(!val){
alert("请输入内容");
}else{
//如果有数据
if(!start){
//初始化
//如果不是开始状态就要初始化
//初始化,设置开始
start=true;
txt.setAttribute("readonly","readnoly");
//准备数组
for(let i=1;i<=val;i++){
arr[i-1]=i;
}
console.log(arr);
//清空之前抽取出来的部分
exist.innerText="";
}
//如果是启动状态,并且数组中没有可选元素
//恢复可填入状态
if(start&&arr.length==0){
//输入框清空
txt.value="";
//输入框删除readonly
txt.removeAttribute("readonly");
//状态改为false
start=false;
//结束方法
return;
}
//数字跳动起来,计时独立于主线程之外
var interval = setInterval(function(){
let ranIndex=Math.floor(Math.random()*(arr.length));
let num=arr[ranIndex];
//将内容显示在result中
result.innerText=num;
btn.disabled=true;
},50);
setTimeout(function(){
//清空之前计时显示
clearInterval(interval);
//
//如果是开始状态就开始抽号
//随机下标
let ranIndex=Math.floor(Math.random()*(arr.length));//取值[0,51)向下取整
//console.log(ranIndex);
//获取下标位置的内容
let num=arr[ranIndex];
//将内容显示在result中
result.innerText=num;
//追加到exist组件中
if(num>val*0.9){
exist.innerHTML=exist.innerHTML+"<span style=\"background-color:#F1C40F\">"+num+"</span>";
}else if(num<val*0.3){
exist.innerHTML=exist.innerHTML+"<span style=\"background-color:#BA68C8\">"+num+"</span>";
}else{
exist.innerHTML=exist.innerHTML+"<span>"+num+"</span>"
}
//将该位置的元素删除掉
arr.splice(ranIndex,1);
//要有一个数组,如果没有数据,提示已经抽完,并且将状态改为false
//console.log(arr);
btn.disabled=false;
},1000);
}
}
</script>
其中:
setAttribute("readonly", "readonly")
是一个 DOM 方法,用于将指定属性设置为指定的值。这里用于将输入框设置为只读模式。
removeAttribute("readonly")
也是一个 DOM 方法,用于从元素中移除指定的属性。这里用于取消输入框的只读模式。