使用javascript制作一个网站并显示代码
时间: 2024-01-31 16:04:40 浏览: 34
以下是一个简单的使用JavaScript制作的网站,包含了上述提到的基本要求,你可以将其保存为一个HTML文件并在浏览器中打开查看效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript网站示例</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
text-align: center;
margin-top: 50px;
color: #333;
}
#output {
margin: 50px auto;
width: 500px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<h1>JavaScript网站示例</h1>
<div id="output"></div>
<script>
// JavaScript基本语法的使用
var name = "John";
var age = 25;
var isMale = true;
var hobbies = ["reading", "music", "sports"];
// 数组的基本使用
hobbies.push("travel");
console.log(hobbies);
// 对象的基本使用
var person = {
name: "John",
age: 25,
isMale: true,
hobbies: ["reading", "music", "sports"]
};
console.log(person.name);
// DOM的基本使用
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = "<h2>Hello, " + name + "!</h2>";
// BOM的基本使用
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
console.log(screenWidth + "x" + screenHeight);
// 正则表达式的基本使用
var email = "john@example.com";
var pattern = /[a-z]+@[a-z]+\.[a-z]+/;
console.log(pattern.test(email));
</script>
</body>
</html>
```
这个网站包含一个标题、一个空的div元素和一些JavaScript代码。JavaScript代码中包含了创建变量、数组、对象、DOM元素,以及使用BOM和正则表达式等操作。在网页加载时,JavaScript代码会自动执行并输出一些信息到div元素中。你可以尝试修改JavaScript代码,看看输出会有什么变化。