前端 js 基础（1）

阿金要当大魔王~~2024-01-02 9:19

js 结果输出 （点击按钮修改文字 ）

复制代码 
<!DOCTYPE html>
<html>
<head>

</head>

<body>

<h2>Head 中的 JavaScript</h2>

<p id="demo">一个段落。</p>

<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
//修改 id（demo） 的数据
    document.getElementById("demo").innerHTML = "你好小周。";
}
</script>
</body>
</html>

JavaScript 能够以不同方式"显示"数据：

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

js 结果计算

方法一

复制代码 
<!DOCTYPE html>
<html>
<body>

<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>

<p id="demo"></p>

<script>
//alert  弹框输出
window.alert(5 + 6);
//js id 输出
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

方法二

复制代码 
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
//设置变量 但是没有值  下边可以更改遍历值
var x, y, z;  // 语句 1
x = 22;        // 语句 2
y = 11;        // 语句 3
z = x + y;    // 语句 4

document.getElementById("demo").innerHTML =
"结果 的值是" + z + "---"+y +"。";  

</script>

</body>
</html>

js 运算符

js 变量 （ 点击按钮出变量）

复制代码 
<!DOCTYPE html>
<html>
<body>


<button type="button" onclick="myFunction()">点击我！</button>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
function myFunction() {
    document.getElementById("demo1").innerHTML = "Hello Kitty.";
    document.getElementById("demo2").innerHTML = "How are you?";
}
</script>

</body>
</html>

js 修改值的属性 内容

复制代码 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>声明常量对象不会使对象属性不可更改：</p>

<p id="demo"></p>

<script>
// 创建对象：
const car = {type:"Porsche", model:"911", color:"white"};

// 更改属性：
car.color = "red";

// 添加属性：
car.owner = "Steve";

// 显示属性：
document.getElementById("demo").innerHTML = "车主是：" + car.owner; 
</script>

</body>
</html>

js 函数运算

复制代码 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 函数</h2>

<p id="demo1"></p>

<p id="demo2"></p>

<script>
myFunction();

function myFunction() {
    var carName = "Volvo";
    document.getElementById("demo1").innerHTML =
    typeof carName + " " + carName;
}

document.getElementById("demo2").innerHTML =
typeof carName;
</script>

</body>
</html>

js 对象

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 对象创建</h1>

<p id="demo"></p>

<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>

</body>
</html>

js 事件

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 事件</h1>

<p>点击按钮来显示日期。</p>

<button onclick="displayDate()">时间是？</button>

