javascript计算器的基础制作和js热点图的制作及徘徊事件的制作

月影WEB
137 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

javascript计算器的基础制作：

我们先看看JS代码和效果图：

代码如下：

图1

1.png

javascriptjs计算器的基础制作：

按F12预览效果图如下：

图2

2.png

下面我们来讲解下这个JS：

JS部分：

<script>
function yue()
{
    var x1=document.getElementById("yueying_1");
    var x2=document.getElementById("yueying_2");
    var x3=document.getElementById("yueying_3");
    x3.value=Number(x1.value)+Number(x2.value);//Number() 函数把对象的值转换为数字
}
</script>

代码部分：

<input type="text" id="yueying_1" /> +
<input type="text" id="yueying_2" /> =
<input type="text" id="yueying_3" />
<input type="button" onclick="yue()" value="计算"/>

javascript/js热点图的制作及徘徊事件的制作：

我们来看看这次热点制作和JS徘徊事件的制作过程：

如下图所示：

首先，我们先选择一张图片

图3

3.png

然后我们开始先制作热点：过程如下

我们先在代码界面里面加入

<h3 id="yueying">月影的网站(www.yydpt.com)<h3><br />

这个代码及其

<img src="12.25-1.png"  />

图片代码，然后选择软件的设计界面：

图4

4.png

接着我们来选择绘“制椭圆热点”，步骤如图：

图5

5.png

图6

6.png

做好热点之后，我们来看看代码界面的变化：

图7

7.png

做完热点了！我们再给热点加入一个JS的徘徊事件：如图

图8

8.png

页面效果图的变化如下图所示：

加了热点和JS徘徊事件还没有发生JS事件的预览图

图9

9.png

加了热点和JS徘徊事件之后发生JS事件的预览图

图10

10.png

在后面的文章中会继续的给大家讲解其它的javascript/JS相关的功能和效果！

希望大家多多给意见！

关注公众号（月影WEB），了解更多的前后端知识；

欢迎大家关注互相交流学习；

avatar
文章
阅读
粉丝