Javascript
请叫我二狗哥
我目前主要内容搬迁到博客园,优快云偶尔逛逛。我的博客园网址https://www.cnblogs.com/f6056/
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript网页实例:在网页里动态加载JavaScript
把一些逻辑独立的JavaScript脚本文件单独加载,是一种常见的JavaScript动态加载技术。这样做的好处有很多,比如可以减少不必要的JavaScript脚本文件的加载,以提高网页浏览速度。补充代码,要求用户在网页中点击【动态加载】按钮后,为html代码内需要加载的新增script脚本,脚本路径为./myjs.js,并要求文档加载完毕后再执行脚本。相关知识点:appendChild()、defer。原创 2022-11-21 22:00:00 · 1448 阅读 · 1 评论 -
JavaScript网页特效实例:跳转到其它页面
通过HTML超链接可以实现页面之间的跳转。但有时候也需要通过逻辑判断来进行动态跳转。JavaScript可以很好的实现这种效果。补充下面代码,当用户在页面中输入网址,通过跳转网址按钮跳转到对应的网页中。相关知识点:window.location.herf。原创 2022-11-18 12:49:18 · 800 阅读 · 0 评论 -
JS网页特效实例:禁止网页放入框架
在网络上,为了防止网页被随意地引入到别人的框架里,可以通过判断网页是否为最顶层网页来禁止网页被放入框架。知识点:JavaScript全局变量top。补充下面代码,禁止网页放入框架。原创 2022-11-18 12:14:16 · 455 阅读 · 0 评论 -
JS网页实例:若干秒后不操作自动关闭窗口
对一些安全要求比较高的网页,如网银和支付平台界面,为了保证用户数据安全,往往会提供这样的功能:若用户在累计的一段时间内没有进行任何操作,就会自动退出登陆或直接关闭窗口。补充下面代码,要求若用户每5秒内没有点击页面,窗口自动关闭。原创 2022-11-17 12:50:58 · 1567 阅读 · 0 评论 -
JS网页特效实例:动态关闭页面
网页有些时候不需要等待用户的操作而自动关闭。例如子窗口的作用已经结束,或者本窗口已经过期需要关闭,可以使用JavaScript实现这个效果。补充下面代码,要求用户点击【关闭此窗口】按钮后,页面进行关闭。原创 2022-11-16 13:03:32 · 693 阅读 · 0 评论 -
JS网页特效实例:让网页前进和后退
在浏览一些文档形式的网页时,往往需要给用户提供这样两个功能:前进和后退。用户通过单击按钮打到访问之前网页和之后网页的功能。请补充下面代码,让点击按钮实现页面前进和后退效果。在history对象里,还有一个go()函数,其有一个整型参数,当参数为正数时表示前进N页;当参数为负数时表示后退N页。例如go(-1)的效果与back()函数的效果一样。思考:当在VScode写好代码后,用浏览器打开代码,点击相关按钮,却没有任何反应,想一想这是为什么?原创 2022-11-16 12:44:36 · 1694 阅读 · 0 评论 -
JS实例:网页特效-自动刷新页面
在一些具有时效性特点的网页中,譬如股票价格、外汇牌等,需要定时刷新网页,把最新数据展示给用户,那么这样的效果如何实现呢?请使用reload()函数补充下面代码实现网页每隔5s自动刷新,同时显示实时的时间秒。(1)JS定时器setTimeout()和setInterval();(2)JS中window.location的属性和方法。原创 2022-11-14 12:51:52 · 1633 阅读 · 0 评论 -
JavaScript求任意区间随机整数方法以及数学原理模型
涉及数学原理模型为初中不等式基础知识。对于任意整数m、n,m原创 2022-06-17 19:30:00 · 2509 阅读 · 0 评论 -
JS中的for循环解数学题
正整数a,b满足ab+a+b=25,求a+b的值。实现代码: /*ab+a+b=25*/ for(var a=1;a<25;a++){ for(var b=1;b<25;b++){ if(a*b+a+b==25){ document.write(a+b+"<br>"); } } }答案:13原创 2022-02-24 13:02:09 · 686 阅读 · 0 评论 -
JS生成20个[20,50]区间内的随机整数,并求所有获得随机数的平均值
JS生成20个[20,50]区间内的随机整数,并求所有获得随机数的平均值参考代码: // 定义一个可以返回满足题意的随机整数 function randomF() { var aNumber = (50 + 1 - 20) * Math.random() + 20; var result = Math.floor(aNumber); return result; }原创 2020-07-22 18:39:51 · 2322 阅读 · 0 评论 -
JS阶乘案例:实现1!+2!+3!+4!+5!
求和:实现1!+2!+3!+4!+5!阶乘的定义:一个正整数的阶乘(factorial)是所有小于及等于该数的正整数的积,并且0的阶乘为1。自然数n的阶乘写作n!。1808年,基斯顿·卡曼引进这个表示法。亦即n!=1×2×3×...×(n-1)×n。其中0!=1。参考代码一: // 通过for循环定义阶乘函数 function factorial(x) { var result = 1; for (var i = 1; i <= x; i++) {原创 2020-07-09 12:36:19 · 4997 阅读 · 1 评论 -
JS打印一个1~100之间的质数
JS打印一个1~100之间的质数思路:1、质数是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数。2、确定质数的函数。循环嵌套①循环1-100之间的数字②对于其中任意数字i,除以所有小于它的正整数,如果余数为0,说明不是质数。参考代码: function isPrimeNumber(x) { var tmp = true; for (var i = 2; i < x; i++) {原创 2020-06-29 18:11:15 · 3981 阅读 · 1 评论 -
JS输出图像组成不同的三角形案例
试用JS绘制用五角星图案☆组成不同形状的三角形,直角三角形、倒直角三角形、等腰三角形,如下图所示。直角三角形参考代码:JS输出组成直角三角形 for (var i = 1; i <= 6; i++) { for (var j = 1; j <= i; j++) { document.write('☆'); if (i == j) { document.write('<br/>');..原创 2020-06-28 17:52:00 · 1153 阅读 · 0 评论 -
通过JS代码简单实现九九乘法表
试试用JS制作一个九九乘法口诀吧 。(提示:JS循环嵌套)能否在不看下面参考代码的情况下,独立写出满足要求的JS代码呢?参考代码: for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { document.write(j + "*" + i + '=' + i * j + ' ') if (i == .原创 2020-06-28 13:06:38 · 21152 阅读 · 0 评论 -
JavaScript中for循环嵌套编程小案例
编写一个函数用于实现金额组合:面额分别有1元、2元、5元的纸币共计N张,现需要付出M元,统计共有几种付法。N、M是用户输入的值。(有10张纸币,面额分别是1元、2元、5元,现需要付出18元,通过编程统计出共有几种付法。)思考:JS中for循环嵌套有什么特点?参考代码:方案1: /* 设1元a张,2元b张,5元c张 */ function f(N, M) { var arr = []; for (var a = 0; a原创 2020-06-24 13:00:35 · 1689 阅读 · 0 评论 -
JavaScript中变量判断是否是数字,判断是否是整数,判断是否是正整数/负整数,判断奇数/偶数的方法
(1)判断是否是整数JavaScript中变量判断是否是数字,判断是否是整数,判断是否是正整数/负整数,判断奇数/偶数的方法。(1)判断是否是整数 // 判断整数 function isInteger(x) { if (x === parseInt(x)) { console.log('整数'); } else { console.log("非整数"...原创 2020-06-22 23:15:28 · 1112 阅读 · 0 评论 -
JavaScript编程作业:字符串中分离出数字
在JavaScript的字符串中夹杂有数字信息,现在需要将数字提取出来。例如字符串"df454er49eg0ew8"需要提取454、49、0、8数字信息,以数组的形式展示出来['454','49','0','8']。请将下文代码按题意补充完整。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JavaScript数字提取小作业</title>原创 2020-06-22 12:44:16 · 1171 阅读 · 0 评论 -
优质前端基础知识网站收集整理
JavaScript基础知识网站:W3C官网(英语):http://w3.org/TR/css-backgrounds网道https://wangdoc.com/javascript/W3C中ECMAScrit标准中文翻译https://www.w3.org/html/ig/zh/wiki/ES5/%E6%A6%82%E8%BF%B0#.E8.AF.AD.E8.A8.80....原创 2018-09-13 16:23:35 · 501 阅读 · 0 评论 -
JavaScritp的DOM基础1-7 编程练习
1-7 编程练习小伙伴们,今天我们学习了dom的查找方法,按照下面效果图去补充代码!要求:依次弹出“前端书籍”的列表项,并在最后统计数它的列表项总共有几个。效果图如下:任务根据效果图完成以下步骤:第一步:先通过ID选取的方法获取到“前端书籍”Tips:因为有两个列表,所以先获取到指定的列表第二步:再通过标签名选取元素的方式获得列...原创 2019-05-11 13:06:21 · 503 阅读 · 0 评论 -
JavaScriptDOM基础1-6 编程练习
1-6 编程练习小伙伴们,今天我们学习了dom的查找方法,按要求补充下面的代码!要求:通过ID选取的方法获取到html文件中的div元素,并让它们依次的在页面中弹出!<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>DO...原创 2019-05-11 12:41:48 · 623 阅读 · 0 评论 -
BOM5-4 编程练习
5-4 编程练习小伙们,我们学习过浏览器的navigator对象,那么写一段代码,实现,当用户点击页面上的“点击获取浏览器信息”按钮时,页面会弹出窗口告知当前使用的浏览器是什么浏览器?任务第一步:获取到按钮对象,并给按钮绑定鼠标单击事件第二步:写出封装判断浏览器代码的函数 用浏览器对象的属性先获取到浏览器的版本、名称等信息,并用变量进行接收 对获取到的信息中所包含的...原创 2019-05-15 20:59:11 · 466 阅读 · 0 评论 -
BOM1-26 编程练习
1-26 编程练习根据gif效果图,补充代码,实现:当点击“开始”按钮时,div里面每隔一秒就有一个“hello”,”hello”依次累加,每个“hello”之间有一个空格分开根据gif效果图完成下列步骤:第一步:自定义变量,用来接收定时器,按钮对象以及div对象第二步:给“开始“按钮绑定鼠标单击事件,当点击”开始“按钮时,设置定时器,每隔一秒便在div中输出一个“hell...原创 2019-05-15 20:54:31 · 586 阅读 · 0 评论 -
BOM基础1-25 编程练习
1-25 编程练习补充代码,让页面内容实现“动画效果”,要求如下:“☆☆☆今日特卖☆☆☆ ”和“★★★今日特卖★★★”这两个文本每0.5秒互相切换一次,具体效果参考gif效果图第一步:先获取放置文本的div文本框对象,用变量进行接收第二步:自定义一个变量,用来接收记录闪烁的值,初始值是0第三步:设置定时器,每500毫秒执行一下定时器里面的脚本第四步:定时器的脚本如下:...原创 2019-05-15 20:51:57 · 812 阅读 · 0 评论 -
BOM基础1-21 编程练习
1-21 编程练习根据gif效果图补充代码,实现以下要求:(1) 点击“删除”按钮3秒后,页面上div里面的文字消失(2) 点击“删除”按钮之后的3秒内,如果点击“取消删除”按钮,那么页面上div里面的文字就不会被删除第一步:获取到页面上的两个按钮对象以及div对象第二步:声明一个变量,用来接收下面即将定义的定时器第三步:给“删除”按钮绑定事件,点击“删除”按钮...原创 2019-05-15 20:48:45 · 475 阅读 · 2 评论 -
BOM基础1-15 编程练习
1-15 编程练习小伙伴们,学习了window对象窗口的打开和关闭,那么根据效果图,补充代码!实现:当点击页面上的按钮时,弹出确认框(1)当点击按钮上的确定时,打开设置了新特征的子窗口,新窗口的特征参考任务栏中的描述(2) 当点击按钮上的取消时,关闭当前页面Tips:因为涉及到两个窗口,请在本地浏览器运行并查看效果!任务第一步:获取到按钮元素,并未按...原创 2019-05-15 20:46:49 · 427 阅读 · 0 评论 -
DOM1-9 编程练习
1-9 编程练习根据gif图,补充代码,实现以下效果:点击页面上的“删除”按钮,弹出确认框(1)当点击确认框上的“确定“时,按钮上的字变为红色;(2)当点击确认框上的“取消“时,按钮上的字变为绿色。gif图如下:任务根据gif效果图完成下列步骤:第一步:获取到按钮对象,给其绑定鼠标单击事件,以下步骤均在事件的匿名函数中进行第二步:写出确认框,确认框的显示内容...原创 2019-05-14 22:05:53 · 448 阅读 · 0 评论 -
JS缓冲运动案例
点击“向右”按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击“向右”#red区块也不会再运动。点击“向左”按钮,红色的#red区块开始向左缓冲运动,抵达到蓝色竖线位置自动停止,再次点击“向左”#red区块也不会再运动。<!DOCTYPE html><html lang="zh-CN"><head> <...原创 2019-08-01 13:00:21 · 288 阅读 · 0 评论 -
JS模拟百度分享侧边栏效果
模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位置。若#div1区块未全部露出时,鼠标移出,#div1区块则开始滑入隐藏;若#div1区块未全部滑入隐藏,鼠标移入,则div1区块则开始匀速弹出。示例图片<!DOCTYPE ...原创 2019-07-26 17:27:06 · 353 阅读 · 0 评论 -
DOM基础3-19 编程练习
3-19 编程练习小伙伴们,今天我们学习了鼠标事件,根据gif图,补充代码,实现下列功能:(1) 当鼠标在带滚动条的文本框上滑动时,字体颜色变成红色(2) 当鼠标移出带滚动条的文本框时,字体颜色变成绿色(3) 当鼠标移动文本框的滚动条时,空白的文本框出现文本“内容滚动了”任务第一步:通过id选取元素的方式获得这两个文本框Tips:带滚动条的文本框和空白文...原创 2019-05-12 11:33:53 · 416 阅读 · 0 评论 -
DOM基础3-13 编程练习
3-13 编程练习小伙伴们,今天我们学习了onchange鼠标事件,根据gif图,补充代码,实现下列功能:(1) 选择下拉列表中不同的选项,页面中的div就设置成不同的背景颜色,div中的内容也发生变化。 比如:选择黄色选项,div的背景颜色就变为黄色,文本内容就变为“我的背景颜色变成了yellow色”(2)当选择下拉列表中的“请选择”时,div的背景颜色...原创 2019-05-12 11:31:36 · 640 阅读 · 0 评论 -
DOM基础3-9 编程练习
3-9 编程练习小伙伴们,今天我们学习了onblur和onfocus这两个鼠标事件,根据gif图,补充代码,实现下列功能:(1) 当输入框获得焦点:如果输入框值为空,提示“请输入您的姓名”(2) 当输入框失去焦点:如果输入框值为空,提示“用户名不能为空”,并且边框颜色变为红色如果输入框值不为空,那么没有提示文字,边框颜色是默认颜色任务根据gif效果图完成...原创 2019-05-12 11:28:12 · 725 阅读 · 0 评论 -
DOM基础3-4 编程练习
3-4 编程练习小伙伴们,今天我们学习了onload事件,接下来补充下面的代码,实现以下功能:(1) 当点击按钮时,按钮的字体颜色变成红色(2) 当鼠标离开按钮时,字体颜色变成灰色Tips:脚本写在<head>标签中任务第一步:写出:在页面或图像加载完后才执行的事件语句,该语句后面跟上匿名函数Tips:匿名函数中写入点击按钮执行的脚本,以下步...原创 2019-05-12 11:26:10 · 625 阅读 · 2 评论 -
DOM基础2-16 编程练习
2-16 编程练习小伙伴们,今天我们学习了怎样给DOM对象绑定事件,那么根据gif图,实现以下功能:(1)如果按钮的值是“全选”, 当点击按钮时,按钮的值变为“反选”(2)如果按钮的值是“反选”, 当点击按钮时,按钮的值变为“全选”注意:使用通过DOM获取HTML元素的方式绑定事件gif图如下:任务根据gif效果图实现下面的任务步骤:第一步:先写出按钮的ht...原创 2019-05-12 11:24:09 · 496 阅读 · 0 评论 -
DOM基础2-17 编程练习
2-17 编程练习小伙伴们,今天我们学习了DOM 0级事件,那么根据gif图,实现以下功能:(1)当点击“录入”按钮时,循环弹出输入框,使用户输入信息(2)直到用户输入-1,停止弹出输入框,然后将用户输入的信息输出在页面上。Tips:使用通过DOM获取HTML元素的方式绑定事件任务根据gif效果图实现下面的任务步骤:第一步:先写出按钮的html代码Tips:按...原创 2019-05-12 11:21:34 · 405 阅读 · 0 评论 -
DOM基础1-30 编程练习
1-30 编程练习小伙伴们,今天我们学习了删除对象属性的方法,那么接下来用删除对象属性的方法把预设代码中P标签的样式全部去掉。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>dom属性的移除</title> ...原创 2019-05-12 11:19:25 · 401 阅读 · 0 评论 -
JavaScript中的DOM基础_1-29 编程练习
1-29 编程练习小伙伴们,我们学习了setAttribute()方法,那么接下来用setAttribute()方法来给代码中的列表内容添加样式吧添加的样式效果如下:任务第一步:通过标签名获取元素的方式先得到列表项Tips:得到的是一个对象集合,本题中需要获得集合中的第一个对象第二步:利用今天学习的为元素添加指定属性的方法给列表项的奇数项和偶数项分别添加样式Tips...原创 2019-05-12 09:09:33 · 406 阅读 · 0 评论 -
JavaScript获取元素clss属性-编程练习
下列代码中,哪一个能获取到p标签的class属性?(选择两项)<body> <p id="p1" class="p" date-type="pDate">我是标签里的内容</p> <script> var p=document.getElementById("p1"); var pClass...原创 2019-05-12 09:06:45 · 443 阅读 · 0 评论 -
DOM1-8 编程练习
1-8 编程练习根据gif图,实现以下效果:单击页面的“点击”按钮时,弹出输入框当点击输入框上的“确定“时,按钮上的文字变成输入框输入的内容。任务根据gif效果图完成下列步骤:第一步:先获取到按钮对象第二步:给按钮绑定事件,以下代码在事件的匿名函数中执行第三步:用变量接收输入框中输入的内容Tips:输入框的提示文字要进行换行第四步:当点击输入框上的“确定...原创 2019-05-14 22:04:20 · 360 阅读 · 3 评论 -
奇怪的undefined是如何来的?
一个简单的javascript代码,实验arguments取出数组相关。当叉掉第一个弹窗后,会出现第二个弹窗提示undefined,这个undefined是如何出来的?<!doctype html><html><head><meta charset="utf-8"><style></style><原创 2018-04-23 12:43:17 · 415 阅读 · 0 评论 -
JavaScript分支语句2-8 编程练习
2-8 编程练习小伙伴们,根据效果图,用循环写出代码。任务1、先写出初始的变量值2、写出它执行循环的条件3、每循环一次后变量值的增加4、页面显示执行语句。注意变量和字符串的拼接问题参考代码:<!DOCTYPE HTML><html> <head> <meta charset="utf-8"&g...原创 2019-04-25 22:15:58 · 284 阅读 · 0 评论
分享