ChatGPT解答：
前端用JavaScript+element-UI，实现功能：1.用户在输入框输入一串随机性的字符串，自动给出对应的正则表达式；2.在另一个输入框输入这个正则表达式，自动提取内容；
ChatGPTDemo
Based on OpenAI API (gpt-3.5-turbo).
前端用JavaScript+element-UI，实现功能：
1.用户在输入框输入一串随机性的字符串，自动给出对应的正则表达式；
2.在另一个输入框输入这个正则表达式，在另一个已经输入的大批量内容中，自动提取符合正则的内容；
-
自动生成正则表达式
HTML代码：
<template>
<div>
<el-input v-model="inputValue" placeholder="请输入随机字符串"></el-input>
<el-button type="primary" @click="generateRegExp">生成正则表达式</el-button>
<div v-if="regExp">{{regExp}}</div>
</div>
</template>
JavaScript代码：
<script>
export default {
data() {
return {
inputValue: '',
regExp: ''
}
},
methods: {
generateRegExp() {
let regExp = '';
for (let i = 0; i < this.inputValue.length; i++) {
const charCode = this.inputValue.charCodeAt(i);
if (charCode >= 48 && charCode <= 57) {
// 数字
regExp += '\\d';
} else if (charCode >= 65 && charCode <= 90) {
// 大写字母
regExp += '[A-Z]';
} else if (charCode >= 97 && charCode <= 122) {
// 小写字母
regExp += '[a-z]';
} else {
// 其他字符
regExp += '\\' + this.inputValue.charAt(i);
}
}
this.regExp = '^' + regExp + '$';
}
}
}
</script>
- 自动提取符合正则的内容
HTML代码：
<template>
<div>
<el-input v-model="inputValue" placeholder="请输入大批量内容"></el-input>
<el-input v-model="regExp" placeholder="请输入正则表达式"></el-input>
<el-button type="primary" @click="extractContent">提取内容</el-button>
<div v-if="extractedContent">{{extractedContent}}</div>
</div>
</template>
JavaScript代码：
<script>
export default {
data() {
return {
inputValue: '',
regExp: '',
extractedContent: ''
}
},
methods: {
extractContent() {
const regExp = new RegExp(this.regExp, 'g');
const matches = this.inputValue.match(regExp);
if (matches) {
this.extractedContent = matches.join('\n');
} else {
this.extractedContent = '没有符合条件的内容';
}
}
}
}
</script>
完整的代码
HTML代码：
<template>
<div>
<h3>生成正则表达式</h3>
<el-input v-model="inputValue" placeholder="请输入随机字符串"></el-input>
<el-button type="primary" @click="generateRegExp">生成正则表达式</el-button>
<div v-if="regExp">{{regExp}}</div>
<h3>提取符合条件的内容</h3>
<el-input v-model="inputValue2" placeholder="请输入大批量内容"></el-input>
<el-input v-model="regExp2" placeholder="请输入正则表达式"></el-input>
<el-button type="primary" @click="extractContent">提取内容</el-button>
<div v-if="extractedContent">{{extractedContent}}</div>
</div>
</template>
JavaScript代码：
<script>
export default {
data() {
return {
inputValue: '',
regExp: '',
inputValue2: '',
regExp2: '',
extractedContent: ''
}
},
methods: {
generateRegExp() {
let regExp = '';
for (let i = 0; i < this.inputValue.length; i++) {
const charCode = this.inputValue.charCodeAt(i);
if (charCode >= 48 && charCode <= 57) {
// 数字
regExp += '\\d';
} else if (charCode >= 65 && charCode <= 90) {
// 大写字母
regExp += '[A-Z]';
} else if (charCode >= 97 && charCode <= 122) {
// 小写字母
regExp += '[a-z]';
} else {
// 其他字符
regExp += '\\' + this.inputValue.charAt(i);
}
}
this.regExp = '^' + regExp + '$';
},
extractContent() {
const regExp = new RegExp(this.regExp2, 'g');
const matches = this.inputValue2.match(regExp);
if (matches) {
this.extractedContent = matches.join('\n');
} else {
this.extractedContent = '没有符合条件的内容';
}
}
}
}
</script>
再来5个实例，给出代码
提供5个前端实例，并附上代码：
-
计算器
HTML代码：
<template>
<div>
<el-input v-model="num1" placeholder="请输入第一个数字"></el-input>
<el-select v-model="operator" placeholder="请选择运算符">
<el-option label="+" value="+"></el-option>
<el-option label="-" value="-"></el-option>
<el-option label="*" value="*"></el-option>
<el-option label="/" value="/"></el-option>
</el-select>
<el-input v-model="num2" placeholder="请输入第二个数字"></el-input>
<el-button type="primary" @click="calculate">计算</el-button>
<div v-if="result">结果为：{{result}}</div>
</div>
</template>
JavaScript代码：
<script>
export default {
data() {
return {
num1: '',
operator: '',
num2: '',
result: ''
}
},
methods: {
calculate() {
switch (this.operator) {
case '+':
this.result = parseFloat(this.num1) + parseFloat(this.num2);
break;
case '-':
this.result = parseFloat(this.num1) - parseFloat(this.num2);
break;
case '*':
this.result = parseFloat(this.num1) * parseFloat(this.num2);
break;
case '/':
this.result = parseFloat(this.num1) / parseFloat(this.num2);
break;
}
}
}
}
</script>
-
图片轮播组件
HTML代码：
<template>
<div>
<div class="slider">
<img v-for="(item, index) in images" :key="index" :src="item" :class="{ active: currentIndex === index }" />
</div>
<div class="buttons">
<span v-for="(item, index) in images" :key="index" :class="{ active: currentIndex === index }" @click="clickButton(index)"></span>
</div>
</div>
</template>
CSS代码：
<style>
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
width: 100%;
height: 100%;
transition: opacity 0.5s;
}
.slider img.active {
opacity: 1;
}
.buttons {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.buttons span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.buttons span.active {
background-color: #f00;
}
</style>
JavaScript代码：
<script>
export default {
data() {
return {
images: [
'/static/img/1.jpg',
'/static/img/2.jpg',
'/static/img/3.jpg',
'/static/img/4.jpg',
'/static/img/5.jpg'
],
currentIndex: 0
}
},
mounted() {
setInterval(() => {
this.currentIndex++;
if (this.currentIndex === this.images.length) {
this.currentIndex = 0;
}
}, 3000);
},
methods: {
clickButton(index) {
this.currentIndex = index;
}
}
}
</script>
-
下拉框组件
HTML代码：
<template>
<div class="select">
<div class="select-header" @click="showOptions = !showOptions">
<el-input v-model="searchValue" placeholder="请输入关键字" :disabled="!showOptions" />
<i class="el-icon-arrow-down" :class="{ 'el-icon-arrow-up': showOptions }"></i>
</div>
<div class="select-options" v-show="showOptions">
<div v-for="(item, index) in filteredOptions" :key="index" class="option" @click="selectOption(item)">
{{ item }}
</div>
</div>
</div>
</template>
CSS代码：
<style>
.select {
position: relative;
width: 200px;
height: 40px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.select-header {
display: flex;
align-items: center;
height: 100%;
padding: 0 10px;
}
.select-header i {
margin-left: auto;
font-size: 14px;
}
.select-options {
position: absolute;
top: 40px;
left: 0;
z-index: 100;
width: 100%;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.option {
padding: 5px 10px;
cursor: pointer;
}
.option:hover {
background-color: #f0f0f0;
}
</style>
JavaScript代码：
<script>
export default {
data() {
return {
options: ['选项1', '选项2', '选项3', '选项4', '选项5'],
searchValue: '',
showOptions: false
}
},
computed: {
filteredOptions() {
if (this.searchValue) {
return this.options.filter(item => item.includes(this.searchValue));
} else {
return this.options;
}
}
},
methods: {
selectOption(option) {
this.searchValue = option;
this.showOptions = false;
}
}
}
</script>
-
表单验证组件
HTML代码：
<template>
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" autocomplete="off" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="form.confirmPassword" type="password" autocomplete="off" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" autocomplete="off" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
JavaScript代码：
<script>
export default {
data() {
return {
form: {
username: '',
password: '',
confirmPassword: '',
email: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ validator: this.confirmPasswordValidator, trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
]
}
}
},
methods: {
confirmPasswordValidator(rule, value, callback) {
if (value !== this.form.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
this.$message.success('提交成功');
} else {
this.$message.error('表单验证失败');
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
}
</script>
-
音乐播放器
HTML代码：
<template>
<div>
<audio ref="audio" :src="currentMusicUrl" @ended="playNextMusic" />
<div class="player">
<div class="cover" :style="{ 'background-image': 'url(' + currentMusicCover + ')' }">
<div class="mask"></div>
<div class="buttons">
<i class="el-icon-skip-backward" @click="playPrevMusic"></i>
<i :class="{ 'el-icon-play': !isPlaying, 'el-icon-pause': isPlaying }" @click="togglePlay"></i>
<i class="el-icon-skip-forward" @click="playNextMusic"></i>
</div>
</div>
<div class="info">
<div class="name">{{ currentMusicName }}</div>
<div class="artist">{{ currentMusicArtist }}</div>
<div class="lyrics" v-if="currentMusicLyrics">
<div v-for="(item, index) in currentMusicLyrics" :key="index" :class="{ active: currentIndex === index }">
{{ item.content }}
</div>
</div>
</div>
</div>
<div class="playlist">
<div class="title">播放列表</div>
<div class="list">
<div v-for="(item, index) in musicList" :key="index" :class="{ active: currentIndex === index }" @click="playMusic(index)">
<div class="name">{{ item.name }}</div>
<div class="artist">{{ item.artist }}</div>
</div>
</div>
</div>
</div>
</template>
CSS代码：
<style>
.player {
display: flex;
align-items: center;
height: 200px;
margin-bottom: 20px;
background-color: #f0f0f0;
}
.cover {
position: relative;
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.2s;
}
.mask:hover {
opacity: 1;
}
.buttons {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.buttons i {
font-size: 24px;
color: #fff;
cursor: pointer;
margin: 0 10px;
}
.info {
flex: 1;
padding: 20px;
}
.name {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.artist {
font-size: 16px;
color: #999;
margin-bottom: 10px;
}
.lyrics {
margin-top: 20px;
line-height: 24px;
overflow-y: auto;
max-height: 200px;
}
.lyrics div {
text-align: center;
cursor: pointer;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
