整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用网页上的数字进行计算并回写的js案例整理

使用网页上的数字进行计算并回写的js案例整理

事有一个需求是,先读取网页中的数字,然后进行计算后再写到网页上。解决的方法是,得先用正确的id来标识这两个数字的元素。比如:<span id="sales">500</span> ,就是把500进行标识起来了。

然后把数字读出来。在JavaScript中,`document.getElementById`返回的是一个元素对象,而不是一个数字。这里需要获取元素的值才能进行计算。

计算后,结果会回写在 <span id="result"></span> 标识内。

如果计算回写之后,没有数字,请检查下js代码块是否放在最后。

<!DOCTYPE html>
<html>
<head>
  <title>计算结果</title>
</head>
<body>
  <span id="inventory">100</span>  <!-- 今年社会日均库存 -->
  <span id="sales">500</span>  <!-- 今年以来社会销量 -->
  <span id="result"></span>
  <script>
    // 获取页面上的元素
    var inventoryElement=document.getElementById("inventory");
    var salesElement=document.getElementById("sales");
    var resultElement=document.getElementById("result");
    // 获取元素的值
    var inventory=parseInt(inventoryElement.textContent);
    var sales=parseInt(salesElement.textContent);
    // 计算结果
    var result=inventory / sales;
    // 在页面上显示计算结果
    resultElement.textContent=result.toFixed(2); // 保留两位小数
  </script>
</body>
</html>

关注我,我们将一起探讨如何将技术与业务有机结合。不必成为专家,只要具备基本的印象和理解,便能把握业务与技术的融合,实现二者的平衡发展。在这个过程中,我们将共同寻找如何在促进二者融合发挥最大价值的同时,确保技术与业务的协调一致。

视觉格式化模型,大体上将页面中盒子的排列分为三种方式:

1. 常规流

2. 浮动

3. 定位

## 应用场景

1. 文字环绕

字体环绕

2. 横向排列

## 浮动的基本特点

修改float属性值为:

- left:左浮动,元素靠上靠左

- right:右浮动,元素靠上靠右

默认值为none

1. 当一个元素浮动后,元素必定为块盒(更改display属性为block)

2. 浮动元素的包含块,和常规流一样,为父元素的内容盒

## 盒子尺寸

1. 宽度为auto时,适应内容宽度

2. 高度为auto时,与常规流一致,适应内容的高度

3. margin为auto,为0.

4. 边框、内边距、百分比设置与常规流一样

## 盒子排列

1. 左浮动的盒子靠上靠左排列

2. 右浮动的盒子考上靠右排列

3. 浮动盒子在包含块中排列时,会避开常规流块盒

4. 常规流块盒在排列时,无视浮动盒子

5. 行盒在排列时,会避开浮动盒子

6. 外边距合并不会发生

> 如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒。

## 高度坍塌

高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子

清除浮动,涉及css属性:clear

- 默认值:none

- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方

- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方

- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方

语言作为一种广泛应用的编程语言,在计算机编程领域扮演着重要的角色。了解C语言中的运算规则对于编写高效、正确的程序至关重要。本文将深入探讨C语言中的运算规则,包括基本运算符、运算符优先级、类型转换等方面,帮助读者更好地理解C语言的运算机制。

以下是我整理的关于C语言的一些入门级资料,免费分享给大家:https://m.hqyjai.net/emb_study_blue_short.html?xt=zxy