JavaScript实现动态元素周期表教程及代码示例

134 浏览量更新于2024-09-03 收藏 54KB PDF 举报

"本文将详细介绍如何使用JavaScript实现一个交互式的元素周期表，无需依赖图片，仅通过纯HTML和JavaScript代码构建。这个版本的周期表支持动态生成，并且当用户点击元素时，会显示该元素的相关属性，如名称、原子序数、原子量、电子层结构、填充轨道以及熔点和沸点等。实现的核心是JavaScript函数，包括`prepare()`用于设置初始状态，`moveover()`用于改变状态栏文本，以及`fillitin()`函数用于填充表单字段。以下是关键步骤和代码片段： 1. 首先，HTML结构中包含一个简单的表格`<table>`，以及用于输入元素属性的表单元素，如`<input>`标签。 2. 在CSS部分，定义了一些基本样式，如链接的颜色和悬停效果。 3. `<head>`部分包含了JavaScript代码，其中定义了三个函数：`prepare()`用于设置页面加载时的状态，`moveover()`用于更新状态栏文本，而`fillitin()`函数接收元素属性参数并填充到相应的输入框中。 4. 当页面加载或元素被点击时，`window.onload`或`onclick`事件会调用`prepare()`函数，然后在指定的时间间隔后，`window.status`属性会被设置为提示信息。 5. 当鼠标悬停在元素上时，`moveover()`函数被调用，显示更详细的信息。 6. `fillitin()`函数接收六个参数，分别对应元素的名称、原子序数、原子量、电子层描述、填充轨道和熔沸点。这些属性被动态写入到HTML表单的相应字段。 7. 最后，展示了运行后的效果，即元素周期表的外观以及交互性。通过这个实例，开发者可以学习如何使用JavaScript进行动态内容展示和交互式用户体验设计，同时也可以了解如何在Web页面中构建科学教育类的应用，如化学元素的介绍工具。如果你需要在项目中添加类似功能，可以根据本文提供的代码框架进行调整和扩展。"

JS版元素周期表实现方法版元素周期表实现方法

主要介绍了JS版元素周期表实现方法,可实现基于javascript动态生成元素周期表的功能,点击元素项可以在下方显示对应元素

的各种常用属性,需要的朋友可以参考下

本文实例讲述了JS版元素周期表实现方法。分享给大家供大家参考。具体如下：

这里的元素周期表基于JavaScript实现，未使用任何的图片，直接浏览本HTML网页即可看到效果，可以作为教学使用。

运行效果如下图所示：

具体代码如下：

<html>

<head>

<!--

A{color:000000;font-size:9pt; TEXT-DECORATION: none}

A:hover{color: 00dd00}

-->

</style>

<title>元素周期表</title>

<!--hide this script from crappy old browsers

function prepare()

{

window.setTimeout("window.status='这是例子'",500);

}

function moveover(txt)

{

window.status = txt;

}

function fillitin(Name, AtomicNumber,AtomicWeight, Shells, FillingOrbital, MeltingPoint, BoilingPoint)

{

moveover(Name); //写入状态栏说明

document.PeriodicTable.Name.value=Name; //写入元素名

document.PeriodicTable.AtomicNumber.value=AtomicNumber; //写入元素序号

document.PeriodicTable.AtomicWeight.value=AtomicWeight; //写入原子量

document.PeriodicTable.Shells.value=Shells; //写入电子层描述

document.PeriodicTable.FillingOrbital.value=FillingOrbital; //写入轨道

document.PeriodicTable.MeltingPoint.value=MeltingPoint; //写入熔点

document.PeriodicTable.BoilingPoint.value=BoilingPoint; //写入沸点

window.setTimeout("prepare()",3500); //延时3.5秒后恢复状态栏显示

}

</script>

</head>

<tr>

<tr>

<tr>

<td width="522" height="7" colspan="18">元素周期表</td>

</tr>

<tr>

<ahref="javascript: fillitin('Helium','2','4.0026','2','1s2','-272C @ 26ATM','-268.6 C');">He</a></td>

</tr>

<tr>

<td width="29" height="16" align="center"><a

href="javascript: fillitin('Lithium','3','6.94','2,1','2s1','180.54 C','1347 C');">Li</a></td>

<td width="29" height="16" align="center"><a

href="javascript: fillitin('Beryllium','4','9.01218','2,2','2s2','1278 C','2970 C');">Be</a></td>

<td width="30" height="16" align="center"><a

href="javascript: fillitin('Boron','5','10.81','2,3','2p1','2300 C','2550 C');">B</a></td>

<td width="30" height="16" align="center"><a

href="javascript: fillitin('Carbon','6','12.011','2,4','2p2','3500 C','4827 C');">C</a></td>

<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a

href="javascript: fillitin('Nitrogen','7','14.0067','2,5','2p3','-209.9 C','-195.8 C');">N</a></td>

<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a

href="javascript: fillitin('Oxygen','8','15.9994','2,6','2p4','-218.4 C','-183.0 C');">O</a></td>

<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a

href="javascript: fillitin('Flourine','9','18.998403','2,7','2p5','-219.62 C','-188.14 C');">F</a></td>

<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a

href="javascript: fillitin('Neon','10','20.17','2,8',' 2p6','-248.6 C','-246.1 C');">Ne</a></td>

</tr>

<tr>

<td width="29" height="16" align="center"><a

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38500572

粉丝: 6
资源: 926

JavaScript实现动态元素周期表教程及代码示例

动态元素周期表 js 高级特效

3D元素周期表

化学元素周期表工具(Chemistry Tools) v1.02 绿色版.rar

html化学元素周期表

datepicker生命周期函数

html5+css3+javascript

litegraph+vue实现拓扑图demo

html制作抖音罗盘时钟

vxe-table如何动态设置表体vxe-table--body-wrapper的高度

最新资源