用js写一个根据身份权限来区分展示页面的代码
时间: 2024-01-01 08:06:00 浏览: 22
var userRole = "guest"; // 假设当前用户身份为游客
// 根据用户身份权限来区分展示页面
if (userRole === "admin") {
// 展示管理员页面
document.getElementById("admin-page").style.display = "block";
} else if (userRole === "editor") {
// 展示编辑页面
document.getElementById("editor-page").style.display = "block";
} else {
// 展示游客页面
document.getElementById("guest-page").style.display = "block";
}
相关问题
用js写一个商品展示网页
好的,以下是一个简单的商品展示网页的JS代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品展示</title>
</head>
<body>
<h1>我们的商品</h1>
<div id="products"></div>
<script>
// 商品数据
var products = [
{
name: "商品1",
price: 10.99,
image: "https://via.placeholder.com/150"
},
{
name: "商品2",
price: 19.99,
image: "https://via.placeholder.com/150"
},
{
name: "商品3",
price: 5.99,
image: "https://via.placeholder.com/150"
}
];
// 显示商品
var productsDiv = document.getElementById("products");
for (var i = 0; i < products.length; i++) {
var product = products[i];
var productDiv = document.createElement("div");
productDiv.classList.add("product");
var image = document.createElement("img");
image.src = product.image;
productDiv.appendChild(image);
var name = document.createElement("p");
name.textContent = product.name;
productDiv.appendChild(name);
var price = document.createElement("p");
price.textContent = "$" + product.price.toFixed(2);
productDiv.appendChild(price);
productsDiv.appendChild(productDiv);
}
</script>
<style>
.product {
display: inline-block;
margin: 10px;
padding: 10px;
border: 1px solid black;
text-align: center;
}
.product img {
max-width: 100%;
height: auto;
}
</style>
</body>
</html>
```
这段代码使用了HTML、CSS和JS来创建一个简单的商品展示网页。其中,商品数据存储在一个JavaScript数组中,每个商品具有名称、价格和图片。JS代码使用一个循环来遍历商品数组,并为每个商品创建一个包含名称、价格和图片的HTML元素。然后,JS代码将这些元素添加到一个名为“products”的HTML元素中,从而展示所有商品。CSS代码用于设置商品元素的样式,包括边框、内边距、文本对齐等。
用js写一个网页界面的代码
好的,我可以帮你编写用JS编写网页的代码。你可以参考下面的代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Javascript Web Page</title>
</head>
<body>
<h1>This is a Javascript Web Page</h1>
<p>Here is some text on the page. We can use Javascript to modify this text dynamically.</p>
<button onclick="changeText()">Click me</button>
<script>
function changeText() {
document.getElementsByTagName("p")[0].innerHTML = "The text has been changed!";
}
</script>
</body>
</html>
```
这是一个简单的HTML文件,其中包含一个标题、一些文本和一个按钮。当你点击按钮时,按钮的文本将被动态更改。这是使用Javascript编写的。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)