//第一个参数为函数，第二个为毫秒数，经过指定的毫秒数来执行一次传入的函数 i++; //这是计时器秒数分钟数和小时的基准“i” document.getElementById(...然后暂停计时器，把时分秒标签内容归为字符串类型的‘00’； clearInterval(timer); document.getElementById("sec").innerHTML...= "00"; document.getElementById("btn").innerHTML = "开始计时"; //重置之后将btn的标签内容设置为“开始” }; document.getElementById...("btn").innerHTML = "暂停计时"; //设置btn标签内容为暂停 funcStart(); // isRunning默认为false 那么isRunning的否就是true..."; document.getElementById("btn").innerHTML = "开始计时"; //设置btn标签内容为开始 funcPause(); // 否则就执行
从《高性能JavaScript》一书中的整理笔记： 1、将经常使用的对象成员、数组项、和域外变量存入局部变量 原因：数据存储位置对大地代码整体性能会产生重要的影响，直接变量和局部变量的访问速度快于数组和对象成员...var doc = document; var db = doc.body; var odiv = doc.getElementById('div1'); 2、避免使用with表达式，因为他改变了运行期上下文的作用域链...5、DOM操作量化问题： // 在循坏中更新页面，问题所在：每次循环都对DOM元素访问了两次 // 一次是读取document.getElementById('here').innerHTML的内容...+= content; } // 关于js字符串拼接的性能优化问题 // js的处理机制是：新建一个临时字符串，将新字符串赋值为 content + 'a' // 然后返回这个新字符串并同时销毁原始字符串...下面我们以如下的dom结构为例： 假如有一个ul，下面有很多个li： <li
Date.now() 可以获取当前代码执行时的时间戳 setHours() 设置 Date 对象中的小时 (0 ~ 23) Math // 1-6之间的随机数 for (var i = 0; i <...求多个数中的最小值 Math.sqrt() 对一个数进行开方 DOM 页面加载 window.onload = function () { } getElementById()：返回带有指定ID 的元素...修改元素的属性： 语法：元素.属性名 = 属性值 innerHTML 使用该属性可以获取或设置元素内部的HTML代码 事件 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8...是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行...，可以将addEventListener()的第三个参数设置为true一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false 鼠标单击事件 btn.onclick = function
函数外部不能访问函数内部的变量，但是函数内部可以访问函数外部的变量； 多个作用域之间它们什么关系？...(id)方法获取“文本框”元素，才能针对“文本框”元素进行相应的操作； 前面我们学过了用innerHTML的属性来获取标签的内容，但是对于表单元素来说，获取表单的内容需要使用value的属性，如：eleObj.value...属性获取=' + iptObj.innerHTML); } 结果： 代码分析： 表单元素使用value属性可以获取到表单的内容，使用innerHTML属性获取不到表单的内容；...，它就从加法运算的功能变成连字符的功能； 为了保证“+”不受字符串的影响，可以通过parseInt()方法把字符串的内容转成数字，这样就能正常的加法运算； 将加和结果显示在“求和结果”后面 对于获取/设置非表单元素的内容...我们来想一个问题，假如页面中出现了多个点击按钮实现求和功能，你是把代码复制黏贴一遍还是进行代码的封装？
，如果发现开盘价是-1，就设置第一次的随机数为开盘价 this.today = -1; //把最高、最低、当前的价格都暂且设置成昨天的开盘价，后面我们可以变化的...//得到每个stock对象 var stock = json[id]; //将当前的价格设置到...("current"); //设置具体信息的值 high.innerHTML = stock.high; range.innerHTML...//得到每个stock对象 var stock = json[id]; //将当前的价格设置到...【别偷懒不写table标签】 当输入框的数值数为4的时候就与服务器进行交互，服务器返回一张图片。 可以用自定义的trim()把数据的前后空格去掉，通过正则表达式来去除空格。
外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。...(“hello world”); 使用document.write()将内容写入到html文档 使用innerHTML写入到html元素 JavaScript的注释 JavaScript注释与java...可以通过将变量的值设置为 null 来清空变量。...将文本的节点添加到新创建的元素中 newElementP.appendChild(text); //获取一个页面已经存在的元素 var div=document.getElementById("div1...("div1"); var p1=document.getElementById("p1"); //将div中的元素p1替换为新创建的元素 div.replaceChild(newElementP,p1
，如果发现开盘价是-1，就设置第一次的随机数为开盘价 this.today = -1; //把最高、最低、当前的价格都暂且设置成昨天的开盘价，后面我们可以变化的 this.highest...in json) { //得到每个stock对象 var stock = json[id]; //将当前的价格设置到..."); var current = document.getElementById("current"); //设置具体信息的值 high.innerHTML = stock.high...in json) { //得到每个stock对象 var stock = json[id]; //将当前的价格设置到...【别偷懒不写table标签】 当输入框的数值数为4的时候就与服务器进行交互，服务器返回一张图片。 可以用自定义的trim()把数据的前后空格去掉，通过正则表达式来去除空格。
前言 textContent、innerText 和 innerHTML 三个方法的使用场景和区别 textContent 和 innerText IE 浏览器最早引入了innerText， 虽然是IE...使用区别： textContent 用来设置或获取某个元素内所有文本内容，包含子元素内容，隐藏元素也能获取。...innerText 的返回值会被格式化 ,但是textContent的返回值不会被格式化 innerText会把页面里的空标签当作换行处理, ( 一个空标签是一行 , 连续的多个空标签也是一行) ,但是...innerText和innerHTML设置内容时： innerText不会识别html样式 innerHTML会识别html样式 设置内容示例 ...hello world' innerText设置标签内容,是没有标签的效果的 innerHTML设置新的html标签内容,是有标签效果的 2022年第 11 期
DOM(Document Object Model) 文档对象模型 ---- 概念 将标记语言文档（HTML,XML…）的各个部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD动态操作 W3C...方法 对DOM数进行增删改查 appendChild() 向节点的子节点列表的结尾添加新的子节点。 removeChild() 删除（并返回）当前节点的指定子节点。...：innerHTML 使用html元素对象的属性 控制样式 innerHTML innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。...使用innerHTML简化之前的动态表格实例 <!...var div1=document.getElementById("div1"); div1.onclick=function(){ //设置样式方式1
-- 游戏结束才显示的当前雷数的div--> 当前剩余雷数： 10 ...border-left:1px solid #B25F27; box-shadow: 5px 5px 5px rgba(0,0,0,0.3); display:none; /* 先设置为...margin-left:-100px; color:#333; font-size:20px; font-weight: bolder; display:none; /* 先设置为...none,开始游戏后显示block */ } Game Over .alertBox{ display:none; /* 先设置为none,开始结束显示block */ position...= ''; startGameBool = true; } } 3.4 核心事件函数封装 leftClick 没有雷 --> 显示数字（代表以当前小格为中心周围8个格的雷数
(没有排过顺序, 难度等级低) 1.猜数游戏 生成0-100的随机数, 开个输入框让用户输入, 小于随机数时显示小了, 大于随机数时显示大了, 等于时显示正确..../script> 9.解构赋值 使用解构赋值的方法, 交换两个变量的值 <meta charset="UTF-...= "该检索的值在数组中出现的位置为: " + fyl_pro; } 13..."UTF-8"> 方一力30 求一列数中尾数为偶的数字个数 <span..., 另一个设置对象的值. <!
就会出现滚动条（当然要在div里的内容超出div设置的时候）。...3、当然行和列并不是不动就可以了，也要根据div的滚动条的滚动作出变化（移动）才可以，这里就要使用js来帮忙了。 优点： 1、侵入性小。...2、适用范围比较广：针对生成的 标签，而不针对服务器控件，所以DataGrd、GridView、DataList等都可以使用，只要输出的是 table 形式的html代码就可以。...3、可以同时锁定行和列，行数和列数可以自定义。“锁定”效果好，不会出现“跳动”的现象。 缺点： 1、占用客户端的资源比较大，行数多的时候会有一点点慢。 2、不支持ff。...("dLeft"); //锁定列的Div var dMid = document.getElementById("dMid"); //左上角的Div
代码，有值则是设置，无值则是获取 alert(d.innerHTML); console.log(document.getElementById('d').innerText)...之前，我们已经简单的使用过JS控制元素的CSS样式； 在具体使用的时候还有一些需要重点注意的细节： 名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写： 比如background-color...写成backgroundColor 属性值都是字符串，设置时必须包括单位： 比如，div.style.width的值不能写为100，而要写为100px //点击按钮,设置div的宽和高,及背景颜色 //根据id获取按钮,注册点击事件,添加事件处理函数 document.getElementById...="300px"; dvObj.style.height="200px"; //css中的属性如果是多个单词连接的,在js代码DOM操作中多个单词中间的-干掉,后面单词的首字母变大写
开启定时器，2000毫秒重新设置图片的src属性 2.4 案例实现 步骤1：为轮播图img标签添加id属性 ?...如果属性由多个单词使用“-”连接，需要将“-”删除，并将后一个单词首字母大写。...("divId"); //2 获得高度 // * divObj.style.height 数据为"100px" // * 使用parseInt() ，将字符串“100px”转换成数字“100” var...height = window.parseInt(divObj.style.height); //3 将原始高度翻倍，再设置给div。...使用弹出框进行提示，用户体验不友好，可以将错误提示信息现在在对应的表单元素后面 2. 在编写程序时存在多处重复代码，为了达到代码的重复利用，将进行内容抽取成，编写自定义函数。 ?
HTML文档中 innerHTML写入到HTML元素 console.log()写到控制台 document.getElementById("myDIV").innerHTML="wiki"; 单行注释以... This is another paragraph //找到 id="div1" 的元素 var parent=document.getElementById...数字 JavaScript数字均为64位 constructor 返回对创建此对象的 Number 函数的引用 MAX_VALUE 可表示的最大的数 MIN_VALUE 可表示的最小的数 NaN...link() 将字符串显示为链接 match() 找到一个或多个正则表达式的匹配 search() 检索与正则表达式相匹配的值 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分...strike() 使用删除线来显示字符串 substring() 提取字符串中两个指定的索引号之间的字符 sup() 把字符串显示为上标 toLocaleLowerCase() 把字符串转换为小写
事件篇 window.onload:事件 Dom查询 innerhtml ----获取节点的html内容，或者设置对应节点html内容 读取或者设置节点的相关属性 获取元素节点的子节点 children...事件的委派 事件的绑定----为另一个元素绑定多个事件 addEventListener---IE8及以下的浏览器不支持，正常浏览器不支持 attachEvent---支持IE8及以下的浏览器 兼容上面两者的写法...内容 或 向对象插入html内容 我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById...(‘abc’).innerHTML=’这是被插入的内容’; ---- 读取或者设置节点的相关属性 //返回的是元素数组对象 var d1=document.getElementById...//使用pageX和pageY的写法，IE8不支持 //设置div的偏移量为鼠标移动的偏移量 d1.style.left=event.pageX+"px"; d1.style.top
; 在这个例子中，我们得到 id 为 header 的元素，并把其内容设置为“Hello World！”。 InnerHTML 还可以把标签放入另一个标签中。...1document.getElementsByTagName("div").innerHTML = "Hello World!" 在这里将 h1 标记放入所有已存在的 div 中。...第一个参数是新元素，第二个参数是要替换的元素。 直接写入HTML输出流 还可以使用 write() 方法将 HTML 表达式和 JavaScript 直接写入 HTML 输出流。...1document.write(Date()); write() 方法还可以使用多个参数，这些参数会按其出现的顺序附加到文档中。...还可以用 Javascript 代码为多个元素分配相同的事件。
如果需要引用外部的js文件，格式为 src为链接的外部地址 而此时所有的代码必须为外部文件，写在其中的代码无效...每一句js语句后面都要跟上分号 为了语法规范，script标签应该写在head标签当中，且可以引入多个script标签表示不同功能块 <可以表示为，不然程序不能输出<script...:负数 后退对应的页面数 var ogo = document.getElementById('go'); ogo.onclick = function(){ history.go(1) } } DOM...alert(odiv.style.width) } */ /* 在Chrome中使用 window.onload = function(){ var odiv = document.getElementById...document.cookie = "username = huang; expires=" + oDate; //修改cookie:同名cookie会自动进行覆盖 //删除cookie: 可以把一个日期设置为过期的时间
使用document.getElementById()方法根据指定的Id对象插入相应的内容。 效果图如下所示： ?...document.getElementById()方法获取id为sec，将初始化的秒数减一使用innerHTML方法插入到id为sec位置。... 在上面代码中，实现一个宽和高为100px的div，id为box。...= '小盒子'; } }; 在上面代码中，首先是使用document.getElementById()方法获取id为box，定义一个num用来存储点击的次数，为box添加点击事件并处理...对每一个div层进行详解，让读者更好的理解。 2.在JavaScript中，实现限时秒杀、定时跳转案例主要帮助理解定时器的使用，改变盒子大小案例主要是帮助理解如何去修改显示的内容、CSS样式操作。
功能实现 一个游戏对象有其默认的配置，也可以由使用者单独设置，因此—— // index.js class ColorGame { constructor(userOption) { this.option...首先，矩阵必须要有最多的列数限制，太小不好操作，显示也不好看。...其次，确定每个关卡的列数 col，即可得知小盒子的总个数 col * col, 将每个盒子的 HTML 片段字符串存入长度为 col * col 的数组 arr 中，再随机修改其中一个的颜色赋值为特殊颜色...// 设置列数，最高不超过16 if (this.step < 6) { col = this.step + 1; } else if (this.step `; // 修改页面 dom 元素 document.getElementById("screen").innerHTML
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
