实验3
1. 应用JavaScript编写留言的功能,在文本中输入文字提交后,在下方进行显示。
提示:可将下方内容以列表体现,提交时动态创建列表的项。可使用以下两种方式之一的方法:
1) 使用CreateElenment动态创建li标签及li中的文本
2) 在列表标签ul或者ol对象上设置InnerHtml列表对象
.innerHTML += "<li>文本内容</li>"
- 代码
/*使用vue框架*/
<template>
<div id="d1">
<textarea cols="66" rows="8" v-model="msg"></textarea>
<input type="submit" @click="add()">
<ul v-for="item in zzy">
<li>{{ item }}</li>
</ul>
</div>
</template>
<script>
export default{
data(){
/*初始化变量*/
return{
msg:'',
zzy:[
]
}
},
methods:{
add(){
/*将msg的值加入zzy变量,类似与list中的add*/
this.zzy.push(this.msg)
}
}
}
</script>
<style scoped>
#d1{
width: 460px;
margin: 0 auto;
}
input{
width: 100px;
float:right;
}
ul{
list-style: none;
}
li{
border-bottom:1px solid black;
margin-left: -40px;
}
</style>
/*不使用vue框架*/
<template>
<el-container class="container">
<el-main>
<textarea id="text" class="text" cols="30" rows="10">请输入留言</textarea>
<el-button type="primary" class="submit-button" @click="click()">提交</el-button>
<p class = "textShow">显示留言</p>
<ul id="showtext">
</ul>
</el-main>
</el-container>
</template>
<script>
export default {
name: "shiYan3",
methods:{
click:function (){
/*获取输入的留言*/
var text=document.getElementById("text").value;
/*创建新的li标签*/
var showtext=document.createElement("li");
var newtext=document.createTextNode(text);
/*将文本拼接在标签中*/
showtext.appendChild(newtext);
/*放入ul中*/
document.getElementById("showtext").appendChild(showtext)
}
}
}
import "element-ui/lib/theme-chalk/index.css"
</script>
<style>
* {
margin: 0;
padding: 0;
}
.el-main{
display: flex;
flex-direction: column;
align-items: center;
}
/**{
margin: 0px;
padding: 0px;
}*/
.container{
width: 100%;
height: auto;
margin: 0;
}
.text{
width: 500px;
/*margin-left: 500px;
margin-right: 500px;
margin-top: 400px;
margin-bottom: 10px;*/
}
.submit-button{
margin-left: 400px;
width: 100px;
height: auto;
}
ul{
list-style-type: none;
}
li{
margin: 10px 460px;
border-bottom: 2px solid black;
width: 500px;
text-indent: 20px;
}
.textShow{
margin-right: 400px;
}
hr{
margin: 10px 500px;
/*margin-right: 500px;*/
}
</style>
2. 设计一个选项卡功能,当鼠标移动至某一选项卡时出现切换
- 提示:
- 选项卡可采用三个行内元素,为选中背景色#000,选中背景色#aaa
- 选项卡内容可采用三个不同列表
- 针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000,选中背景色#aaa;文本颜色#fff;;选项内容未选中不显示display:none,选中显示display:block。
- 通过JavaScript动态设置样式,页面对象.classname=“class样式选择器”
如mydiv. className = “selectSpanStyle” - 鼠标移至选项卡设置onmouseenter事件
如:mySpan.onmouseenter = function()
/*方法1*/
<template>
<el-container>
<el-main>
<div class = "div1">
<span id="hottop" v-on:mouseover="show(1)">热门排行</span>
<span id="imagedelivery" v-on:mouseover="show(2)">美图速递</span>
<span id="frontTechnology" v-on:mouseover="show(3)">前沿科技</span>
</div>
<ul id="news1">
<li>xxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxx</li>
</ul>
<ul id="news2">
<li>鹅教官、羊陪练.....这所中学养的动物成了“网红”</li>
<li>最伤身体的10个生活习惯,一定要避开</li>
<li>12岁孩子带着父亲去西藏吃住行自己拿主意</li>
<li>16岁男孩暑假干了俩月工地,练出满身肌肉,只为赚学费</li>
</ul>
<ul id="news3">
<li>实验没给</li>
<li>实验没给</li>
<li>实验没给</li>
<li>实验没给</li>
</ul>
</el-main>
</el-container>
</template>
<script>
export default {
name: "shiYan4",
methods: {
show:function(num) {
/*获取id*/
var news1=document.getElementById("news1")
var news2=document.getElementById("news2")
var news3=document.getElementById("news3")
/*根据num属性值判断需要显示的span*/
/*改变可见性*/
if(num==1){
news1.style.display="block";
news2.style.display="none";
news3.style.display="none";
}
else if(num==2){
news1.style.display="none";
news2.style.display="block";
news3.style.display="none";
}
else if(num==3){
news1.style.display="none";
news2.style.display="none";
news3.style.display="block";
}
}
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
.el-container{
width: 452px;
height: auto;
margin: 0 auto;
border: 1px solid black;
}
span{
background-color: #000;
color: #fff;
width: 150px;
text-align: center;
float: left;
}
span:hover{
background-color:#aaa;
}
ul{
list-style-type: none;
width: 450px;
}
li{
text-indent: 20px;
border-bottom: 0.01px dashed gray;
line-height: 30px;
width: 450px;
}
</style>
/*方法2*/
<template>
<div class="d1">
<div class="d2">
<span v-for="(item, index) in choices" :key="index" @click="activeTab = index" :class="{active:activeTab===index}">{{item.label}}</span>
</div>
<div class="d3" v-for="(item, index) in choices" :key="index" v-if="activeTab === index">
<p>{{item.news1}}</p>
<p>{{item.news2}}</p>
<p>{{item.news3}}</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
activeTab:0,
choices: [
{ label: '热门排行', news1: '1xxxxxxxxxxxxxx',news2:'xxxxxxxxxxxxxxx',news3:'xxxxxxxxxxxxxxx'},
{ label: '美图速递', news1: '2xxxxxxxxxxxxxx',news2:'xxxxxxxxxxxxxxx',news3:'xxxxxxxxxxxxxxx' },
{ label: '前沿科技', news1: '3xxxxxxxxxxxxxx',news2:'xxxxxxxxxxxxxxx',news3:'xxxxxxxxxxxxxxx' }
]
}
}
}
</script>
<style scoped>
span{
background-color: #000;
color: #fff;
}
span.active{
background-color:#aaa;
}
.d1{
width: 400px;
margin: 0 auto;
}
.d2{
width: 358px;
}
.d3{
width: 190px;
}
p{
border-bottom: 1px dashed black;
}
</style>
3. 设计如下表单,并进行数据验证。
- 提示:
- 输入元素取值可通过var name =document.getElementsById(“元素id”).value;
- 判断长度name.length
- 是否英文字符开头
- 首字母是大小写字符,获取输入的字符对应的编码
var keycode=name.charCodeAt(0);
if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){
不是英文字符
}
- 代码
/*方法1*/
<template>
<div id="container">
<div id="login">
<div id="title">注册</div>
<input id="username" type="text" placeholder="请输入用户名" v-model="userName">
<div id="usernameErrorMsg" v-model="usernameErrorMsg">{{usernameErrorMsg}}</div>
<input id="password" type="password" placeholder="请输入您的密码" v-model="password">
<div id="passwordErrorMsg" v-model="passwordErrorMsh">{{passwordErrorMsh}}</div>
<input id="button" type="button" value="提交" @click="dataCheck">
</div>
</div>
</template>
<style scoped>
#container{
width: 400px;
height: 400px;
margin: 0 auto;
background-color: #95c0f1;
}
#login{
display: flex;
flex-direction: column;
}
#username, #password{
border: 1px solid #aaaaaa;
height: 35px;
width: 350px;
margin:18px auto;
text-indent: 20px;
}
#title{
text-align: center;
font-size: 25px;
color: white;
font-weight: bold;
height: 40px;
width: 400px;
background-color: #5ba0da;
margin: 0 auto;
}
#button{
width: 350px;
height: 40px;
background-color: #5ba0da;
border: none;
border-radius: 10px;
margin: 18px auto;
color: white;
}
#usernameErrorMsg, #passwordErrorMsg{
color: red;
margin: 0 auto;
width: 350px;
}
</style>
<script>
export default {
data () {
return {
userName:'',
password:'',
usernameErrorMsg:'',
passwordErrorMsh:''
}
},
methods:{
dataCheck(){
if (this.userName.length < 6 || this.userName.length > 18){
this.usernameErrorMsg = "用户名长度必须为6到18位"
}else if (this.userName.charAt(1) < 65){
this.usernameErrorMsg = "用户名必须以字母开头"
}else {
this.usernameErrorMsg = ""
}
if (this.password.length < 6){
this.passwordErrorMsh = "密码长度不能小于6位"
}else {
this.passwordErrorMsh = ""
}
}
}
}
</script>
/*方法2*/
<template>
<el-container>
<el-header>
<a>注册</a>
</el-header>
<el-main>
<el-form :model="login" :rules="loginrules">
<el-form-item prop="username">
<el-input type="text" v-model="login.username" placeholder="请输入您的用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="login.password" placeholder="请输入您的密码" ></el-input>
</el-form-item>
<el-form-item class = "submit">
<el-button @click="login()">提交</el-button>
</el-form-item>
</el-form>
</el-main>
</el-container>
</template>
<script>
export default {
name: "login",
methods:{
initial:function(){
}
},
data(){
return{
login:{
msg: 1,
username: null,
password: null,
},
loginrules: {
username: [{required: true, message: "请输入用户名", trigger: 'blur'},
{max: 18,message: "用户名长度必须为6到18位!" },
{min:6,message: "用户名长度必须为6到18位!"},
{pattern:/^[A-Za-z]+$/,message: "用户名必须以英文字母开头!"}],
password: [{required: true, message: '请输入密码', trigger: 'blur'},
{min: 6,message: "密码长度不能小于6位!" },],
}
}
}
}
</script>
<style>
*{
padding: 0px;
margin: 0px;
}
.el-container{
width: 600px;
height: auto;
margin: 0 auto;
}
.el-header{
width: 100%;
font-size: 40px;
color: #fff;
text-align: center;
background-color: #1567ad;
}
.el-main{
/*方法3:使用正则表达式判断*/
<template>
<div class="d1">
<div class="d2">
<h2>注册</h2>
</div>
<div class="d3">
<input class="in1" v-model="username" placeholder='请输入你的用户名'>
<div id="useerror">{{usemsg}}</div>
<input class="in1" v-model="password" placeholder="请输入你的密码">
<div id="paserror">{{pasmsg}}</div>
<input class="in2" type="submit" @click="captial">
</div>
</div>
</template>
<script>
export default{
data(){
return{
username:'',
password:'',
usemsg:'',
pasmsg:''
}
},
methods:{
captial(){
if(!/^.{6,18}$/.test(this.username)){
this.usemsg='用户长度必须为6到18位!';
}else{
if(!/^[a-zA-Z]/.test(this.username)){
this.usemsg='用户名必须以英文名开头!';
}else{
if(!/^.{6,}$/.test(this.password)){
this.pasmsg='密码长度不得小于6位'
}
}
}
}
}
}
</script>
<style scoped>
.d1{
width: 400px;
margin: 0 auto;
}
.d2{
width: 400px;
height: 35px;
background-color: aqua;
}
h2{
text-align: center;
}
.d3{
text-align: center;
height: 170px;
background-color: rgb(75, 11, 214);
}
.in1{
width: 300px;
height: 20px;
margin: 10px 0;
}
.in2{
width: 307.2px;
height: 20px;
margin: 10px 0;
}
#useerror{
width: 307.2px;
margin: 0 auto;
color: red;
text-align: left;
}
#paserror{
width: 307.2px;
margin: 0 auto;
color: red;
text-align: left;
}
</style>