js写一串代码通过按钮修改img的src属性
时间: 2023-05-19 20:07:21 浏览: 75
可以使用以下代码实现:
HTML:
```html
<button id="change-img">Change Image</button>
<img id="my-img" src="original-image.jpg" alt="Original Image">
```
JavaScript:
```javascript
const changeImgBtn = document.getElementById('change-img');
const myImg = document.getElementById('my-img');
changeImgBtn.addEventListener('click', () => {
myImg.src = 'new-image.jpg';
});
```
这段代码会在页面上创建一个按钮和一个图片元素,当按钮被点击时,图片的src属性会被修改为新的图片。
相关问题
你简单写一个支付宝小程序的前端代码
### 回答1:
前端代码大致如下:<template>
<div>
<div>
<img src="alipay.png" />
</div>
<div>
<input type="text" v-model="alipayNumber" placeholder="请输入支付宝账号" />
<input type="text" v-model="amount" placeholder="请输入金额" />
<button @click="pay">立即支付</button>
</div>
</div>
</template><script>
export default {
data() {
return {
alipayNumber: '',
amount: ''
}
},
methods: {
pay() {
// 支付操作
}
}
}
</script>
### 回答2:
支付宝小程序的前端代码如下:
1. 创建一个名为`index.axml`的文件,用于定义小程序的页面结构。
```html
<view class="container">
<text>欢迎使用支付宝小程序</text>
<button class="btn" type="primary" onTap="onButtonClick">点击支付</button>
</view>
```
2. 创建一个名为`index.acss`的文件,用于定义小程序的页面样式。
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.btn {
margin-top: 20px;
width: 200px;
height: 40px;
background-color: #3c97ff;
border-radius: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
```
3. 创建一个名为`index.js`的文件,用于定义小程序的逻辑。
```javascript
Page({
onButtonClick() {
my.pay({
orderStr: 'xxxxxx', // 支付宝订单字符串,具体值需要根据实际业务处理
success: (res) => {
console.log(res);
// 支付成功的回调逻辑
},
fail: (err) => {
console.error(err);
// 支付失败的回调逻辑
}
});
}
});
```
以上是一个简单的支付宝小程序的前端代码示例。用户打开小程序后,页面中显示一个欢迎使用支付宝小程序的文本和一个支付按钮。点击支付按钮会执行支付宝的支付功能,并根据支付成功或失败的结果执行相应的回调逻辑。
### 回答3:
支付宝小程序的前端代码通常使用JavaScript编写。以下是一个简单的支付宝小程序前端代码示例:
```javascript
// app.js
App({
onLaunch: function () {
// 小程序初始化
my.getAuthCode({
scopes: 'auth_user',
success: (res) => {
// 获取用户授权后的authCode,进行后续操作
console.log(res.authCode);
},
fail: (error) => {
console.log(error);
}
})
}
});
// index.js
Page({
data: {
amount: 0,
payResult: ''
},
// 输入金额
inputAmount: function (e) {
this.setData({
amount: e.detail.value
});
},
// 支付按钮点击事件
submitPayment: function () {
const amount = this.data.amount;
// 调用支付宝小程序的支付接口
my.tradePay({
orderStr: generateOrderStr(amount),
success: (res) => {
// 支付成功的回调
console.log(res);
this.setData({
payResult: '支付成功'
});
},
fail: (error) => {
console.log(error);
this.setData({
payResult: '支付失败'
});
}
});
}
});
// utils.js
function generateOrderStr(amount) {
// 根据商品金额生成支付订单字符串
const orderStr = `{"amount": ${amount}, "subject": "商品名称", "body": "商品描述"}`;
return orderStr;
}
```
以上是一个简单的支付宝小程序前端代码示例。其中,`App`、`Page`分别用于小程序的初始化和页面,`my.getAuthCode`用于获取用户授权码,`my.tradePay`用于调起支付接口,`generateOrderStr`用于生成支付订单字符串。页面包含一个输入框和一个支付按钮,用户输入金额后点击支付按钮即可调起支付宝支付接口完成支付。支付结果将在控制台输出,并显示在页面上。
帮我写一段简单的图片上传压缩的html代码
当然可以,下面是一个简单的图片上传压缩的 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片上传和压缩</title>
</head>
<body>
<h1>图片上传和压缩</h1>
<form>
<input type="file" id="imageFile" accept="image/*">
<br>
<button type="button" onclick="compressImage()">压缩图片</button>
</form>
<br>
<img id="previewImage" src="" alt="预览图" style="max-width: 500px;">
<script>
function compressImage() {
var imageFile = document.getElementById("imageFile").files[0];
var reader = new FileReader();
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.onload = function () {
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var width = image.width;
var height = image.height;
if (width > height) {
if (width > 500) {
height *= 500 / width;
width = 500;
}
} else {
if (height > 500) {
width *= 500 / height;
height = 500;
}
}
canvas.width = width;
canvas.height = height;
context.drawImage(image, 0, 0, width, height);
var compressedImage = canvas.toDataURL("image/jpeg");
document.getElementById("previewImage").src = compressedImage;
};
};
reader.readAsDataURL(imageFile);
}
</script>
</body>
</html>
```
这段代码包含一个表单元素和一个 JavaScript 函数。用户可以通过表单元素选择一个图片文件,然后点击“压缩图片”按钮触发 JavaScript 函数。该函数将图片文件读入内存,然后使用 HTML5 Canvas 对象将图片压缩到最大宽度或高度为 500 像素的尺寸,并将压缩后的图片显示在页面上。注意,这里使用了 `toDataURL()` 方法将压缩后的图片转化为 Base64 编码的字符串,以便在页面上显示预览图。