前端学习day10：js第五天

其他 2019-04-08 18:18:34 阅读次数: 0

操作样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>

    <style>
        /*行外样式*/
        .box {
            opacity: 0.6;
        }
        /*做一个衣服 写一个类样式*/
        .cloth {
            width: 200px;
            height: 200px;
            background-color: yellow;
            border-radius: 50%;
            margin-left: 50px;
        }
         /*
         *
         *  对象.className = 'cloth'
              缺点： 会覆盖原来样式   你就原来样式有写上
              ----》 h5
              操作样式的方法



         */


    </style>
</head>
<body>

<button>穿上衣服</button>
<button>脱掉衣服</button>

<div class="box"  ></div>
<!--js如何获取文本外部的样式
    js如何设置文本外部的样式

-->
<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<script>

    //200*200 蓝色  文字 水平居中 白色  盒子阴影 变圆



    var box = my$('.box')
  /*  box.style.width = '200px'
    box.style.height = '200px'
    box.style.backgroundColor = 'yellow'
    不好  直接添加到行内

    */

    // style仅仅保存元素在行内的样式

    var btn1 = my$('button:first-of-type')
    var btn2 = my$('button:nth-of-type(2)')

    console.log(btn1,btn2)

    btn1.onclick = getCloth;

    function getCloth() {
        /*给div外部样式 添加一件衣服*/


        //className = 'cloth'  ? 不爽
        my$('.box').className = ' box  cloth '



    }
    btn2.onclick = getoffCloth;
    function getoffCloth() {
        my$('.box').className = 'box'

    }
</script>
</body>
</html>

切换样式案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        .box {
            /*静态 */
            width: 200px;
            height: 200px;
            background-color: #a71d5d;
            border-radius: 50%;
            margin: 100px auto;
        }
        /*衣服显示和隐藏*/
        /*显示*/
        .show {
            display: block;
        }


        /*隐藏*/
        .hide {
            display: none;
        }
    </style>

</head>
<body>

<button>隐藏</button>
<!--<button>隐藏</button>-->

<div class="box"></div>
<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<script>
/*js 改变的是动态样式*/

    var btn  = my$('button:first-of-type')
  /*  var hide  = my$('button:last-of-type')*/


    var flag =false  ; //圆显示
    btn.onclick = function () {
        //false

        if(!flag){ //显示

            my$('.box').className = 'box hide'
            btn.innerText = '显示'

            flag = true ;

        }
        else {
            my$('.box').className = 'box show'
            btn.innerText = '隐藏'
            flag = false ;
        }
    }
</script>

</body>
</html>

表单验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <link rel="stylesheet" href="../../Documents/Tencent%20Files/419538402/FileRecv/day10/font/iconfont.css">

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        form {
            width: 500px;

            height: auto;
            margin: 0 auto;
        }
        form fieldset {
            padding: 20px 30px;
        }
        input {
          margin-bottom: 20px;
        }
        p {
            margin-bottom: 10px;
            display: none;
        }
        span[class*="iconfont icon-"] { /*选中类名以icon-开头的元素*/
            margin-left: 30px;
            font-size: 20px;
            color: #55a532;
            /*隐藏*/
            visibility: hidden;

        }

    </style>
</head>
<body>
<form action="" method="" name="myform">
    <fieldset>
        <legend>学生档案</legend>
        <!--label 标签起到点击文字自动聚焦的效果-->
       <!-- <label for="userpasswd">姓名:</label>-->
        姓名:<input type="text" name="username" id="username"  autofocus>
        <span class="iconfont icon-check-circle" id="name-icon"></span><br> <!--对勾-->

        <p id="nametips">请输入2--6位字符</p>

        密码:<input type="password" name="userpasswd" id="userpasswd">
        <span class="iconfont icon-check-circle"></span><br>
        <p id="passtips">6-16位数字或字母</p>
        电话号: <input type="text" name="telnumber">
        <span class="iconfont icon-check-circle"></span><br>
        <p id="teltips">请输入11位数字</p>
        邮箱: <input type="text" name="useremail"><br>
        <p id="emailtips">请输入地球人能识别的邮箱</p>
        身份证: <input type="text" name="userid"><br>
        <p id="idtips">请输入合法身份证</p>

        <input type="submit">
        <input type="reset">




    </fieldset>