<script>
function displayDate() {
//获取当前时间
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

js 字符串方法

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>lastIndexOf() 返回指定文本最后出现的位置：</p>

<p id="demo"></p>

<script>
var str = "你好=China.";
var pos = str.lastIndexOf("China");
// 这个 pos 获取的是 china的位置  你好  =  china  是三个字符 
// 所以  china 是三
document.getElementById("demo").innerHTML = pos;
</script>

</body>
</html>

js 字符串 （用于搜索字符串的 JavaScript 方法：）

两种方法，indexOf() 与 search()，是相等的。

这两种方法是不相等的。区别在于：

  • search() 方法无法设置第二个开始位置参数。
  • indexOf() 方法无法设置更强大的搜索值（正则表达式）。

用于搜索字符串的 JavaScript 方法：

  • String.indexOf()
  • String.lastIndexOf()
  • String.startsWith()
  • String.endsWith()
复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 字符串方法</h1>

<p>slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>

<p id="demo"></p>

<script>
var str = "Apple, Banana, Mango";
//取得是  7 和 13中间的数字
var res = str.slice(7,13);
document.getElementById("demo").innerHTML = res; 
</script>

</body>
</html>

js 字符串搜索

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String 方法</h1>

<p>如果未找到文本，indexOf() 和 lastIndexOf() 都返回 -1：</p>

<p id="demo"></p>
<p id="demo1"></p>

<script>
let str = "Please locate where 'locate' occurs!";
//上边字符串 没有所以报错 -1
document.getElementById("demo").innerHTML = str.indexOf("Bill");

// 上边有  并且从前往后找 索引位置0 
document.getElementById("demo1").innerHTML = str.indexOf("Please");
</script>

</body>
</html>

js 数学方法

复制代码 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number 方法</h2>

<p>toFixed() 返回字符串，其中的数字带有指定位数的小数部分。</p>

<p>toFixed(2) 非常适合处理货币。</p>

<p id="demo"></p>

<script>
let x = 9.656;
document.getElementById("demo").innerHTML =
//toFixed()  括号里是几就是保留几位小数
  x.toFixed(0) + "<br>" +
  x.toFixed(2) + "<br>" +
  x.toFixed(4) + "<br>" +
  x.toFixed(6);
</script>

</body>
</html>

js 数字属性 最大值 最小值

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数字</h1>

<h2>MAX_VALUE 属性</h2>

<p>JavaScript 中最大可能的数字是：</p>

<p id="demo"></p>
<p>----------------------------</p>

<p>JavaScript 中可能的最小数字是：</p>

<p id="demo1"></p>
<script>
let x = Number.MAX_VALUE;
document.getElementById("demo").innerHTML = x;

//<p>----------------------------</p>
let x1 = Number.MIN_VALUE;
document.getElementById("demo1").innerHTML = x1;
</script>

</body>
</html>

js 数组

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组</h1>

<p id="demo"></p>
<p id="demo1"></p>

<script>
var cars = new Array("Audi", "BMW", "porsche");
document.getElementById("demo").innerHTML = cars;
//【0】  是索引位置
document.getElementById("demo1").innerHTML = cars[0];
</script>

</body>
</html>

js 数组方法

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组方法</h1> 

<h2>join()</h2>

<p>join() 方法将数组元素连接成一个字符串。</p>

<p>在这个例子中我们使用"*"作为元素之间的分隔符：</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
//join 后 就是间隔*
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

js 数组顺序

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 数组排序</h1>

<p>请反复点击按钮，对数组进行随机排序。</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
//math.random  随机顺序排序数组
  points.sort(function(a, b){return 0.5 - Math.random()});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

js 数组迭代

forEach() 方法为每个数组元素调用一次函数（回调函数）。

filter() 方法创建一个包含通过测试的数组元素的新数组。

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

js 日期获取方法

复制代码 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript getDate()</h2>

<p>getDate() 方法以数字（1-31）返回日期的日：</p>

<p id="demo"></p>

<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDate();
</script>

</body>
</html>

js 日期设置方法

复制代码 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript setMonth()</h2>

<p>setMonth() 方法设置日期对象的月份。</p>

<p>请注意，月份从 0 计数。十二月是 11：</p>

<p id="demo"></p>

<script>
var d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

js 数学

复制代码 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript setMonth()</h2>

<p>setMonth() 方法设置日期对象的月份。</p>

<p>请注意，月份从 0 计数。十二月是 11：</p>

<p id="demo"></p>

<script>
var d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

js 随机数字

复制代码 
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.random()</h2>

<p>每当您点击按钮，getRndInteger(min, max) 就会返回 0 与 9（均包含）之间的随机数：</p>

<button onclick="document.getElementById('demo').innerHTML = getRndInteger(0,10)">点击我</button>

<p id="demo"></p>

<script>
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
</script>

</body>
</html>

js 条件语句判断

复制代码 
<!DOCTYPE html>
<html>
<body>

<p>单击按钮以显示基于时间的问候语：</p>

<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
function myFunction() {
  var hour = new Date().getHours(); 
  var greeting;
  //可以控制  数字  判断事件 
  if (hour < 13) {
    greeting = "日安";
  } else {
    greeting = "晚安";
  }
  document.getElementById("demo").innerHTML = greeting;
}
</script>

</body>
</html>

js Switch 语句

复制代码 
<!DOCTYPE html>
<html>
<body>
​
<p id="demo"></p>
​
<script>
var day;
switch (new Date().getDay()) {
  case 0:
    day = "周日";
    break;
  case 1:
    day = "周一";
    break;
  case 2:
    day = "周二";
    break;
  case 3:
    day = "周三";
    break;
  case 4:
    day = "周四";
    break;
  case 5:
    day = "周五";
    break;
  case  6:
    day = "周六";
}
document.getElementById("demo").innerHTML = "今天是" + day;
</script>
​
</body>
</html>

js For 循环

复制代码 
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 循环</h1>

<p id="demo"></p>

<script>
var cars = ["BMW", "Volvo", "porsche", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
// 循环的结果 存在  text   cars[i]  是循环当前的值
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>
相关推荐
崔庆才丨静觅1 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅3 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment3 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南