基础案例
请叫我二狗哥
我目前主要内容搬迁到博客园,CSDN偶尔逛逛。我的博客园网址https://www.cnblogs.com/f6056/
展开
-
JavaScript网页实例:在网页里动态加载JavaScript
把一些逻辑独立的JavaScript脚本文件单独加载,是一种常见的JavaScript动态加载技术。这样做的好处有很多,比如可以减少不必要的JavaScript脚本文件的加载,以提高网页浏览速度。补充代码,要求用户在网页中点击【动态加载】按钮后,为html代码内需要加载的新增script脚本,脚本路径为./myjs.js,并要求文档加载完毕后再执行脚本。相关知识点:appendChild()、defer。原创 2022-11-21 22:00:00 · 1295 阅读 · 1 评论 -
JavaScript网页特效实例:跳转到其它页面
通过HTML超链接可以实现页面之间的跳转。但有时候也需要通过逻辑判断来进行动态跳转。JavaScript可以很好的实现这种效果。补充下面代码,当用户在页面中输入网址,通过跳转网址按钮跳转到对应的网页中。相关知识点:window.location.herf。原创 2022-11-18 12:49:18 · 702 阅读 · 0 评论 -
JS网页特效实例:禁止网页放入框架
在网络上,为了防止网页被随意地引入到别人的框架里,可以通过判断网页是否为最顶层网页来禁止网页被放入框架。知识点:JavaScript全局变量top。补充下面代码,禁止网页放入框架。原创 2022-11-18 12:14:16 · 351 阅读 · 0 评论 -
JS网页实例:若干秒后不操作自动关闭窗口
对一些安全要求比较高的网页,如网银和支付平台界面,为了保证用户数据安全,往往会提供这样的功能:若用户在累计的一段时间内没有进行任何操作,就会自动退出登陆或直接关闭窗口。补充下面代码,要求若用户每5秒内没有点击页面,窗口自动关闭。原创 2022-11-17 12:50:58 · 1378 阅读 · 0 评论 -
JS网页特效实例:动态关闭页面
网页有些时候不需要等待用户的操作而自动关闭。例如子窗口的作用已经结束,或者本窗口已经过期需要关闭,可以使用JavaScript实现这个效果。补充下面代码,要求用户点击【关闭此窗口】按钮后,页面进行关闭。原创 2022-11-16 13:03:32 · 588 阅读 · 0 评论 -
JS网页特效实例:让网页前进和后退
在浏览一些文档形式的网页时,往往需要给用户提供这样两个功能:前进和后退。用户通过单击按钮打到访问之前网页和之后网页的功能。请补充下面代码,让点击按钮实现页面前进和后退效果。在history对象里,还有一个go()函数,其有一个整型参数,当参数为正数时表示前进N页;当参数为负数时表示后退N页。例如go(-1)的效果与back()函数的效果一样。思考:当在VScode写好代码后,用浏览器打开代码,点击相关按钮,却没有任何反应,想一想这是为什么?原创 2022-11-16 12:44:36 · 1542 阅读 · 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 · 617 阅读 · 0 评论 -
已知x²+y²=4361 ,x,y均为正整数,求x-y的值。
二元一次方程153x+100y=1的整数解求解过程原创 2022-02-15 12:47:09 · 641 阅读 · 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 · 4730 阅读 · 1 评论 -
网页轮播图多特效源代码
<!doctype html><html><head><title>运动(轮播图)</title><meta charset="utf-8"><style>body{background:#666;}ul{padding:0;margin:0;}li{margin:0;paddin原创 2018-09-06 12:28:11 · 2817 阅读 · 0 评论 -
完美运动框架
//完美运动框架function getStyle(obj,name){ if(getComputedStyle(obj,null)[name]) { return getComputedStyle(obj,null)[name]; //fireFox、chrome } else { return obj.currentStyle[name]; //IE ...原创 2018-09-21 16:41:48 · 154 阅读 · 0 评论 -
HTML表格1-3编程练习
1-3 编程练习编程练习:请编写一段代码,实现边框为1,三行两列的表格。效果图如下:任务1.创建一个三行两列的表格2.设置表格边框值为为框设置13.根据效果图在相应单元格内添加相应文字<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=...原创 2019-03-22 20:19:51 · 948 阅读 · 0 评论 -
HTML表格2-4 编程练习
2-4 编程练习请创建一个五行五列表格,并进行行列添加与删除操作。原始表格效果:操作完成效果:原始表格效果代码<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...原创 2019-03-22 21:14:49 · 552 阅读 · 0 评论 -
HTML表格2-8编程练习
2-8 编程练习编程练习:请编写一段代码,实现边框为1,带有标题和表头的表格。效果图:任务1、创建一个5行4列的表格,边框宽度为1。2、根据效果图,添加相应内容。3、将第一行设置成表头。4、给表格添加标题“课程表”。<!DOCTYPE html><html> <head> <meta http-equiv="...原创 2019-03-23 09:23:07 · 430 阅读 · 0 评论 -
表单中input标签单选域与表单复选域的基本解析
表单单选域与表单复选域的基本解析:在网页制作中单选框和复选框是常用的功能之一。表单单选框与复选框是通过input标签设置type属性值来实现的。type="radio"为单选域,type="checkbox"为复选域。表单单选框中type="radio" 中name属性取值需要相同才能达到单选效果,value值为上传到服务器的值,因此规范代码条件下value值应该彼此互异。 check...原创 2019-03-27 18:23:59 · 2100 阅读 · 0 评论 -
do……while错题记录
单选题下面代码的运行结果是?(选择一项)var i=1;do{ document.write("hello world"); i++;}while(i>10);A页面上没有任何显示B页面上显示一个hello worldC页面上显示9个hello worldD页面陷入死循环参考答案:do……while语法do{需要执行的代码;}...原创 2019-04-25 22:11:50 · 258 阅读 · 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 · 236 阅读 · 0 评论 -
JavaScript分支语句2-17 编程练习_求水仙花数
2-17 编程练习水仙花数是这样的一个数字,它的每个位数上的数字的3次幂之和等于它本身,例如(1*1*1+5*5*5+3*3*3)=153;请在页面中输出1000以内的水仙花数任务1、获取到1000以内的水仙花数,我们可以使用循环来进行判断,注意循环的条件以及循环的初始变量值2、循环每一个三位数,当满足水仙花数的条件时就在页面中输出这个数参考代码:<!DOCTY...原创 2019-04-25 23:23:23 · 296 阅读 · 0 评论 -
关于Number()的用法
var a="123.456n";console.log(Number(a));代码的运行结果是?NaN原创 2019-04-22 23:12:07 · 2951 阅读 · 0 评论 -
JavaScript分支语句1-8 编程练习
1-8 编程练习 小伙伴们,请编写一段代码,实现: 当打开页面时,弹出一个输入学生成绩的输入框,当用户输入成绩时,对成绩进行判断! 判断要求如下: (1)当输入的成绩是90~100时(这里包括等于100的时候),弹出警告框“优秀” (2)当输入的成绩是80~89时,弹出警告框“良好” (3)当输入的成绩是70~79时,弹出警告框“一般” (4)60到69为及格当输入...原创 2019-04-24 12:40:51 · 487 阅读 · 0 评论 -
NaN考察知识点例题
下面代码的运行结果是?(选择一项)<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> </head> <body> <script> var str="IMOOC52...原创 2019-04-24 12:51:39 · 231 阅读 · 0 评论 -
DOM1-8 编程练习
1-8 编程练习根据gif图,实现以下效果:单击页面的“点击”按钮时,弹出输入框当点击输入框上的“确定“时,按钮上的文字变成输入框输入的内容。任务根据gif效果图完成下列步骤:第一步:先获取到按钮对象第二步:给按钮绑定事件,以下代码在事件的匿名函数中执行第三步:用变量接收输入框中输入的内容Tips:输入框的提示文字要进行换行第四步:当点击输入框上的“确定...原创 2019-05-14 22:04:20 · 285 阅读 · 3 评论 -
DOM1-9 编程练习
1-9 编程练习根据gif图,补充代码,实现以下效果:点击页面上的“删除”按钮,弹出确认框(1)当点击确认框上的“确定“时,按钮上的字变为红色;(2)当点击确认框上的“取消“时,按钮上的字变为绿色。gif图如下:任务根据gif效果图完成下列步骤:第一步:获取到按钮对象,给其绑定鼠标单击事件,以下步骤均在事件的匿名函数中进行第二步:写出确认框,确认框的显示内容...原创 2019-05-14 22:05:53 · 381 阅读 · 0 评论 -
BOM基础1-15 编程练习
1-15 编程练习小伙伴们,学习了window对象窗口的打开和关闭,那么根据效果图,补充代码!实现:当点击页面上的按钮时,弹出确认框(1)当点击按钮上的确定时,打开设置了新特征的子窗口,新窗口的特征参考任务栏中的描述(2) 当点击按钮上的取消时,关闭当前页面Tips:因为涉及到两个窗口,请在本地浏览器运行并查看效果!任务第一步:获取到按钮元素,并未按...原创 2019-05-15 20:46:49 · 373 阅读 · 0 评论 -
BOM基础1-21 编程练习
1-21 编程练习根据gif效果图补充代码,实现以下要求:(1) 点击“删除”按钮3秒后,页面上div里面的文字消失(2) 点击“删除”按钮之后的3秒内,如果点击“取消删除”按钮,那么页面上div里面的文字就不会被删除第一步:获取到页面上的两个按钮对象以及div对象第二步:声明一个变量,用来接收下面即将定义的定时器第三步:给“删除”按钮绑定事件,点击“删除”按钮...原创 2019-05-15 20:48:45 · 415 阅读 · 2 评论 -
BOM基础1-25 编程练习
1-25 编程练习补充代码,让页面内容实现“动画效果”,要求如下:“☆☆☆今日特卖☆☆☆ ”和“★★★今日特卖★★★”这两个文本每0.5秒互相切换一次,具体效果参考gif效果图第一步:先获取放置文本的div文本框对象,用变量进行接收第二步:自定义一个变量,用来接收记录闪烁的值,初始值是0第三步:设置定时器,每500毫秒执行一下定时器里面的脚本第四步:定时器的脚本如下:...原创 2019-05-15 20:51:57 · 753 阅读 · 0 评论 -
BOM1-26 编程练习
1-26 编程练习根据gif效果图,补充代码,实现:当点击“开始”按钮时,div里面每隔一秒就有一个“hello”,”hello”依次累加,每个“hello”之间有一个空格分开根据gif效果图完成下列步骤:第一步:自定义变量,用来接收定时器,按钮对象以及div对象第二步:给“开始“按钮绑定鼠标单击事件,当点击”开始“按钮时,设置定时器,每隔一秒便在div中输出一个“hell...原创 2019-05-15 20:54:31 · 525 阅读 · 0 评论 -
BOM5-4 编程练习
5-4 编程练习小伙们,我们学习过浏览器的navigator对象,那么写一段代码,实现,当用户点击页面上的“点击获取浏览器信息”按钮时,页面会弹出窗口告知当前使用的浏览器是什么浏览器?任务第一步:获取到按钮对象,并给按钮绑定鼠标单击事件第二步:写出封装判断浏览器代码的函数 用浏览器对象的属性先获取到浏览器的版本、名称等信息,并用变量进行接收 对获取到的信息中所包含的...原创 2019-05-15 20:59:11 · 424 阅读 · 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 · 549 阅读 · 0 评论 -
JavaScritp的DOM基础1-7 编程练习
1-7 编程练习小伙伴们,今天我们学习了dom的查找方法,按照下面效果图去补充代码!要求:依次弹出“前端书籍”的列表项,并在最后统计数它的列表项总共有几个。效果图如下:任务根据效果图完成以下步骤:第一步:先通过ID选取的方法获取到“前端书籍”Tips:因为有两个列表,所以先获取到指定的列表第二步:再通过标签名选取元素的方式获得列...原创 2019-05-11 13:06:21 · 439 阅读 · 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 · 375 阅读 · 0 评论 -
JavaScript中的DOM基础_1-29 编程练习
1-29 编程练习小伙伴们,我们学习了setAttribute()方法,那么接下来用setAttribute()方法来给代码中的列表内容添加样式吧添加的样式效果如下:任务第一步:通过标签名获取元素的方式先得到列表项Tips:得到的是一个对象集合,本题中需要获得集合中的第一个对象第二步:利用今天学习的为元素添加指定属性的方法给列表项的奇数项和偶数项分别添加样式Tips...原创 2019-05-12 09:09:33 · 352 阅读 · 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 · 350 阅读 · 0 评论 -
DOM基础2-17 编程练习
2-17 编程练习小伙伴们,今天我们学习了DOM 0级事件,那么根据gif图,实现以下功能:(1)当点击“录入”按钮时,循环弹出输入框,使用户输入信息(2)直到用户输入-1,停止弹出输入框,然后将用户输入的信息输出在页面上。Tips:使用通过DOM获取HTML元素的方式绑定事件任务根据gif效果图实现下面的任务步骤:第一步:先写出按钮的html代码Tips:按...原创 2019-05-12 11:21:34 · 338 阅读 · 0 评论 -
DOM基础2-16 编程练习
2-16 编程练习小伙伴们,今天我们学习了怎样给DOM对象绑定事件,那么根据gif图,实现以下功能:(1)如果按钮的值是“全选”, 当点击按钮时,按钮的值变为“反选”(2)如果按钮的值是“反选”, 当点击按钮时,按钮的值变为“全选”注意:使用通过DOM获取HTML元素的方式绑定事件gif图如下:任务根据gif效果图实现下面的任务步骤:第一步:先写出按钮的ht...原创 2019-05-12 11:24:09 · 436 阅读 · 0 评论 -
DOM基础3-4 编程练习
3-4 编程练习小伙伴们,今天我们学习了onload事件,接下来补充下面的代码,实现以下功能:(1) 当点击按钮时,按钮的字体颜色变成红色(2) 当鼠标离开按钮时,字体颜色变成灰色Tips:脚本写在<head>标签中任务第一步:写出:在页面或图像加载完后才执行的事件语句,该语句后面跟上匿名函数Tips:匿名函数中写入点击按钮执行的脚本,以下步...原创 2019-05-12 11:26:10 · 565 阅读 · 2 评论 -
DOM基础3-9 编程练习
3-9 编程练习小伙伴们,今天我们学习了onblur和onfocus这两个鼠标事件,根据gif图,补充代码,实现下列功能:(1) 当输入框获得焦点:如果输入框值为空,提示“请输入您的姓名”(2) 当输入框失去焦点:如果输入框值为空,提示“用户名不能为空”,并且边框颜色变为红色如果输入框值不为空,那么没有提示文字,边框颜色是默认颜色任务根据gif效果图完成...原创 2019-05-12 11:28:12 · 654 阅读 · 0 评论 -
DOM基础3-13 编程练习
3-13 编程练习小伙伴们,今天我们学习了onchange鼠标事件,根据gif图,补充代码,实现下列功能:(1) 选择下拉列表中不同的选项,页面中的div就设置成不同的背景颜色,div中的内容也发生变化。 比如:选择黄色选项,div的背景颜色就变为黄色,文本内容就变为“我的背景颜色变成了yellow色”(2)当选择下拉列表中的“请选择”时,div的背景颜色...原创 2019-05-12 11:31:36 · 567 阅读 · 0 评论 -
DOM基础3-19 编程练习
3-19 编程练习小伙伴们,今天我们学习了鼠标事件,根据gif图,补充代码,实现下列功能:(1) 当鼠标在带滚动条的文本框上滑动时,字体颜色变成红色(2) 当鼠标移出带滚动条的文本框时,字体颜色变成绿色(3) 当鼠标移动文本框的滚动条时,空白的文本框出现文本“内容滚动了”任务第一步:通过id选取元素的方式获得这两个文本框Tips:带滚动条的文本框和空白文...原创 2019-05-12 11:33:53 · 353 阅读 · 0 评论