<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>温度计</title>
<script>
var height=0;//温度计高度
var topvalue=0;//层离上边的高度
var zhi=0;//温度值 温度计高度/100
var currwenduzhi=0;//当前的温度值
var changezhi=0;//要改变的温度值
function textchange()
{
var textvalue=num.value;
if(isNaN(textvalue)||textvalue.length==0)
{
alert('请填写数字');
}else
{
if(textvalue>100){alert('温度值太大');return;}
var v=document.getElementById('test');
if(height==0)
{
height=parseInt(v.style.height.replace('px',''));//得到层的高度
zhi=height/100;//把高度分成100份
}
if(topvalue==0)
{
topvalue=parseInt(v.style.top.replace('px',''));//得到层离上边的距离
}
currwenduzhi=parseInt(v.style.height.replace('px',''))/zhi;//得到当前的温度值
changezhi=parseInt(textvalue);//改变的温度值
setInterval(changes,500);//实现渐动的效果
}
}
function changes()
{
if(currwenduzhi==changezhi)
{
clearInterval(changes);
}
if(currwenduzhi>changezhi)
{
currwenduzhi=currwenduzhi-1;
}else
{
currwenduzhi=currwenduzhi+1;
}
var v=document.getElementById('test');
var value0=zhi*currwenduzhi;
v.style.height=value0+'px';
v.style.top=topvalue+(height-value0)+'px';
}
</script>
</head>
<body>
<div id="test" style="border:1px;background:red;width:4px;height:208px;position:absolute;left:17px;top:26px"></div>
<img id="wen" src="温度计.JPG"/>
填写温度值：<input name="num" type='text' widht='20' >
<button onclick='textchange()'>改变</button>
</body>
</html>
分享到：
相关推荐
以下将详细讲解如何利用JavaScript实现温度计的功能。 1. **HTML布局**： 在网页中，我们需要一个容器来放置温度计的图像，以及一个输入框让用户输入温度值。HTML代码可能如下： ```html ``` 其中，`#...
在JavaScript和HTML中，我们可以利用div元素来模拟创建一个动态变化的温度计和湿度计。这个过程涉及到多个知识点，包括DOM操作、CSS样式控制、事件监听以及数据的实时更新。 首先，我们需要理解JavaScript（JS）的...
【温度计JS特效】是一种利用JavaScript编程语言实现的视觉效果，它可以模拟真实世界中的温度计显示，通常用于网站或应用程序中展示温度数据。这个特效不仅美观，还具有动态交互性，用户可以直观地看到温度的变化，...
在温度计应用中，JavaScript起着关键作用，它负责处理数据的动态更新、用户交互响应以及动画效果的实现。我们可以使用JavaScript的事件监听器来捕捉用户的操作，如点击按钮切换摄氏度和华氏度，或者实时获取和更新...
下面将详细讲解如何利用JavaScript实现这样的功能。 首先，我们需要理解温度计的基本元素：刻度、指针和温度读数。温度计可以是模拟的或数字的，但在这里我们主要讨论模拟温度计。一个基本的模拟温度计由一个圆盘...
【jQuery CSS3圆形温度计代码】是一个利用JavaScript库jQuery和CSS3技术实现的动态效果，它可以根据输入的数据自动生成相应的刻度，并在界面上显示特定的温度值。这个功能在许多应用中都非常实用，比如在监控环境...
在本文中，我们将深入探讨如何使用JavaScript（js）和CSS3技术来创建一个具有交互动画效果的温度计设置功能。这个项目的核心在于利用这两门技术的强大力量，为用户带来直观且有趣的温度调节体验。 首先，让我们从...
在这个“html5 canvas容器温度计特效”中，我们将深入探讨如何利用Canvas API来实现一个交互式的温度计组件。 首先，Canvas API是HTML5引入的一种新的绘图方式，通过JavaScript代码在画布上绘制2D图像。这个API提供...
接着，`js` 文件夹很可能包含了实现温度计动画和交互逻辑的JavaScript代码。JavaScript是一种客户端脚本语言，常用于网页的动态效果和用户交互。在这个项目中，JavaScript可能会监控用户的输入（例如点击或滑动事件...
利用Jquery，我们可以轻松地创建复杂的动态效果，包括温度计控件的动态显示。 要构建一个动态显示指标的温度计控件，我们首先需要创建HTML结构，这通常包括一个容器元素，用于放置温度计的图像或SVG图形。然后，...
本教程将详细讲解如何利用jQuery创建一个动态显示温度计数量的动画效果。这个项目可能应用于气象应用或者环境监控系统，为用户提供直观的温度变化展示。 首先，我们需要理解jQuery的基本用法。jQuery的核心理念是...
总结来说，“温度计js特效”是一个利用JavaScript和CSS实现的互动式温度显示工具，它通过动态更新和动画效果为用户提供直观的温度读取体验。开发者可以通过调整配置和样式来适应不同的项目需求，同时享受JavaScript...
4. **JavaScript/jQuery代码**：在`js`目录下的脚本文件中，包含了实现动态温度计功能的核心逻辑。这部分代码可能包括获取和设置温度值、触发动画效果以及与用户交互的事件处理函数。 5. **外部资源引用**：`...
通过以上步骤，我们可以在JSP页面上实现一个动态的温度计效果，实时展示后台数据。这个过程结合了HTML、CSS、SVG、JavaScript以及与后台的数据交互，展示了Web开发中的多种技术协同工作的能力。在实际项目中，还需要...
"Web前端Vue+Threejs 3D实时温度气流仿真效果"是这样的一个项目，它结合了Vue.js框架和Three.js库，实现了3D场景中的动态温度气流模拟。这种技术常用于模拟空调设备的运行效果，为用户提供直观、互动的视觉体验。 ...
在探讨如何用JavaScript实现一个类似温度计的时间显示样式的过程中，首先需要了解的是，所谓的温度计样式通常是指一种利用视觉元素的长度或颜色深浅来表示数值大小的图形化展示方式。在时间显示的语境下，这种样式会...
"CSS+JS温度计的特效页面设计"就是一个很好的例子，它利用jQuery、HTML和CSS这三种核心技术，来构建一个动态、视觉上吸引人的温度计效果。在这个项目中，我们将探讨如何通过结合这些技术来创建这样的特效页面。 ...
在本项目中，我们主要探讨的是如何利用C#和ASP.NET技术来实现一个"thermometer"（温度计）图表控件。这个控件通常用于显示数据或进度，其形状和设计模仿了物理温度计，使得用户能够直观地理解当前状态。在Web应用中...
在这个温度计特效中，开发者可能利用`<canvas>`元素来绘制温度计的刻度和指针，并通过JavaScript控制其动态变化。 CSS3则是HTML5的补充，提供了丰富的样式和动画功能。在这个案例中，CSS3可能被用来定义温度计的...
在这个“HTML5 Canvas温度计样式特效”中，我们主要关注的是如何利用Canvas API来创建一个动态的、视觉吸引人的温度计效果。 首先，Canvas API是HTML5引入的一个特性，它提供了一个二维绘图上下文，可以用来绘制...