</form>

<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<script>

    window.onload = function () {
        //1获取表单元素 监听用户如若填写完毕 ---》离焦 ---》js判断是否符合规则

        var form = document.myform;
        var username = form.username //form.name 属性名  姓名对应元素
        var telnumber = form.telnumber


        //onblur 离焦 onfocus 聚焦
        username.onblur = function () {
            //获取用户输入的值进行验证
            var userInput_name = username.value
            var nameReg = /^[\u4e00-\u9fa5]{2,6}$/g //不加引号  表达式
            console.log(userInput_name) //正则表达式匹配 如果test方法 返回true 则符合规定
            //将p元素的文本改变成绿色的您的输入符合规则
            //如果返回false 则p显示 文字变成红色
           if(!nameReg.test(userInput_name)){ //不符合规则
                my$('#nametips').style.display = 'block' //显示
                my$('#nametips').style.color = 'red'
               //切换图标类为X  icon-close-circle
               my$('#name-icon').setAttribute('class','iconfont icon-close-circle')
               my$('#name-icon').style.visibility = 'visible'
               my$('#name-icon').style.color = 'red'
               return false;

           }
           else {
               my$('#nametips').style.display = 'block' //显示
               my$('#nametips').innerText = '通过验证'
               my$('#nametips').style.color = 'green'
               my$('#name-icon').style.visibility = 'visible'
               return true;
           }


        }
        telnumber.onblur = function () {
            var userInput_tel = telnumber.value
            var telReg =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
            //不加引号  表达式
            //正则表达式匹配 如果test方法 返回true 则符合规定
            //将p元素的文本改变成绿色的您的输入符合规则
            //如果返回false 则p显示 文字变成红色
            if(!telReg.test(userInput_tel)){ //不符合规则
                my$('#teltips').style.display = 'block' //显示
                my$('#teltips').style.color = 'red'

            }
            else {
                my$('#teltips').style.display = 'block' //显示
                my$('#teltips').innerText = '通过验证'
                my$('#teltips').style.color = 'green'
            }


        }


    }

</script>
</body>
</html>

放大镜：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        .smallBox {
            position: relative;
            width: 400px;
            height: 250px;
            margin-left: 100px;
            margin-top: 100px;
            float: left;
        }
        .smallBox img {
            width: 400px;

        }
        .bigBox {
            position: relative;
            width: 800px;
            height: 500px;
            margin-left: 50px;
            margin-top: 100px;
            float: left;
            border: 1px solid #ccc ;
            overflow: hidden;
          /*  display: none;*/
        }
        .move {
            position: absolute;
            left:0;
            top:0;
            width: 120px;
            height: 120px;
            background-color: rgba(234,23,56,0.4);
            /*display: none;*/
        }
        #bigPic {
            position: absolute;
            left: 0;
            top:0;
        }

    </style>
</head>
<body>
<!--小盒子-->
<div class="smallBox">
    <img src="../../Documents/Tencent%20Files/419538402/FileRecv/day10/images/2-small.jpg" alt="" id="smallPic">
    <div class="move"></div>
</div>
<div class="bigBox">
    <img src="../../Documents/Tencent%20Files/419538402/FileRecv/day10/images/2-big.jpg" alt="" id="bigPic">
</div>

