`
李佳豪king
  • 浏览: 7475 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

js的三大作用

    博客分类:
  • web
 
阅读更多

 

 javascript可以用来做的三件最基础的事

1.改变html中的内容

2.改变html中的样式

3.对输入检测

下面是案例

 

 

<!DOCTYPE html>
<html>
<body>
***************************************************************************************************
<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>
***************************************************************************************************
<br>
<h1>What Can JavaScript Do?</h1>

<p id="demo1">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<br>
***************************************************************************************************
<h1>JavaScript Can Validate Input</h1>

<p>Please input a number between 1 and 10:</p>

<input id="numb" type="number">

<button type="button" onclick="validate()">Submit</button>

<p id="demo2"></p>
<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
function myFunction() {
    var x = document.getElementById("demo1");
    x.style.fontSize = "25px";           
    x.style.color = "red"; 
}
function validate() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo2").innerHTML = text;
}
</script>

</body>
</html>

 

分享到:
评论

相关推荐

    React的三个js文件

    下面我们将详细探讨这三个JavaScript文件以及它们在React开发中的作用。 1. **Babel.min.js** Babel是一个广泛使用的JavaScript编译器,它的主要功能是将ES6+(ECMAScript 2015及以后版本)的语法转换为ES5,以便...

    js变量作用域

    ### JavaScript 变量作用域详解 #### 一、引言 在探讨JavaScript的面向对象特性之前,理解变量作用域的概念至关重要。本篇文章旨在通过一系列示例和解释,帮助读者掌握JavaScript中的变量作用域机制。 #### 二、...

    javascript执行环境,作用域理解

    JavaScript 执行环境和作用域的深层次理解 在 JavaScript 中,执行环境和作用域是两个非常重要和基本的概念,理解了这两个概念对于 JavaScript 中很多脚本的运行结果就能明白其中的道理了。执行环境是一个概念,一...

    js脚本大集合(JavaScript)

    2. **JavaScript的三大领域**: - **前端开发**:用于控制浏览器行为,如表单验证、动态内容加载、页面交互等。 - **后端开发**:通过Node.js环境,JS也可用于服务器端编程,提供异步I/O,实现快速响应的Web服务。...

    js实现三级联动展现

    在网页开发中,"三级联动"是...总的来说,"js实现三级联动展现"是一个综合运用JavaScript动态操作DOM、XML数据解析以及AJAX异步通信的实际案例。这种技术在现代网页开发中广泛应用,对于提升用户交互体验有着重要作用。

    强大的js三级地区联动含港澳台地区

    首先,让我们了解一下JS(JavaScript)三级联动的基本原理。在JavaScript中,我们可以利用DOM(Document Object Model)操作,监听用户在下拉菜单中的选择,根据不同的选择动态更新下一级别的下拉菜单内容。在这个...

    React所需的三个js文件3--babel.min.js.zip

    在React的应用开发中,有三个关键的JavaScript文件通常会被用到:`react.js`、`react-dom.js`和`babel.min.js`。在这个场景中,我们只提到了`babel.min.js`,它是React开发中的一个重要组成部分。 `babel.min.js`是...

    世界主要国家地区的JS三级联动(包括国内的省市区三级联动)

    JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在前端开发中起着核心作用。在本文中,我们将深入探讨如何实现一个包括世界主要国家和地区在内的三级联动效果,以及在国内省市区的三级联动功能。...

    【JavaScript源代码】js+css实现三级导航菜单.docx

    【JavaScript 源代码】js+css实现三级导航菜单 在网页设计中,导航菜单是不可或缺的部分,尤其在复杂的网站结构中,三级导航菜单能够帮助用户更方便地浏览和访问内容。本文主要介绍如何利用 JavaScript 和 CSS 合作...

    商品发布三级联动菜单js代码.zip

    二、JS在三级联动菜单中的作用 JavaScript是构建网页动态效果的关键语言,它可以操控HTML元素,响应用户操作,实现数据的动态加载和页面状态的实时更新。在三级联动菜单中,JS主要负责以下几方面的工作: 1. **事件...

    全国各省市js三级联动.zip

    全国各省市js三级联动是一个基于JavaScript(JS)实现的交互式菜单导航系统,主要用于网站的地区选择功能。在网页设计中,这样的三级联动菜单能够帮助用户快速定位到他们所在的省份、城市甚至区县,提高用户体验。它...

    基于Vue与JavaScript的数据大屏可视化编辑器设计与实现

    综上所述,基于Vue.js和JavaScript的数据大屏可视化编辑器设计与实现是一个综合性的项目,涉及前端框架的应用、数据处理、组件化编程、以及与第三方图表库的集成等多个方面。通过这样的实践,开发者可以提升自己的...

    asp+js 三级联动选择菜单

    在本例中,“asp+js 三级联动选择菜单”是一个结合了这两种技术的实现,用于创建一个能够动态响应用户选择的三级下拉菜单。 1. **ASP原理**: ASP允许开发者在服务器端编写脚本,这些脚本可以处理数据、与数据库...

    JS省市级三级联动[超简单]

    在网页开发中,"JS省市级三级联动"是一种常见的交互设计,主要用于地址选择或分类筛选等场景。...对于初学者来说,这是一个很好的实践项目,可以帮助他们更好地理解JavaScript在实际应用中的作用。

    js全国三级联动

    这个功能利用JavaScript(简称js)来实现省、市、区三级数据的联动,即用户在选择一级区域(如省份)时,二级区域(如城市)会根据所选的一级区域自动更新,同理,选择二级区域后,三级区域(如区县)也会相应地变化...

    js + css 纵向三级菜单

    "js + css 纵向三级菜单"是一个常见的实现方式,它结合了JavaScript和CSS两种技术来创建一个能够展示多层次信息的导航系统。这样的菜单通常以垂直布局展现,方便用户通过点击逐级深入探索网站的内容。 首先,我们来...

    js下将金额数字每三位一逗号分隔

    在实际应用中,可能还会遇到更多的需求,比如如何处理不同地区的数字格式(例如,有些国家使用小数点作为千分位分隔符),如何在输入时即时格式化,以及如何处理大数字(超过JavaScript安全数字范围的情况)。...

    HTML+CSS+JS数据可视化大屏平台模板实例27-智慧机房监测通用模板

    总结来说,"HTML+CSS+JS数据可视化大屏平台模板实例27-智慧机房监测通用模板"涵盖了前端开发的三大核心技术,通过它们的综合运用,实现了对智慧机房环境的实时、高效监控,提供了直观的数据展示和交互体验。...

    js中toString方法3个作用.docx

    在 js 中,toString 方法有三个主要作用:返回一个表示对象的字符串、检测对象的类型和返回该数字对应进制的字符串。 返回一个表示对象的字符串 toString 方法的第一个作用是将对象转换为字符串形式。例如,我们...

Global site tag (gtag.js) - Google Analytics