三个简单的JavaScript案例|青训营

85 阅读1分钟

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript的语法总体类似Java,由于它的语法体系十分复杂,这里不做展开说明,以三个案例介绍其主要用法。

一、点亮灯泡

本例会动态地改变 HTML 的来源(src):

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="D:/img/light.png";
    }
    else
    {
        element.src="D:/img/light.png";
    }
}
</script>

<img decoding="async" id="myimage" onclick="changeImage()" src="D://img/light.png" width="100" height="180" alt="转存失败,建议直接上传图片文件">
转存失败,建议直接上传图片文件

以上实例中代码 element.src.match("bulbon")  的作用意思是:检索  <img decoding="async" id="myimage" onclick="changeImage()"src="D://img/light.png" width="100" height="180">  里面 src 属性的值有没有包含 bulbon 这个字符串如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif。

JavaScript 能够改变任意 HTML 元素的大多数属性,而不仅仅是图片。

二、视频体彩 11 选 5 的实现方案2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>体彩实现</title>
    </head>
    <body><img src="img/体彩.jpg" />
        <script>
            var arr = [];//建立一个空数组
            function add() {
                number = Math.floor(Math.random() * 11 + 1);//获取随机数
                for (x in arr)
                    if (arr[x] == number)
                        return;//发现重复数字返回 
                arr.push(number)//压入数组
            }
            do {
                add();
            } while (arr.length < 5)
             
            /*输出数组*/
            for (x in arr)
                if (arr[x] < 10)
                    arr[x] = '0' + arr[x];//格式化输出
            document.write("<h1 style='color: firebrick'>本期的幸运号码:", arr.join("  "), "</h1>");
        </script>
    </body>
</html>

三、动态增加表格的行和单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table id="info" align="center" width="300" border="1">
	       <caption>学生基本信息统计表</caption>
	      <tr><th>学号</th><th>姓名</th><th>年龄</th></tr>
	    </table>
	    <button onclick="add()">增加一行</button>
	    <script>
	    	function add(){
	    	  var tab=document.getElementById("info");
	    	  var r=tab.insertRow(1);
	    	  var c1=r.insertCell(0);
	    	  var c2=r.insertCell(1);
	    	  var c3=r.insertCell(2);
	    	  c1.innerHTML='364656';
	    	  c2.innerHTML='小曼';
	    	  c3.innerHTML='19';
	    	
	    	}
	    	
	    </script>
	</body>
</html>

JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

参考文献:javaScript简单项目案例_js项目_Knock man的博客-CSDN博客