JavaScript编程练习与解决方案详解
立即解锁
发布时间: 2025-08-20 01:27:19 阅读量: 1 订阅数: 5 
JavaScript入门与实践指南
### JavaScript 编程练习与解决方案详解
#### 1. 数字小数位处理
在处理数字时，有时需要将数字固定到指定的小数位数。首先，使用 `Math.round(fixNumber * div) / div` 来创建固定位数的数字。接着，将这个结果作为参数传递给 `String()` 构造函数，创建一个新的字符串对象，并将其存储回 `fixNumber` 中。
然而，此时得到的数字可能不是所需的格式，例如可能是 `2.1` 而不是 `2.100`。为了添加所需的额外零，需要进行以下操作：
- 计算小数点后的实际位数：`(fixNumber.length - fixNumber.lastIndexOf(".") - 1)`。
- 计算需要添加的零的数量：`var zerosRequired = decimalPlaces - (fixNumber.length - fixNumber.lastIndexOf(".") - 1);`
- 添加零：
```javascript
for (; zerosRequired > 0; zerosRequired-- ) {
fixNumber = fixNumber + "0";
}
```
- 返回结果：`return fixNumber;`
#### 2. 显示页面链接的 `href`
- **问题**：创建一个包含多个链接的页面，并编写代码，在窗口加载事件触发时，显示页面上每个链接的 `href`。
- **解决方案**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chapter 6: Question 1</title>
<script type="text/javascript">
function displayLinks()
{
var linksCounter;
for (linksCounter = 0; linksCounter < document.links.length; linksCounter++)
{
alert(document.links[linksCounter].href);
}
}
</script>
</head>
<body onload="displayLinks()">
<a href="link0.htm" >Link 0</a>
<a href="link1.htm">Link 2</a>
<a href="link2.htm">Link 2</a>
</body>
</html>
```
- **操作步骤**：
1. 在 `<body>` 标签中添加 `onload` 属性，连接到 `displayLinks()` 函数。
2. 在 `displayLinks()` 函数中，使用 `for` 循环遍历 `document.links` 集合。
3. 使用 `alert` 框显示每个链接的 `href` 属性。
#### 3. 根据浏览器类型重定向页面
- **问题**：创建两个页面，`ieonly.htm` 和 `notieonly.htm`，并根据用户的浏览器类型进行重定向。
- **解决方案**：
```html
<!-- notieonly.htm -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chapter 6: Example Question 2</title>
<script type="text/javaScript">
function getBrowserName()
{
var lsBrowser = navigator.userAgent;
if (lsBrowser.indexOf("MSIE") >= 0)
{
lsBrowser = "MSIE";
}
else if (lsBrowser.indexOf("Firefox") >= 0)
{
lsBrowser = "Firefox";
}
else if (lsBrowser.indexOf("Chrome") >= 0)
{
lsBrowser = "Chrome";
}
else if (lsBrowser.indexOf("Safari") >= 0)
{
lsBrowser = "Safari";
}
else if (lsBrowser.indexOf("Opera") >= 0)
{
lsBrowser = "Opera";
}
else
{
lsBrowser = "UNKNOWN";
}
return lsBrowser;
}
function getBrowserVersion()
{
var findIndex;
var browserVersion = 0;
var browser = getBrowserName();
browserVersion = navigator.userAgent;
findIndex = browserVersion.indexOf(browser) + browser.length + 1;
browserVersion = parseFloat(browserVersion.substring(findIndex,
findIndex + 3));
return browserVersion;
}
function checkBrowser()
{
if (getBrowserName() == "MSIE")
{
window.location.replace("ieonly.htm");
}
}
</script>
</head>
<body onload="checkBrowser()">
<h2>Welcome to the Not-IE only page</h2>
</body>
</html>
<!-- ieonly.htm -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chapter 6: Example Question 2</title>
<script type="text/javaScript">
function getBrowserName()
{
var lsBrowser = navigator.userAgent;
if (lsBrowser.indexOf("MSIE") >= 0)
{
lsBrowser = "MSIE";
}
else if (lsBrowser.indexOf("Firefox") >= 0)
{
lsBrowser = "Firefox";
}
else if (lsBrowser.indexOf("Chrome") >= 0)
{
lsBrowser = "Chrome";
}
else if (lsBrowser.indexOf("Safari") >= 0)
{
lsBrowser = "Safari";
}
else if (lsBrowser.indexOf("Opera") >= 0)
{
lsBrowser = "Opera";
}
else
{
lsBrowser = "UNKNOWN";
}
return lsBrowser;
}
function getBrowserVersion()
{
var findIndex;
var browserVersion = 0;
var browser = getBrowserName();
browserVersion = navigator.userAgent;
findIndex = browserVersion.indexOf(browser) + browser.length + 1;
browserVersion = parseFloat(browserVersion.substring(findIndex,
findIndex + 3));
return browserVersion;
}
function checkBrowser()
{
if (getBrowserName() != "MSIE")
{
window.location.replace("notieonly.htm");
}
}
</script>
</head>
<body onload="checkBrowser()">
<h2>Welcome to the Internet Explorer only page</h2>
</body>
</html>
```
- **操作步骤**：
1. 在每个页面的 `<body>` 标签中添加 `onload` 属性，连接到 `checkBrowser()` 函数。
2. 在 `checkBrowser()` 函数中，使用 `getBrowserName()` 函数获取用户的浏览器类型。
3. 根据浏览器类型使用 `window.location.replace()` 方法进行重定向。
#### 4. 鼠标悬停切换图片
- **问题**：在页面中插入一个图片，当鼠标指针悬停在图片上时，切换到另一张图片；当鼠标指针移出时，切换回原来的图片。
- **解决方案**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chapter 6: Question 3</title>
<script type="text/javascript">
function mouseOver(that)
{
that.src = "Img2.jpg";
}
function mouseOut(that)
{
that.src = "Img1.jpg";
}
</script>
</head>
<body>
<img src="Img1.jpg" name="myImage" onmouseover="mouseOver(this)"
onmouseout="mouseOut(this)" />
</body>
</html>
```
- **操作步骤**：
1. 定义 `mouseOver()` 和 `mouseOut()` 函数，分别处理鼠标悬停和移出事件。
2. 在 `<img>` 标签中添加 `onmouseover` 和 `onmouseout` 属性，连接到相应的函数。
#### 5. 温度转换器用户界面
- **问题**：为温度转换器创建一个用户界面，让用户可以输入华氏温度并将其转换为摄氏温度。
- **解决方案**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chapter 7: Question 1</title>
<script type="text/javascript">
function convertToCentigrade(degFahren)
{
var degCent = 5 / 9 * (degFahren - 32);
return degCent;
}
function btnToCent_onclick()
{
var calcBox = document.form1.txtCalcBox;
if (isNaN(calcBox.value) == true || calcBox.value == "")
{
calcBox.value = "Error Invalid Value";
}
else
{
calcBox.value = convertToCentigrade(calcBox.value);
}
}
</script>
</head>
<body>
<form action="" name="form1">
<p>
<input type="text" name="txtCalcBox" value="0.0" />
</p>
<input type="button" value="Convert to centigrade"
name="btnToCent" onclick="btnToCent_onclick()" />
</form>
</body>
</html>
```
- **操作步骤**：
1. 创建一个包含文本框和按钮的表单。
2. 在按钮的 `onclick` 事件中调用 `btnToCent_onclick()` 函数。
3. 在 `btnToCent_onclick()` 函数中，检查用户输入的有效性，并进行温度转换。
#### 6. 计算机系统配置选择界面
- **问题**：创建一个用户界面，让用户可以选择计算机系统的组件，并实时更新系统价格。
- **解决方案**：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chapter 7: Question 1</title>
<script type="text/javascript">
var compItems = new Array();
compItems[100] = 1000;
compItems[101] = 1250;
compItems[102] = 1500;
compItems[200] = 35;
compItems[201] = 65;
compItems[202] = 95;
compItems[300] = 50;
compItems[301] = 75;
compItems[302] = 100;
compItems[400]
```
400次
会员资源下载次数
300万+
优质博客文章
1000万+
优质下载资源
1000万+
优质文库回答
0
0
复制全文
相关推荐
最低0.47元/天 解锁专栏
赠100次下载
百万级
高质量VIP文章无限畅学
千万级
优质资源任意下载
千万级
优质文库回答免费看
立即解锁
专栏目录
最新推荐
【调试与性能优化】：LMS滤波器在Verilog中的实现技巧
# 摘要
本文详细探讨了最小均方(LMS)滤波器的理论基础、硬件实现、调试技巧以及性能优化策略，并通过实际案例分析展示了其在信号处理中的应用。LMS滤波器作为一种自适应滤波器，在数字信号处理领域具有重要地位。通过理论章节，我们阐述了LMS算法的工作原理和数学模型，以及数字信号处理的基础知识。接着，文章介绍了LMS滤波器的Verilog实现，包括Verilog语言基础、模块
【机器人灵巧手自学习能力】：AI在抓取技术中的应用探索
# 摘要
机器人灵巧手的自学习能力是近年来机器人技术领域中一个快速发展的研究领域。本文首先概述了自学习能力的基本概念及其在机器人技术中的重要性。接着，深入探讨了自学习技术的理论基础，包括自学习机制的基本原理、算法选择以及系统的训练与评估方法。在第三章中，文章详
【Matlab优化算法实战】：精通Matlab实现复杂问题优化的技巧
# 摘要
本文全面概述了Matlab优化算法的理论基础、实践操作以及高级应用。首先，介绍了数学优化问题的分类和优化
Simulink专家指南：OFDM模型构建与调试的终极技巧
# 摘要
本文对Simulink环境下正交频分复用（OFDM）模型的构建、调试和应用进行了系统性阐述。首先介绍了Simulink基础与
构建可扩展医疗设备集成方案：飞利浦监护仪接口扩展性深入解析
# 摘要
本文探讨了医疗设备集成的重要性和面临的挑战，重点分析了飞利浦监护仪接口技术的基础以及可扩展集成方案的理论框架。通过研究监护仪接口的技术规格、数据管理和标准化兼容性，本文阐述了实
【C#跨平台开发与Focas1_2 SDK】：打造跨平台CNC应用的终极指南
# 摘要
本文全面介绍了C#跨平台开发的原理与实践，从基础知识到高级应用，详细阐述了C#语言核心概念、.NET Core与Mono平台的对比、跨平台工具和库的选择。通过详细解读Focas1_2 SDK的功能与集成方法，本文提供了构建跨平台CNC应用的深入指南，涵盖CNC通信协议的设计、跨平台用户界面的开发以及部署与性能优化策略。实践案例分析部分则通过迁移现有应用和开发新应用的实战经验，向读者展示了具体的技术应用场景。最后，本文对
STM8点阵屏汉字显示：用户界面设计与体验优化的终极指南
# 摘要
STM8点阵屏技术作为一种重要的显示解决方案，广泛应用于嵌入式系统和用户界面设计中。本文首先介绍STM8点阵屏的技术基础，然后深入探讨汉字显示的原理，并着重分析用户界面设计策略，包括布局技巧、字体选择、用户交互逻辑及动态效果实现等。接着，本文详细阐述了STM8点阵屏的编程实践，涵盖开
【游戏物理引擎基础】：迷宫游戏中的物理效果实现
# 摘要
本文详细探讨了基于wxWidgets的跨平台多媒体开发，涵盖了多媒体处理的基础理论知识、在wxWidgets中的实践应用，以及相关应用的优化与调试方法。首先介绍多媒体数据类型与
【BT-audio音频抓取工具比较】：主流工具功能对比与选择指南
# 摘要
本文旨在全面介绍BT-audio音频抓取工具，从理论基础、功能对比、实践应用到安全性与隐私保护等多个维度进行了深入探讨。通过分析音频信号的原理与格式、抓取工具的工作机制以及相关法律和伦理问题，本文详细阐述了不同音频抓取工具的技术特点和抓取效率。实践应用章节进一步讲解了音频抓取在不同场景中的应用方法和技巧，并提供了故障排除的指导。在讨论工具安全性与隐私保护时，强调了用户数据安全的重要性和提高工具安全性的策略。最后，本文对音频抓取工具的未来发展和市场需求进行了展望，并提出了选择合适工具的建议。整体而言，本文为音频抓取工具的用户提供了一个全面的参考资料和指导手册。
# 关键字
音频抓取；
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
