网络托管运营,宁阳县网络seo,制作网页模板课件,怎么做网页链接教程JS代码写在body结束标签的上面
如点击按钮调用方法#xff1a;
在浏览器的控制台打印测试数据 console.log()
bodybutton typebutton onclickeasymethod()点击我/buttonscript//JS代码#xff0c;写在body标签的…JS代码写在body结束标签的上面
如点击按钮调用方法
在浏览器的控制台打印测试数据 console.log()
bodybutton typebutton onclickeasymethod()点击我/buttonscript//JS代码写在body标签的上面function easymethod(){//在浏览器的控制台打印测试数据console.log(this is easymethod);//打印}/script/body
在浏览器中右键点检查查看控制台输出 声明变量
JavaScript是一种弱类型语言。这意味着在JavaScript中变量的数据类型可以随时改变不需要事先声明或指定。可以在同一个变量中存储不同类型的数据而不会引发错误。这使得JavaScript非常灵活但也可能导致一些类型相关的错误。 let关键字用于声明一个局部变量作用域限制在当前的代码块内。使用let声明的变量可以被重新赋值也可以在相同作用域内重新声明。 const关键字用于声明一个常量表示其值是不可变的。一旦被赋值后不能再重新赋值。const声明的变量必须在声明时进行初始化。 var关键字用于声明一个变量其作用域可以是全局的或函数内部的。使用var声明的变量可以被重新赋值也可以在相同作用域内重新声明。 //弱类型语言:变量可以指向任意类型的对象//局部变量let obj{};//大括号就是一个对象//常量const username张三;var sex男; 对象操作
给对象添加属性和方法直接在点后面跟上即可 obj.name李四;obj.studyfunction(){}obj[sex]男;var proNamesex;obj[proName]nv;
删除属性 delete //删除属性delete obj.sex; 方法调用 //程序运行阶段赋值的函数只有在后面才能调用var methodfunction(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 var str123;console.log(typeof str);//typeof obj返回这个变量的类型名称小写num123;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); //数组添加元素//从头部添加其他元素后移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.innerHTMLh1标题/h1 修改内容作为html标签
box.innerText文本内容 修改内容作为文本
function 定义函数 let num0;function clickme(){console.log(Ok);let boxdocument.getElementById(box);num;//box.innerHTMLh1大家很帅/h1//作为html标签box.innerText点击次数num;//作为文本}//clickme();
获取dom组件对象通过id、class、name属性以及标签名 //获取dom组件对象var btndocument.getElementById(btn);btn.onclickclickme;document.getElementsByClassName();//通过class属性获取document.getElementsByName();//通过name属性获取document.getElementsByTagName();//通过标签名 在js中Math方法如随机数、下取整等与java类似
定时器
定时执行 setInterval 每隔多少毫秒执行一次
延迟执行 setTimeout 延迟多少毫秒执行
这种计时独立于主线程之外执行clearInterval() 用于清空计时 // function easymethod(){}// setInterval(easymethod);var interval setInterval(function(){console.log(Math.random());},300);//每隔300毫秒执行一次setTimeout(function(){clearInterval(interval);console.log(Math.random());},1000)//延迟一秒执行 综合案例抽号网页JS实现
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/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
/headbodydiv classtxt_centerdiv classresultspan class idresult0/span/divinput classmaxBox typetext idtxt placeholder请在里面输入号码最大值input classclickBtn typebutton idbtn value抽号div classexistdiv已抽取/divdiv idexistspan23/spanspan65/spanspan12/span/div/div/div!--练习说明--div classinfo1、在文本框中输入抽号最大值br/ 2、点击按钮开始抽号随机生成1~最大值之间的整数br/ 3、已经抽取的号码存入一个数组br/ 4、为了保证号码的唯一性每次生成一个号码跟数组中的已抽取的号码比对br/ 5、如果已存在重新生成号码br/ 6、如果不存在放入数组中保存并显示出来br/ 7、将号码结果放入result中显示出来br/ 8、将已经生成的号码数组存入exist中显示出来br/ 9、给抽号按钮添加一个3s倒计时倒计时结束前不可点击按钮/divscript/script
/body/html
br/标签是HTML语言中的一个空标签用于在页面中插入一个换行符。它不需要闭合标签直接写为br/即可。它常用于段落之间、列表项之间或需要强制换行的其他情况。
span标签是HTML语言中用来定义文本样式的标签之一。它可以用来改变文本的颜色、字体、大小等样式。在HTML中span标签是一个行内元素它可以嵌套在其他标签之中或者包裹一部分文本。嵌套在span标签中的文本可以使用CSS样式表的选择器来定义样式从而改变其外观。通过使用span标签可以对文本进行灵活的样式设计使页面看起来更加美观、有层次感。 下面是JS代码实现
这里我将代码做了些许调整改为了一个简易的抽卡模拟器逻辑大致相同
scriptconst btndocument.getElementById(btn);const txtdocument.getElementById(txt);const resultdocument.getElementById(result);const existdocument.getElementById(exist);const arr[];//const不能赋值但是可以修改里面的内容var startfalse;btn.onclickmethod;//将函数当做变量赋给这个属性没有小括号function method(){//获取输入框中的内容数字var valtxt.value;//如果输入框内没有数据就提示填入数据if(!val){alert(请输入内容);}else{//如果有数据if(!start){//初始化//如果不是开始状态就要初始化//初始化设置开始starttrue;txt.setAttribute(readonly,readnoly);//准备数组for(let i1;ival;i){arr[i-1]i;}console.log(arr);//清空之前抽取出来的部分exist.innerText;}//如果是启动状态并且数组中没有可选元素//恢复可填入状态if(startarr.length0){//输入框清空txt.value;//输入框删除readonlytxt.removeAttribute(readonly);//状态改为falsestartfalse;//结束方法return;}//数字跳动起来计时独立于主线程之外var interval setInterval(function(){let ranIndexMath.floor(Math.random()*(arr.length));let numarr[ranIndex];//将内容显示在result中result.innerTextnum;btn.disabledtrue;},50);setTimeout(function(){//清空之前计时显示clearInterval(interval);////如果是开始状态就开始抽号//随机下标let ranIndexMath.floor(Math.random()*(arr.length));//取值[0,51)向下取整//console.log(ranIndex);//获取下标位置的内容let numarr[ranIndex];//将内容显示在result中result.innerTextnum;//追加到exist组件中if(numval*0.9){exist.innerHTMLexist.innerHTMLspan style\background-color:#F1C40F\num/span;}else if(numval*0.3){exist.innerHTMLexist.innerHTMLspan style\background-color:#BA68C8\num/span;}else{exist.innerHTMLexist.innerHTMLspannum/span}//将该位置的元素删除掉arr.splice(ranIndex,1);//要有一个数组如果没有数据提示已经抽完并且将状态改为false//console.log(arr);btn.disabledfalse;},1000);}}/script
其中
setAttribute(readonly, readonly) 是一个 DOM 方法用于将指定属性设置为指定的值。这里用于将输入框设置为只读模式。
removeAttribute(readonly) 也是一个 DOM 方法用于从元素中移除指定的属性。这里用于取消输入框的只读模式。
