【无标题】

最新推荐文章于 2024-05-20 21:21:56 发布

Hst1120

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量42

点赞数

分类专栏：感悟文章标签： html5

本文链接：https://blog.csdn.net/Hst1120/article/details/129380723

版权

感悟专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一些感想

let b:{name:string,age?:number};  //在属性名后面添加？表示可选属性
b= {name:"里昂"};

let c ={a:string,[proName:string]:any} //表示可以在对象里面添加任意字符串的属性名
//let c ={a:string,[proName:string]:number}
c = {name:"里昂",age:18,agnder:'男'}

let d:(a:umber,b:number) =>number;//一个函数里面有两个参数，且两个参数的类型都是number，返回值也是number类型
d=function(n1,n2){
    return n1+n2;
}

基础

<style>
  .bg{
    width: 400px;
    height: 960px;
    background-color: antiquewhite;
  }
  .middle {
    position: relative;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color:red;
    
  }
  .small{
    position:absolute;
    width: 152px;
    height: 198px;
    left: 50%;
    top: 50%;
    margin-top: -110px;
    margin-left: -76px;
  }
  @-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}

</style>

结构

<div class="bg">
    <div class="middle ">
      <img id="zhuanpan" src=" ./中盘.png" alt="" width="300px">
      <div class="small" >
        <img class="" src="./转盘.png" alt="">

      </div>
    </div>   
  </div>

执行

<script>
//   window.onload = function() {
//     console.log("页面加载完毕")
// }
  //等待5秒后跳转
  //获取当前时间
  setTimeout(()=>{
    document.getElementById("zhuanpan").className= "img an"
  },2000)
  setTimeout(()=>{

    window.location.href="./index.html";
  },5000)
 
   
 </script>

页面

<style>
  /* html,body{
    height: 100%;
  } */
  .center table{
    width: 100%;
    height: 500px;
  }
  .cell{
    text-align: right;
    padding: 10px;
  }
  .message{
    width: 200px;
    height: 60px;
    border: 1px solid  grey;
    border-radius: 6px ;
  }
  .submit{
    width: 100px;
    height: 30px;
    background-color: #6cacd6;
    border-radius: 15px;
    border: none;
  }
</style>
<body>
  <div class="center">
    <from>
      <table>
        <tr>
          <td class="cell">用户名</td>
          <td>
            <input type="text" class="message"
            placeholder="请输入用户名">
          </td>
        </tr>
        <tr>
          <td class="cell">密码</td>
          <td>
            <input type="text" class="message" placeholder="请输入密码">
          </td>
        </tr>
        <tr>
          <td class="cell">Email</td>
          <td>
            <input type="text" class="message" placeholder="请输入Email">
          </td>
        </tr>
        <tr>
          <td class="cell">姓名</td>
          <td>
            <input type="text" class="message" placeholder="请输入姓名">
          </td>
        </tr>
        <tr>
          <td class="cell">手机号</td>
          <td>
            <input type="text"  class="message"placeholder="请输入手机号">
          </td>
        </tr>
        <tr>
          <td class="cell">性别</td>
          <td>
            <input type="radio" name="s" check="checked"/>男
            <input type="radio" name="s"/>女
          </td>
        </tr>
        <tr>
          <td class="cell">出生日期</td>
          <td>
            <input type="date"  class="message">
          </td>
        </tr>
        <tr>
          <td class="cell">验证码</td>
          <td>
            <input type="text" class="message" placeholder="请输入验证码"/>6786
          </td>
        </tr>
        <tr>
          
          <td colspan="2" align="center">
            <input type="button" class="submit" value="注册">
          </td>
        </tr>
      </table>
      
    </from>
  </div>
</body>

label方式

 <form>
    <label>
        用户名：
        <input type="text" name="username" placeholder="请输入用户名">
    </label>
    <br/>
    <label>
      邮箱：
      <input type="email" name="email" placeholder="请输入邮箱">
  </label>
  <br/>
  <label>
    性别：
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女
</label>
<br/>
<input type="submit"  value="提交">
</form>