<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<script>
/*
offsetleft  offsetTop
有绝对定位属性的： 他获取的是距离父元素左上角的距离值
没有绝对定位属性  他获取的是距离body 左上角的距离值
* offsetWidth
* offsetHeight --->盒模型总高
*
* */
 window.onload = function () {

     var smallBox = my$('.smallBox') //小盒子
     var move = my$('.move') //运动元素
     var bigBox = my$('.bigBox') //大盒子
     var bigPic = my$('#bigPic') //大照片

     /*
     * 1:阴影块随着鼠标动---》获取鼠标位置
     *
     * */

     //鼠标移入显示
     /*smallBox.onmouseover = function(){
         //让move和大盒子显示
         move.style.display = 'block'
         bigBox.style.display = 'block'
     }
     //鼠标移开消失
     smallBox.onmouseout = function(){
         move.style.display = 'none'
         bigBox.style.display = 'none'

     }
*/
     //鼠标在小照片盒子上运动
     smallBox.onmousemove = function (e) {


         //将鼠标变为移动样式
         this.style.cursor = 'move'
         console.log(e.clientX)
         //先判断此时偏移量到底满足条件与否 如果不满足不赋值
         //只需要判断超出边界的情况  水平运动 最小值 0
         // 最大值 smallBox.offsetWidth-move.offsetWidth
         var newLeft = e.clientX-smallBox.offsetLeft-move.offsetWidth/2;
         var newTop =  e.clientY-smallBox.offsetTop-move.offsetHeight/2;

         if(newLeft < 0){
             newLeft = 0;

         }
         if(newLeft > smallBox.offsetWidth-move.offsetWidth ){
             newLeft = smallBox.offsetWidth-move.offsetWidth
         }
         if(newTop < 0){
             newTop = 0;

         }
         if(newTop > smallBox.offsetHeight-move.offsetHeight ){
             newTop = smallBox.offsetHeight-move.offsetHeight
         }


         move.style.left = newLeft +'px'
         move.style.top = newTop +'px'
         /******计算比例
          * 比例=小图宽度/大图宽度 pass
          *      小盒子/大盒子 pass
          *
          *      （3）宽比例 move的宽度-小盒子的宽度 /大盒子的宽度-大照片的宽度
          *      （4）高比例move的高度-小盒子的高度 /大盒子的高度-大照片的高度
          *
          * ******/
         var widthRate = (my$('.move').offsetWidth -smallBox.offsetWidth)/
             (bigBox.offsetWidth-bigPic.offsetWidth) ;

         var heightRate = (my$('.move').offsetHeight -smallBox.offsetHeight)/
             (bigBox.offsetHeight-bigPic.offsetHeight) ;

         bigPic.style.left = -parseInt(move.style.left) / widthRate +'px'
         bigPic.style.top = -parseInt(move.style.top) / heightRate +'px'



         
     }



 }

</script>
</body>
</html>

鼠标位置值的获取：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>

        img {
            position: absolute;
            left: 0;
            top:0;
            width: 40px;
            height: 40px;
            border: 2px solid #ccc; /*//Width :44px*/
        }
    </style>
</head>
<body>


<img src="../../Documents/Tencent%20Files/419538402/FileRecv/day10/images/xts.jpg" alt="">
<script>


    /*js 获取一个元素的盒模型宽度 = width +border*2 +padding*2

     对象.offsetWidth
    * 高度 对象.offsetHeight
    *
    *
    * */

    console.log(document.body)
    var img = document.getElementsByTagName('img')[0]

    console.log(img.offsetWidth);
    document.onmousemove = function (e) {
       //获取鼠标坐标  事件对象 e 保存着事件的具体信息

        img.style.left = e.clientX -img.offsetWidth/2+'px' ;
        img.style.top = e.clientY -img.offsetHeight/2+'px';

       console.log(e.clientX,e.clientY)


   }

</script>
</body>
</html>

BOM中的常用对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<button>前进</button>
<button>后退</button>
<script>
   /*

      window.location 保存url具体信息
      location.href ----》整个地址栏地址
      location.query ?后面的字符串
      location.search 包含？以及?后的字符串

      history 历史记录  go() back()
   *
   *
   *
   * */

   var btn1 = document.querySelector('button:first-child')
    btn1.onclick = function () {
       window.location.href = '07-test.html'

    }

</script>
</body>
</html>

