JavaScript示例代码1
js addclass方法(一)
js addclass方法(一)JavaScript中的addClass方法1. 什么是addClass方法？addClass方法是JavaScript中用于给HTML元素添加CSS类名的方法。
它可以通过操作元素的classList属性来实现。
2. 使用addClass方法的好处•通过添加CSS类名，我们可以改变元素的样式，从而实现对页面的动态效果。
•使用addClass方法可以方便地在JavaScript中操作DOM元素的类名，避免了直接操作元素的className属性可能带来的问题。
3. 使用classList的相关方法在使用addClass方法之前，我们需要先了解classList对象。
classList对象是JavaScript中的一个内置对象，它包含了一系列用于操作元素类名的方法，其中包括：•add：用于添加一个或多个类名。
•remove：用于移除一个或多个类名。
•toggle：用于切换一个类名的存在，即如果类名存在则移除它，否则添加它。
•contains：用于检查元素是否包含指定的类名。
4. 使用addClass方法实现添加类名可以通过以下几种方式来使用addClass方法来添加类名：4.1 使用add方法添加一个类名element.classList.add('className');使用add方法可以将指定的类名添加到元素的classList中。
4.2 使用add方法添加多个类名element.classList.add('className1', 'className2', ' className3');使用add方法可以一次性添加多个类名到classList中。
4.3 使用toggle方法切换类名element.classList.toggle('className');使用toggle方法可以切换指定类名的存在，如果存在则移除，否则添加。
acrobat pdf中的javascript代码示例
在Adobe Acrobat PDF中，可以使用JavaScript来操作和修改PDF文件。
以下是一个简单的JavaScript代码示例，用于在PDF文件中创建一个新页面：```javascript// 创建一个新页面var page = this.addPage();// 设置页面大小为A4page.setPageSize(this.internal.getPageSize("A4"));// 获取页面内容var content = page.getContents();// 添加文本到页面content.setFont("Helvetica", "normal", 12);content.beginText();content.setTextMatrix(45, 0, 0, 45, 50, 700);content.showText("Hello, world!");content.endText();```在上面的示例中，我们首先使用`this.addPage()`方法创建一个新页面。
然后，我们使用`page.setPageSize()`方法设置页面大小为A4。
接下来，我们使用`page.getContents()`方法获取页面的内容，并使用`content.setFont()`和`content.beginText()`方法设置字体和文本矩阵。
最后，我们使用`content.showText()`方法将文本添加到页面中。
请注意，JavaScript代码需要在Adobe Acrobat PDF软件中运行，并且需要使用PDF文件作为输入。
如果您不熟悉JavaScript或Adobe Acrobat PDF软件，请先学习相关知识。
如何使用JavaScript计算一个数组的平均值
如何使用JavaScript计算一个数组的平均值JavaScript是一种广泛应用于网页开发的编程语言，它可以实现很多强大的功能，包括对数组进行计算。
本文将介绍如何使用JavaScript 计算一个数组的平均值，并提供相应的代码示例。
一、简介在开始之前，我们先来了解一下什么是数组。
数组是一种特殊的变量，它可以存储多个值，并通过索引（或位置）来访问这些值。
JavaScript中的数组可以包含任意类型的数据，例如数字、字符串、对象等。
二、计算数组的平均值计算数组的平均值可以分为以下几个步骤：1. 定义一个数组首先，我们需要定义一个数组，并向其中添加一些数字。
例如，我们创建一个包含一组学生成绩的数组：```javascriptlet scores = [80, 90, 70, 85, 92];```2. 计算数组元素之和接下来，我们需要将数组中的所有元素相加，得到它们的总和。
可以通过使用循环遍历数组，并将每个元素累加到一个变量中来实现：```javascriptlet sum = 0;for (let i = 0; i < scores.length; i++) {sum += scores[i];}```在上面的代码中，我们使用了一个for循环来遍历数组，并通过累加运算符`+=`将每个元素加到`sum`变量中。
3. 计算平均值最后，我们将数组元素的总和除以数组的长度，即可得到数组的平均值：```javascriptlet average = sum / scores.length;console.log("平均值为：" + average);```这里，我们将总和除以数组的长度，得到了平均值，并将其存储在`average`变量中。
最后，使用`console.log()`打印平均值。
三、完整代码示例下面是一个完整的使用JavaScript计算数组平均值的示例代码：```javascriptlet scores = [80, 90, 70, 85, 92];let sum = 0;for (let i = 0; i < scores.length; i++) {sum += scores[i];}let average = sum / scores.length;console.log("平均值为：" + average);```你可以将以上代码保存为一个`.js`文件，并通过浏览器的控制台运行，即可看到计算结果。
如何使用JavaScript将一个字符串按照指定分隔符进行拆分
如何使用JavaScript将一个字符串按照指定分隔符进行拆分JavaScript是一种广泛应用于网页开发中的脚本语言，它具有很强的字符串处理能力。
本文将介绍如何使用JavaScript将一个字符串按照指定的分隔符进行拆分，以满足特定的需求。
一、使用split()方法进行简单分割JavaScript的String对象提供了split()方法，可以将一个字符串按照指定的分隔符进行拆分，并返回一个由拆分后的子字符串构成的数组。
下面是使用split()方法进行简单分割的示例代码：```javascriptlet str = "apple,banana,orange";let arr = str.split(",");console.log(arr); // 输出：["apple", "banana", "orange"]```在上面的代码中，我们将字符串"apple,banana,orange"按照逗号（","）进行拆分，得到了一个由三个子字符串构成的数组。
二、使用正则表达式进行复杂分割如果需要更加灵活地进行字符串拆分，可以使用正则表达式作为分隔符。
JavaScript的split()方法支持使用正则表达式作为参数。
下面是一个使用正则表达式进行复杂分割的示例代码：```javascriptlet str = "apple1banana2orange3";let arr = str.split(/[0-9]/);console.log(arr); // 输出：["apple", "banana", "orange", ""]```在上面的代码中，我们将字符串"apple1banana2orange3"按照任意一个数字进行拆分，得到了一个由四个子字符串构成的数组。
js数组获取前10条数据的方法
一、概述JavaScript（以下简称JS）是一种广泛应用的脚本语言，用于为网页增加动态功能。
在JS中，数组是一种非常常见的数据类型，而获取数组中的前10条数据也是经常会遇到的问题。
本文将介绍JS数组获取前10条数据的方法，希望能够帮助读者更好地理解和应用JS数组。
二、使用slice方法1. slice方法是JS数组对象的原生方法之一，通过它可以截取数组中指定位置的元素，返回一个新的数组。
2. 使用slice方法可以轻松获取数组的前10个元素，示例代码如下：```javascriptlet arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];let firstTen = arr.slice(0, 10);console.log(firstTen); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]```3. 通过指定slice方法的起始位置和结束位置参数，即可获取数组中的指定范围内的元素。
三、使用slice和apply方法1. 如果需要获取的不仅仅是数组的前10个元素，还可以将slice和apply方法结合使用，以应对更灵活的需求。
2. 示例代码如下：```javascriptlet arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];let firstTen = Array.prototype.slice.apply(arr, [0, 10]); console.log(firstTen); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]```3. 在这个示例中，我们利用apply方法将slice方法应用于数组arr，并传入起始位置和结束位置参数，同样可以获取数组的前10个元素。
四、使用slice和call方法1. 类似地，也可以利用call方法结合slice方法实现对数组前10个元素的获取。
JavaScript中如何判断一个变量是否为函数类型
JavaScript中如何判断一个变量是否为函数类型在JavaScript中，判断一个变量是否为函数类型有多种方法。
本文将介绍三种常用的方法：typeof运算符、instanceof运算符和使用Object.prototype.toString方法。
一、使用typeof运算符在JavaScript中，typeof运算符可以返回一个变量的类型。
当变量是函数类型时，typeof运算符会返回"function"。
因此，我们可以通过对变量使用typeof运算符，然后判断返回的结果是否为"function"来判断变量是否为函数类型。
示例代码如下：```javascriptfunction isFunction1(variable) {return typeof variable === 'function';}```二、使用instanceof运算符JavaScript中的instanceof运算符可以判断一个对象是否属于某个特定类。
在JavaScript中，函数也是对象的一种，每个函数都是Function类的实例。
因此，通过使用instanceof运算符可以判断一个变量是否为函数类型。
示例代码如下：```javascriptfunction isFunction2(variable) {return variable instanceof Function;}```三、使用Object.prototype.toString方法在JavaScript中，Object.prototype.toString方法是一个通用的方法，可以获取一个变量的类型。
通过使用这个方法，我们可以获取一个函数对象的类型字符串"[object Function]"。
进一步，我们可以使用正则表达式对这个类型字符串进行匹配，判断一个变量是否为函数类型。
示例代码如下：```javascriptfunction isFunction3(variable) {return Object.prototype.toString.call(variable) === '[object Function]';}```综上所述，我们可以使用typeof运算符、instanceof运算符和Object.prototype.toString方法来判断一个变量是否为函数类型。
使用JavaScript编写一个判断一个数是否为素数的函数
使用JavaScript编写一个判断一个数是否为素数的函数在编写JavaScript代码时，我们经常会遇到需要判断一个数是否为素数的情况。
素数，又称质数，是指只能被1和自身整除的自然数。
在本文中，我们将编写一个函数来判断一个数是否为素数。
函数的名称可以是`isPrime`，它接受一个参数`num`，表示待判断的数。
我们将使用一种简单而有效的算法来实现该函数。
```javascriptfunction isPrime(num) {// 处理特殊情况：小于等于1的数都不是素数if (num <= 1) {return false;}// 将待判断的数分别与2到其平方根之间的所有数取模// 如果存在能整除的数，则该数不是素数，否则是素数for (var i = 2; i <= Math.sqrt(num); i++) {if (num % i === 0) {return false;}}return true;}```以上就是我们使用JavaScript编写的判断一个数是否为素数的函数。
函数首先处理特殊情况，如果`num`小于等于1，则直接返回`false`。
然后，通过遍历2到`num`的平方根之间的所有数，通过取模运算来判断是否能整除。
如果存在能整除的数，则不是素数，返回`false`；否则，是素数，返回`true`。
我们可以通过以下代码来测试该函数：```javascriptvar number = 13;if (isPrime(number)) {console.log(number + "是素数");} else {console.log(number + "不是素数");}```在上述代码中，我们定义了一个变量`number`，并将其赋值为13。
然后，通过调用`isPrime`函数来判断`number`是否为素数。
根据函数的返回值，我们分别输出相应的结果。
如何使用JavaScript编写一个字符串反转函数
如何使用JavaScript编写一个字符串反转函数使用JavaScript编写一个字符串反转函数非常简单。
在这篇文章中，我将向您展示一种简单而有效的方法来实现这个功能。
在开始之前，我们需要了解一下JavaScript中字符串的基本操作。
JavaScript中的字符串是不可变的，这意味着一旦创建了一个字符串，就无法更改它的值。
因此，我们需要使用其他方法来进行字符串操作，比如创建一个新的字符串来存储反转后的结果。
要实现一个字符串反转函数，我们可以编写一个接受一个字符串作为参数的函数，并返回该字符串的反转版本。
下面是一个示例函数：```javascriptfunction reverseString(str) {var reversed = "";for (var i = str.length - 1; i >= 0; i--) {reversed += str.charAt(i);}return reversed;}```这个函数使用了一个for循环来遍历字符串中的每个字符，并将它们逆序添加到一个新的字符串中。
在每次迭代中，我们使用字符串的charAt方法来获取当前索引位置的字符。
为了测试这个函数，我们可以调用它并传入一个字符串作为参数。
下面是一个示例：```javascriptvar originalString = "Hello, World!";var reversedString = reverseString(originalString);console.log(reversedString);```当我们运行上述代码时，控制台将输出"!dlroW ,olleH"。
这是原始字符串"Hello, World!"的反转结果。
除了使用for循环，我们还可以使用JavaScript中内置的方法来实现字符串反转。
Puppeteer--代码示例（1）
Puppeteer--代码⽰例（1）1、截图使⽤ Puppeteer 既可以对某个页⾯进⾏截图，也可以对页⾯中的某个元素进⾏截图：(async () => {const browser = await unch();const page = await browser.newPage();//设置可视区域⼤⼩await page.setViewport({width: 1920, height: 800});await page.goto('https://');//对整个页⾯截图await page.screenshot({path: './files/capture.png', //图⽚保存路径type: 'png',fullPage: true//边滚动边截图// clip: {x: 0, y: 0, width: 1920, height: 800}});//对页⾯某个元素截图let [element] = await page.$x('/html/body/section[4]/div/div[2]');await element.screenshot({path: './files/element.png'});await page.close();await browser.close();})();我们怎么去获取页⾯中的某个元素呢？page.$('#uniqueId')：获取某个选择器对应的第⼀个元素page.$$('div')：获取某个选择器对应的所有元素page.$x('//img')：获取某个 xPath 对应的所有元素page.waitForXPath('//img')：等待某个 xPath 对应的元素出现page.waitForSelector('#uniqueId')：等待某个选择器对应的元素出现2、模拟⽤户登录(async () => {const browser = await unch({slowMo: 100, //放慢速度headless: false,defaultViewport: {width: 1440, height: 780},ignoreHTTPSErrors: false, //忽略 https 报错args: ['--start-fullscreen'] //全屏打开页⾯});const page = await browser.newPage();await page.goto('https://');//输⼊账号密码const uniqueIdElement = await page.$('#uniqueId');await uniqueIdElement.type('admin@', {delay: 20});const passwordElement = await page.$('#password', {delay: 20});await passwordElement.type('123456');//点击确定按钮进⾏登录let okButtonElement = await page.$('#btn-ok');//等待页⾯跳转完成，⼀般点击某个按钮需要跳转时，都需要等待 page.waitForNavigation() 执⾏完毕才表⽰跳转成功await Promise.all([okButtonElement.click(),page.waitForNavigation()]);console.log('admin 登录成功');await page.close();await browser.close();})();那么 ElementHandle 都提供了哪些操作元素的函数呢？elementHandle.click()：点击某个元素elementHandle.tap()：模拟⼿指触摸点击elementHandle.focus()：聚焦到某个元素elementHandle.hover()：⿏标 hover 到某个元素上elementHandle.type('hello')：在输⼊框输⼊⽂本3、请求拦截在有些场景下很有必要，拦截⼀下没必要的请求以提⾼性能，我们可以在监听 Page 的 request 事件，并进⾏请求拦截，前提是要开启请求拦截(async () => {const browser = await unch();const page = await browser.newPage();const blockTypes = new Set(['image', 'media', 'font']);await page.setRequestInterception(true); //开启请求拦截page.on('request', request => {const type = request.resourceType();const shouldBlock = blockTypes.has(type);if(shouldBlock){//直接阻⽌请求return request.abort();}else{//对请求重写return request.continue({//可以对 url，method，postData，headers 进⾏覆盖headers: Object.assign({}, request.headers(), {'puppeteer-test': 'true'})});}});await page.goto('https://');await page.close();await browser.close();})();那 page 页⾯上都提供了哪些事件呢？page.on('close') 页⾯关闭page.on('console') console API 被调⽤page.on('error') 页⾯出错page.on('load') 页⾯加载完page.on('request') 收到请求page.on('requestfailed') 请求失败page.on('requestfinished') 请求成功page.on('response') 收到响应page.on('workercreated') 创建 webWorkerpage.on('workerdestroyed') 销毁 webWorker4、获取 WebSocket 响应Puppeteer ⽬前没有提供原⽣的⽤于处理 WebSocket 的 API 接⼝，但是我们可以通过更底层的 Chrome DevTool Protocol (CDP) 协议获得(async () => {const browser = await unch();const page = await browser.newPage();//创建 CDP 会话let cdpSession = await page.target().createCDPSession();//开启⽹络调试,监听 Chrome DevTools Protocol 中 Network 相关事件await cdpSession.send('Network.enable');//监听 webSocketFrameReceived 事件，获取对应的数据cdpSession.on('Network.webSocketFrameReceived', frame => {let payloadData = frame.response.payloadData;if(payloadData.includes('push:query')){//解析payloadData，拿到服务端推送的数据let res = JSON.parse(payloadData.match(/\{.*\}/)[0]);if(res.code !== 200){console.log(`调⽤websocket接⼝出错:code=${res.code},message=${res.message}`);}else{console.log('获取到websocket接⼝数据：', res.result);}}});await page.goto('https:///dash/142161/reportExport?pid=700209493');await page.waitForFunction('window.renderdone', {polling: 20});await page.close();await browser.close();})();5、植⼊ javascript 代码Puppeteer 最强⼤的功能是，你可以在浏览器⾥执⾏任何你想要运⾏的 javascript 代码，下⾯是我在爬 188 邮箱的收件箱⽤户列表时，发现每次打开收件箱再关掉都会多处⼀个 iframe 来，随着打开收件箱的增多，iframe 增多到浏览器卡到⽆法运⾏，所以我在爬⾍代码⾥加了删除⽆⽤ iframe 的脚本：(async () => {const browser = await unch();const page = await browser.newPage();await page.goto('https://');//注册⼀个 Node.js 函数，在浏览器⾥运⾏await page.exposeFunction('md5', text =>crypto.createHash('md5').update(text).digest('hex'));//通过 page.evaluate 在浏览器⾥执⾏删除⽆⽤的 iframe 代码await page.evaluate(async () => {let iframes = document.getElementsByTagName('iframe');for(let i = 3; i < iframes.length - 1; i++){let iframe = iframes[i];if(.includes("frameBody")){iframe.src = 'about:blank';try{iframe.contentWindow.document.write('');iframe.contentWindow.document.clear();}catch(e){}//把iframe从页⾯移除iframe.parentNode.removeChild(iframe);}}//在页⾯中调⽤ Node.js 环境中的函数const myHash = await window.md5('PUPPETEER');console.log(`md5 of ${myString} is ${myHash}`);});await page.close();await browser.close();})();有哪些函数可以在浏览器环境中执⾏代码呢？page.evaluate(pageFunction[, ...args])：在浏览器环境中执⾏函数page.evaluateHandle(pageFunction[, ...args])：在浏览器环境中执⾏函数，返回 JsHandle 对象page.$$eval(selector, pageFunction[, ...args])：把 selector 对应的所有元素传⼊到函数并在浏览器环境执⾏page.$eval(selector, pageFunction[, ...args])：把 selector 对应的第⼀个元素传⼊到函数在浏览器环境执⾏page.evaluateOnNewDocument(pageFunction[, ...args])：创建⼀个新的 Document 时在浏览器环境中执⾏，会在页⾯所有脚本执⾏之前执⾏page.exposeFunction(name, puppeteerFunction)：在 window 对象上注册⼀个函数，这个函数在 Node 环境中执⾏，有机会在浏览器环境中调⽤ Node.js 相关函数库。
JavaScript写的一个自定义弹出式对话框代码
JavaScript写的⼀个⾃定义弹出式对话框代码下图是我的设计思路下⾯是具体的js代码1，⾸先定义⼏个⾃定义函数代码复制代码代码如下://判断是否为数组function isArray(v){return v && typeof v.length == 'number' && typeof v.splice == 'function';}//创建元素function createEle(tagName){return document.createElement(tagName);}//在body中添加⼦元素function appChild(eleName){return document.body.appendChild(eleName);}//从body中移除⼦元素function remChild(eleName){return document.body.removeChild(eleName);}2，具体的窗体实现代码代码复制代码代码如下://弹出窗⼝，标题（html形式）、html、宽度、⾼度、是否为模式对话框(true,false)、按钮（关闭按钮为默认，格式为['按钮1',fun1,'按钮2',fun2]数组形式，前⾯为按钮值，后⾯为按钮onclick事件）function showWindow(title,html,width,height,modal,buttons){//避免窗体过⼩if (width < 300){width = 300;}if (height < 200){height = 200;}//声明mask的宽度和⾼度（也即整个屏幕的宽度和⾼度）var w,h;//可见区域宽度和⾼度var cw = document.body.clientWidth;var ch = document.body.clientHeight;//正⽂的宽度和⾼度var sw = document.body.scrollWidth;var sh = document.body.scrollHeight;//可见区域顶部距离body顶部和左边距离var st = document.body.scrollTop;var sl = document.body.scrollLeft;w = cw > sw ? cw:sw;h = ch > sh ? ch:sh;//避免窗体过⼤if (width > w){width = w;}if (height > h){height = h;}//如果modal为true，即模式对话框的话，就要创建⼀透明的掩膜if (modal){var mask = createEle('div');mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:10000;width:" + w + "px;height:" + h + "px;";appChild(mask);}//这是主窗体var win = createEle('div');win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) +"px;background:#f0f0f0;z-index:10001;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;"; //标题栏var tBar = createEle('div');//afccfe,dce8ff,2b2f79tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; //标题栏中的⽂字部分var titleCon = createEle('div');titleCon.style.cssText = "float:left;margin:3px;";titleCon.innerHTML = title;//firefox不⽀持innerText，所以这⾥⽤innerHTMLtBar.appendChild(titleCon);//标题栏中的“关闭按钮”var closeCon = createEle('div');closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可⽤closeCon.innerHTML = "×";tBar.appendChild(closeCon);win.appendChild(tBar);//窗体的内容部分，CSS中的overflow使得当内容⼤⼩超过此范围时，会出现滚动条var htmlCon = createEle('div');htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; htmlCon.innerHTML = html;win.appendChild(htmlCon);//窗体底部的按钮部分var btnCon = createEle('div');btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";//如果参数buttons为数组的话，就会创建⾃定义按钮if (isArray(buttons)){var length = buttons.length;if (length > 0){if (length % 2 == 0){for (var i = 0; i < length; i = i + 2){//按钮数组var btn = createEle('button');btn.innerHTML = buttons[i];//firefox不⽀持value属性，所以这⾥⽤innerHTML// btn.value = buttons[i];btn.onclick = buttons[i + 1];btnCon.appendChild(btn);//⽤户填充按钮之间的空⽩var nbsp = createEle('label');nbsp.innerHTML = "  ";btnCon.appendChild(nbsp);}}}}//这是默认的关闭按钮var btn = createEle('button');// btn.setAttribute("value","关闭");btn.innerHTML = '关闭';// btn.value = '关闭';btnCon.appendChild(btn);win.appendChild(btnCon);appChild(win);/*************************************以下为拖动窗体事件*********************///⿏标停留的X坐标var mouseX = 0;//⿏标停留的Y坐标var mouseY = 0;//窗体到body顶部的距离var toTop = 0;//窗体到body左边的距离var toLeft = 0;//判断窗体是否可以移动var moveable = false;//标题栏的按下⿏标事件tBar.onmousedown = function(){var eve = getEvent();moveable = true;mouseX = eve.clientX;mouseY = eve.clientY;toTop = parseInt(win.style.top);toLeft = parseInt(win.style.left);//移动⿏标事件tBar.onmousemove = function(){if(moveable){var eve = getEvent();var x = toLeft + eve.clientX - mouseX;var y = toTop + eve.clientY - mouseY;if (x > 0 && (x + width < w) && y > 0 && (y + height < h)){win.style.left = x + "px";win.style.top = y + "px";}}}//放下⿏标事件，注意这⾥是document⽽不是tBardocument.onmouseup = function(){moveable = false;}}//获取浏览器事件的⽅法，兼容ie和firefoxfunction getEvent(){return window.event || arguments.callee.caller.arguments[0];}//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件btn.onclick = closeCon.onclick = function(){remChild(win);remChild(mask);}}实例调⽤复制代码代码如下:str = "看看我的窗体效果";showWindow('我的提⽰框',str,850,250,true,['地区',fun1,'矿种',fun2]);更为完整实⽤的代码，包括定义和调⽤代码复制代码代码如下:<html><head><title>⾃定义弹出对话框</title><style type ="text/css" >.layout{width:2000px;height:400px;border:solid 1px red;text-align:center;}</style><script type="text/javascript">//判断是否为数组function isArray(v){return v && typeof v.length == 'number' && typeof v.splice == 'function'; }//创建元素function createEle(tagName){return document.createElement(tagName);}//在body中添加⼦元素function appChild(eleName){return document.body.appendChild(eleName);}//从body中移除⼦元素function remChild(eleName){return document.body.removeChild(eleName);}//弹出窗⼝，标题（html形式）、html、宽度、⾼度、是否为模式对话框(true,false)、按钮（关闭按钮为默认，格式为['按钮1',fun1,'按钮2',fun2]数组形式，前⾯为按钮值，后⾯为按钮onclick事件）function showWindow(title,html,width,height,modal,buttons){//避免窗体过⼩if (width < 300){width = 300;}if (height < 200){height = 200;}//声明mask的宽度和⾼度（也即整个屏幕的宽度和⾼度）var w,h;//可见区域宽度和⾼度var cw = document.body.clientWidth;var ch = document.body.clientHeight;//正⽂的宽度和⾼度var sw = document.body.scrollWidth;var sh = document.body.scrollHeight;//可见区域顶部距离body顶部和左边距离var st = document.body.scrollTop;var sl = document.body.scrollLeft;w = cw > sw ? cw:sw;h = ch > sh ? ch:sh;//避免窗体过⼤if (width > w){width = w;}if (height > h){height = h;}//如果modal为true，即模式对话框的话，就要创建⼀透明的掩膜if (modal){var mask = createEle('div');mask.style.cssText = "position:absolute;left:0;top:0px;background:#fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:100;width:" + w + "px;height:" + h + "px;";appChild(mask);}//这是主窗体var win = createEle('div');win.style.cssText = "position:absolute;left:" + (sl + cw/2 - width/2) + "px;top:" + (st + ch/2 - height/2) +"px;background:#f0f0f0;z-index:101;width:" + width + "px;height:" + height + "px;border:solid 2px #afccfe;";//标题栏var tBar = createEle('div');//afccfe,dce8ff,2b2f79tBar.style.cssText = "margin:0;width:" + width + "px;height:25px;background:url(top-bottom.png);cursor:move;"; //标题栏中的⽂字部分var titleCon = createEle('div');titleCon.style.cssText = "float:left;margin:3px;";titleCon.innerHTML = title;//firefox不⽀持innerText，所以这⾥⽤innerHTMLtBar.appendChild(titleCon);//标题栏中的“关闭按钮”var closeCon = createEle('div');closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;";//cursor:hand在firefox中不可⽤closeCon.innerHTML = "×";tBar.appendChild(closeCon);win.appendChild(tBar);//窗体的内容部分，CSS中的overflow使得当内容⼤⼩超过此范围时，会出现滚动条var htmlCon = createEle('div');htmlCon.style.cssText = "text-align:center;width:" + width + "px;height:" + (height - 50) + "px;overflow:auto;"; htmlCon.innerHTML = html;win.appendChild(htmlCon);//窗体底部的按钮部分var btnCon = createEle('div');btnCon.style.cssText = "width:" + width + "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";//如果参数buttons为数组的话，就会创建⾃定义按钮if (isArray(buttons)){var length = buttons.length;if (length > 0){if (length % 2 == 0){for (var i = 0; i < length; i = i + 2){//按钮数组var btn = createEle('button');btn.innerHTML = buttons[i];//firefox不⽀持value属性，所以这⾥⽤innerHTML// btn.value = buttons[i];btn.onclick = buttons[i + 1];btnCon.appendChild(btn);//⽤户填充按钮之间的空⽩var nbsp = createEle('label');nbsp.innerHTML = "  ";btnCon.appendChild(nbsp);}}}}//这是默认的关闭按钮var btn = createEle('button');// btn.setAttribute("value","关闭");btn.innerHTML = "关闭";// btn.value = '关闭';btnCon.appendChild(btn);win.appendChild(btnCon);appChild(win);/******************************************************以下为拖动窗体事件************************************************/ //⿏标停留的X坐标var mouseX = 0;//⿏标停留的Y坐标var mouseY = 0;//窗体到body顶部的距离var toTop = 0;//窗体到body左边的距离var toLeft = 0;//判断窗体是否可以移动var moveable = false;//标题栏的按下⿏标事件tBar.onmousedown = function(){var eve = getEvent();moveable = true;mouseX = eve.clientX;mouseY = eve.clientY;toTop = parseInt(win.style.top);toLeft = parseInt(win.style.left); //移动⿏标事件 tBar.onmousemove = function() { if(moveable) { var eve = getEvent(); var x = toLeft + eve.clientX - mouseX; var y = toTop + eve.clientY - mouseY; if (x > 0 && (x + width < w) && y > 0 && (y + height < h)) { win.style.left = x + "px"; win.style.top = y + "px"; } } } //放下⿏标事件，注意这⾥是document⽽不是tBar document.onmouseup = function() { moveable = false; } }//获取浏览器事件的⽅法，兼容ie和firefoxfunction getEvent(){return window.event || arguments.callee.caller.arguments[0];}//顶部的标题栏和底部的按钮栏中的“关闭按钮”的关闭事件btn.onclick = closeCon.onclick = function(){remChild(win);if (mask){remChild(mask);}}}function addCheckbox(name,value,id,click){var str = "<input type='checkbox' name='" + name + "' value='" + value + "' id='" + id + "' onclick='" + (click == null ? '':click) + "'/> <label for='" + id + "'>" + value + "</label>";return str;}function show(){var str = "<div><div style='border:dotted 1px blue'><table cellspacing='2'>";str += "<tr><td colspan='7' style='text-align:center'>请选择所在地区：" + addCheckbox('all','全（不）选','cities_all','selectAll(this,\"cities_cb\")') + "</td></tr>";str += "<tr><td>" + addCheckbox('cities_cb','长沙市','cities_cb1') + "</td><td>" + addCheckbox('cities_cb','株洲市','cities_cb2') + "</td><td>" + addCheckbox('cities_cb','湘潭市','cities_cb3') + "</td><td>" + addCheckbox('cities_cb','衡阳市','cities_cb4') + " </td><td>" + addCheckbox('cities_cb','益阳市','cities_cb5') + "</td>";str += "<td>" + addCheckbox('cities_cb','常德市','cities_cb6') + "</td><td>" + addCheckbox('cities_cb','岳阳市','cities_cb7') + "str += "<tr><td>" + addCheckbox('cities_cb','邵阳市','cities_cb8') + "</td><td>" + addCheckbox('cities_cb','郴州市','cities_cb9') + "</td><td>" + addCheckbox('cities_cb','娄底市','cities_cb10') + "</td>";str += "<td>" + addCheckbox('cities_cb','永州市','cities_cb11') + "</td><td>" + addCheckbox('cities_cb','怀化市','cities_cb12') + "</td><td>" + addCheckbox('cities_cb','张家界市','cities_cb13') + "</td><td>" + addCheckbox('cities_cb','湘西⾃治州','cities_cb14') + "</td></tr>";str += "</table></div><br/><div style='border:dotted 1px blue'><table cellspacing='2'>";str += "<tr><td colspan='10' style='text-align:center'>请选择矿种：" + addCheckbox('all','全（不）选','class_all','selectAll(this,\"class_cb\")') + "</td></tr>";str += "<tr><td>" + addCheckbox('class_cb','铋','class_cb1') + "</td><td>" + addCheckbox('class_cb','钒','class_cb2') + "</td> <td>" + addCheckbox('class_cb','⾦','class_cb3') + "</td><td>" + addCheckbox('class_cb','煤','class_cb4') + "</td><td>" + addCheckbox('class_cb','锰','class_cb5') + "</td><td>" + addCheckbox('class_cb','钼','class_cb6') + "</td><td>" + addCheckbox('class_cb','铅','class_cb7') + "</td><td>" + addCheckbox('class_cb','⽯膏','class_cb8') + "</td><td>" + addCheckbox('class_cb','⽯煤','class_cb9') + "</td><td>" + addCheckbox('class_cb','锑','class_cb10') + "</td></tr>";str += "<tr><td>" + addCheckbox('class_cb','铁','class_cb11') + "</td><td>" + addCheckbox('class_cb','铜','class_cb12') + "</td><td>" + addCheckbox('class_cb','钨','class_cb13') + "</td><td>" + addCheckbox('class_cb','锡','class_cb14') + "</td><td>" + addCheckbox('class_cb','锌','class_cb15') + "</td><td>" + addCheckbox('class_cb','银','class_cb16') + "</td><td>" + addCheckbox('class_cb','萤⽯','class_cb17') + "</td><td>" + addCheckbox('class_cb','铀','class_cb18') + "</td><td>" + addCheckbox('class_cb','稀⼟氧化物','class_cb19') + "</td><td>" + addCheckbox('class_cb','重晶⽯','class_cb20') + "</td> </tr>";str += "<tr><td>" + addCheckbox('class_cb','硼','class_cb21') + "</td><td>" + addCheckbox('class_cb','磷','class_cb22') + "</td><td>" + addCheckbox('class_cb','⽔泥灰岩','class_cb23') + "</td><td>" + addCheckbox('class_cb','熔剂灰岩','class_cb24') + "</td><td>" + addCheckbox('class_cb','冶⾦⽩云岩','class_cb25') + "</td><td>" +addCheckbox('class_cb','岩盐','class_cb26') + "</td><td>" + addCheckbox('class_cb','芒硝','class_cb27') + "</td><td>" + addCheckbox('class_cb','钙芒硝','class_cb28') + "</td><td>" + addCheckbox('class_cb','地下⽔','class_cb29') + "</td><td>" + addCheckbox('class_cb','地下热⽔','class_cb30') + "</td></tr>";str += "</table></div></div>";showWindow('我的提⽰框',str,850,250,true,['地区',fun1,'矿种',fun2]);}function selectAll(obj,oName){var checkboxs = document.getElementsByName(oName);for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}}function getStr(cbName){var cbox = document.getElementsByName(cbName);var str = "";for (var i=0;i<cbox.length;i++){if(cbox[i].checked){str += "," + cbox[i].value;}}str = str.substr(1);return str;}function fun1(){var str = getStr('cities_cb');alert('你选择的地区为：' + str);}function fun2(){var str = getStr('class_cb');alert('你选择的矿种为：' + str);}</script><body><div class ="layout"></div><div class ="layout"></div><div class ="layout"><input type="button" value="显⽰" onclick="show()" /> </div></body></html>此脚本在ie，firefox浏览器下运⾏通过。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一．日期类练习：月历<script>for(i=0;i<=11;i++){document.write((i+1)+"月 ");var d=new Date(2012,i+1,0);var n=new Date();var m=n.getMonth();//本月var day=n.getDate(); //本日for(j=1;j<=d.getDate();j++){if(i==m && day==j)document.write("<font color=blue size=+2 onClick=alert('愿您拥有一个美好日子')>"+j+"</font> ");elsedocument.write(j+" ");}document.write("<br>");}</script>二．抽奖Math.floor:求一个浮点数的地板，就是求一个最接近它的整数，它的值小于或等于这个浮点数。
Math.round:离自己最近的整数。
clearTimeout() 方法可取消由setTimeout() 方法设置的timeout。
var t=setTimeout("alert('5 seconds!')",5000)<html><head><title>抽奖程序</title><script>function showNextNum(){num.innerHTML=Math.floor(Math.random()*(16-1)+1);}function showCapture(){clearTimeout(r);}</script></head><body onKeypress="showCapture()"><h1 id=num> </h1><script>r=setInterval("showNextNum()",1000);</script></body></html>三．时钟<html><head><title>数字式电子时钟</title><script>function setTime(){var d=new Date();timer.innerHTML=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds(); }</script></head><body><h1 id="timer">00:00:00</h1><script>setInterval("setTime()",1000);</script></body></html>四．房屋信息验证只允许输入数字<input onkeyup="value=value.replace(/[^\d]/g,'') " maxlength=10 size=4 name=peopletelarea><script type="text/javascript">function checkForm(){if(chuzuform.address.value==null || chuzuform.address.value==""){window.alert("地址不得为空");chuzuform.address.focus();return false;}var tele=chuzuform.telephone.value;var mobile=chuzuform.mobile.value;if((tele==null || tele=="") && (mobile==null || mobile=="")){alert("电话手机至少填一项");return false;}if(tele!=null && tele!=""){if(tele.length<7 || tele.length>8){alert("电话必须在7~8位");}}if(mobile!=null && mobile!=""){if(mobile.length!=11){alert("手机号必须是11位");}}return true;}function chooseAll2(){var o = document.getElementsByName("fitmentthing");for (i=0; i<o.length; i++) {o[i].checked = true;}}</script>五．表单验证//CheckBox全选function selectAll(formName, cbName) {var o = document.forms(formName).item(cbName);if (o.length) {//判断是否只有一项for (i=0; i<o.length; i++) {document.forms(formName).item(cbName)[i].checked = true;}} else {o.checked = true;}}//CheckBox取消全选function unSelectAll(formName, cbName) {var o = document.forms(formName).item(cbName);if (o.length) {//判断是否只有一项for (i=0; i<o.length; i++) {document.forms(formName).item(cbName)[i].checked = false;}} else {o.checked = false;}}var numberInfo=field[i].numberInfo;//是否是正整数if (numberInfo!=null) {if (!isNumber(value)) {alert(numberInfo);field[i].select();return false;}}var noChineseInfo=field[i].noChineseInfo;//是否为汉字if (noChineseInfo!=null) {if (isNotChinese(value)) {alert(noChineseInfo);field[i].focus();return false;} }1．undefined和null：一个特殊值，通常用于指示变量尚未赋值。
对未定义值的引用返回特殊值undefined。
2．讲完函数之后再做以下练习3．if和switch：加法器计算器4．for循环：对一组复选框进行全选。
function chooseAll1(){var o = document.getElementsByName("baseestablshment");for (i=0; i<o.length; i++) {o[i].checked = true;}}5．isNaN(34) ：false6．乘法表for(var i=1;i<=9;i++){for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+i*j+"\t");}document.write("<br>");}<script language="JavaScript">var s="";while(x=prompt("请输入吧","")){if(x!="stop") s+="<font color=red>"+x+"</font>";else {s+="<font color=blue>stop</font>";break;}}document.write(s);</script>出生年月日<script language="JavaScript">function toDate(){with(document.all){var y=year.options[year.selectedIndex].text;v ar m=mon.options[mon.selectedIndex].text;d ay.options.length=0;//清空下拉列表var dd=new Date(y,m,0);f or(i=1;i<=dd.getDate();i++){day.options.add(new Option(i,i));}}}window.onload=toDate; </script>。