web前端实验3

BB4UXYQ

已于 2023-04-23 16:51:04 修改

阅读量187

点赞数

文章标签：前端 javascript vue.js

于 2023-04-23 15:45:55 首次发布

本文链接：https://blog.csdn.net/BB4UXYQ/article/details/130320244

版权

实验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. 设计一个选项卡功能，当鼠标移动至某一选项卡时出现切换

在这里插入图片描述

提示：
1. 选项卡可采用三个行内元素，为选中背景色#000，选中背景色#aaa
2. 选项卡内容可采用三个不同列表
3. 针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000，选中背景色#aaa；文本颜色#fff;；选项内容未选中不显示display:none，选中显示display:block。
4. 通过JavaScript动态设置样式，页面对象.classname=“class样式选择器”
  如mydiv. className = “selectSpanStyle”
5. 鼠标移至选项卡设置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. 设计如下表单，并进行数据验证。

在这里插入图片描述

提示：
1. 输入元素取值可通过var name =document.getElementsById(“元素id”).value;
2. 判断长度name.length
3. 是否英文字符开头
4. 首字母是大小写字符，获取输入的字符对应的编码
  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>