写一个h5表白的代码要求使用js
时间: 2024-02-25 15:59:17 浏览: 21
好的,以下是一个简单的H5表白页面的代码,使用了JavaScript实现点击按钮弹出表白信息的效果:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>表白页面</title>
</head>
<body>
<h1>我要表白</h1>
<button id="loveBtn">点击表白</button>
<div id="loveMsg"></div>
<script src="love.js"></script>
</body>
</html>
```
JavaScript代码(存放在名为love.js的文件中):
```javascript
var loveBtn = document.getElementById("loveBtn");
var loveMsg = document.getElementById("loveMsg");
loveBtn.onclick = function() {
loveMsg.innerHTML = "亲爱的,我喜欢你很久了,愿意做你的男/女朋友吗?";
}
```
当用户点击按钮时,loveMsg元素的内容会被改变为表白信息。你可以根据需要修改表白信息的内容和样式。
相关问题
用js写一个H5弹窗代码
以下是一个简单的H5弹窗代码:
HTML部分:
```html
<div id="popup" class="popup">
<div class="popup-content">
<div class="popup-header">
<h2>弹窗标题</h2>
<span class="close-btn" onclick="closePopup()">X</span>
</div>
<div class="popup-body">
<p>这是弹窗内容</p>
</div>
<div class="popup-footer">
<button onclick="closePopup()">关闭</button>
</div>
</div>
</div>
```
CSS部分:
```css
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 400px;
padding: 20px;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.popup-header h2 {
margin: 0;
}
.close-btn {
cursor: pointer;
font-size: 20px;
}
.popup-body {
margin-bottom: 20px;
}
.popup-footer {
text-align: right;
}
```
JavaScript部分:
```javascript
function openPopup() {
document.getElementById("popup").style.display = "block";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
```
这个H5弹窗代码包含一个弹窗的HTML结构,以及用CSS样式控制弹窗的样式,还有两个JavaScript函数用于打开和关闭弹窗。可以通过在需要弹窗的地方调用openPopup()函数来打开弹窗,通过在弹窗中的关闭按钮或者关闭按钮调用closePopup()函数来关闭弹窗。
使用js写一个h5页面识别药监码
可以使用HTML5的canvas和JavaScript的API来实现药监码的识别。首先,需要在HTML5页面中添加一个canvas元素,然后使用JavaScript获取该元素的上下文,接着使用canvas的drawImage方法将药监码图片绘制到canvas上。然后,使用JavaScript的getImageData方法获取canvas上的像素数据,对像素数据进行处理,最终得到药监码的信息。具体实现方法可以参考相关的JavaScript库和示例代码。