随机验证码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        .test {
            width: 180px;
            height: 40px;
            line-height: 40px;
            background-color: #808080;
            font-weight: 800;
            margin: 100px auto;
            font-size: 20px;
            text-align: center;
            cursor: pointer;

        }

    </style>
</head>
<body>
<script src="../../Documents/Tencent%20Files/419538402/FileRecv/day09/获取元素.js"></script>
<div class="test">
    <span>G</span>
    <span>h</span>
    <span>j</span>
    <span>k</span>
</div>

<script>

window.onload = function () {
    var spans = my$All('.test span')
    var code = ['a','b','c','d','e','A','J','H','O','P','U'] // 11
    //产生0-11的随机数 Math.random() 0-1小数 [) [0-11) 10.3-->向下取整

    var RanColor = ['red','purple','brown','black','#fff','#234567','#777','#222','#FFE'

    ,'yellow','pink']


        my$('.test').onclick = function () {
        //1：产生随机字母 4个 循环放到span标签里
            for(var i =0;i<4;i++){
                var num =Math.floor( Math.random()*11)  //下标 0-10
                var num1 =Math.floor( Math.random()*11)  //下标 0-10
                spans[i].innerText =  code[num] //随机字母赋值到span标签里
                spans[i].style.color = RanColor[num1]
            }






        }








}


</script>
</body>
</html>

放大镜：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .smallBox {
            position: relative;
            width: 400px;
            height: 250px;
            margin-left: 100px;
            margin-top: 100px;
            float: left;
        }
        .smallBox img {
            width: 400px;

        }
        .bigBox {
            position: relative;
            width: 800px;
            height: 500px;
            margin-left: 50px;
            margin-top: 100px;
            float: left;
            border: 1px solid #ccc ;
            overflow: hidden;
        }
        .move {
            position: absolute;
            left:0;
            top:0;
            width: 120px;
            height: 120px;
            background-color: rgba(234,23,56,0.4);
        }
        #bigPic {
            position: absolute;
            left: 0;
            top:0;
        }

    </style>
</head>
<body>
<div class="smallBox">
    <img src="images/2-small.jpg" alt="" id="smallPic">
    <div class="move"></div>
</div>
<div class="bigBox">
    <img src="images/2-big.jpg" alt="" id="bigPic">
</div>

<script>
    window.onload = function () {
        var movediv = document.getElementsByClassName('move')[0]
        document.onmousemove = function (e) {

            movediv.style.left = e.clientX -movediv.offsetWidth/2-100+'px' ;
            movediv.style.top = e.clientY -movediv.offsetHeight/2-100+'px';
            console.log(movediv.style.left,movediv.style.top)
            if ((e.clientX -movediv.offsetWidth/2-100)<0){
                movediv.style.left=0+'px'
            }
            if ((e.clientX -movediv.offsetWidth/2-100)>400-120){
                movediv.style.left=400-120+'px'
            }
            if ((e.clientY -movediv.offsetHeight/2-100)<0){
                movediv.style.top=0+'px'
            }
            if ((e.clientY -movediv.offsetHeight/2-100)>250-120){
                movediv.style.top=250-120+'px'
            }
        }
    }
</script>
</body>
</html>

隐藏显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width:200px;
            height:200px;
            background-color: #00a4ff;
        }
        .show {
            display: block;
        }
        .hidd {
            display: none;
        }
    </style>
</head>
<body>
<button>隐藏</button>

<div class="box"></div>
<script src="../day39/获取元素.js"></script>
<script>
    var but = my$('button')
    // var show =my('.show')
    // var hidd =my$('.hidd')
    // var box = my$('.box')
    var flag=0
    but.onclick=function () {
        if(flag===0){
            but.innerText='显示'
            flag=1
            // box.style.opacity='0';
            my$('.box').className='box hidd'
            console.log(flag)
        }
        else if (flag===1){
            but.innerText='隐藏'
            flag=0
            // box.style.opacity='1';
            my$('.box').className='box show'
            console.log(flag)
        }
    }
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43800846/article/details/89002705
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022