HTML-JS-CODING

Posted 2020-09-23 ezway

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML-JS-CODING相关的知识，希望对你有一定的参考价值。

day28　　　　　　　　　　

获取属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ip{
            color: rgba(0,0,0,0.4);
        }
        .hide{
            display: none;
        }
    </style>
</head>


<body>
    <input type="text" id="1" class="ip" onfocus="Fo(this)" onblur="Bl(this)" value="come on"/>
    <input type="button" onclick="Change()" value="change">
    <input type="button" onclick="Run()" id="r">

    <div id="q">
        <div class="c1">2333333</div>
        <div class="c1" d="1">2333333</div>
        <div class="c1">2333333</div>
        <div class="c1" d="1">2333333</div>
        <div class="c1">2333333</div>
        <div class="c1">2333333</div>
    </div>
    <script>
        function Fo(arg) {
            arg.className="";
            if (arg.value==‘come on‘){
                arg.value="";
            }
            else {
                arg.className="";
            }


        }
        function Bl(arg) {
            if (arg.value==‘come on‘ || arg.value.trim()==‘‘){
                    arg.value="come on";
                    arg.className="ip";
            }
        }
        function Change() {
            var q=document.getElementById(‘q‘);
            var divs=q.children;
    console.log(divs);
            for(var i=0;i<divs.length;i++){
                var current_div=divs[i];
                var attr=current_div.getAttribute(‘d‘);
        console.log(attr);
                if(attr==‘1‘){
                    current_div.innerText=document.getElementById(‘1‘).value;
                }
            }

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

View Code

全选反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="全选" onclick="Checkall();">
        <input type="button" value="取消" onclick="Reversall();">
        <input type="button" value="反选" onclick="Cancelall();">

    </div>
    <table>
        <thead>
        <tr>
            <th>喜欢</th>
            <th>名字</th>
            <th>你的</th>

        </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input class="c1" type="checkbox">

                </td>
                <td>jiji</td>
                <td>16</td>
                <td>slim</td>


            </tr>
            <tr>
                <td><input class="c1" type="checkbox">

                </td>
                <td>jiji</td>
                <td>16</td>
                <td>slim</td>


            </tr>
            <tr>
                <td><input class="c1" type="checkbox">

                </td>
                <td>jiji</td>
                <td>16</td>
                <td>slim</td>


            </tr>

        </tbody>
    </table>
    <script>
        function Checkall() {
            var tb=document.getElementById(‘tb‘);
            var checks=tb.getElementsByClassName(‘c1‘);
            for(var i=0;i<checks.length;i++){
                var currentc=checks[i];
                currentc.checked=true

            }

        }
        function Reversall() {
            var tb=document.getElementById(‘tb‘);
            var checks=tb.getElementsByClassName(‘c1‘);
            for(var i=0;i<checks.length;i++){
                var currentc=checks[i];
                currentc.checked=false

            }

        }
        function Cancelall() {
            var tb=document.getElementById(‘tb‘);
            var checks=tb.getElementsByClassName(‘c1‘);
            for(var i=0;i<checks.length;i++){
                var currentc=checks[i];
                if (currentc.checked){
                    currentc.checked=false;
                } else{
                    currentc.checked=true;
                }

            }

        }

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

View Code

添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text">
        <input type="button" value="add" onclick="Add(this)"  onkeydown="Add(this)">

    </div>
    <div>
        <ul id="clis">
            <li>atmosphere</li>
            <li>cloud</li>
        </ul>
    </div>

    <script>
        function Add(self) {
            var val= self.previousElementSibling.value;
            self.previousElementSibling.value=‘‘;
            var str=‘<li>‘+val+‘</li>‘;
            var clis=document.getElementById(‘clis‘);
            clis.insertAdjacentHTML("beforeEnd",str);
            clis.appendChild(val)//第二种添加

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

View Code

输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .g{
            color: lightgray;
        }
        .b{
            color: #000;
        }
        .w{
            background-color: #cccccc;
            color: #000;
            text-align: center;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入鸡鸡"/>
    <!--不是每个浏览器都支持这个-->
    <p>当鼠标进入时，移除内容 /n
        当鼠标退出时，添加内容</p>
    <input id="i" type="text" class="g" value="请输入鸡鸡" onfocus="Focus(this);" onblur="Blur(this)" />
    <input type="button" value="change" onclick="Change()" >
    <hr>
    <div class=‘w‘ id="1"  >
        来呀~造作呀
    </div>
    <script>
        function Focus(arg){
            arg.className="b";
            var current_val= arg.value;
            console.log(current_val);
            if(current_val==‘请输入鸡鸡‘){
                arg.value="";
            }
        }
        function Blur(arg) {
            var current_val= arg.value;
            if(current_val==‘请输入鸡鸡‘||current_val.trim().length==0){
                arg.value=‘请输入鸡鸡‘;
                arg.className=‘g‘
            }
        }
        function Change() {
            d=document.getElementById(‘1‘);

                console.log(d_text)
            ip=document.getElementById(‘i‘);
            ip_text=ip.value;
                console.log(ip_text)
            if (ip_text !=‘请输入鸡鸡‘){
                d.innerText=ip_text
                console.log(d_text)
            }
        }
        setInterval( function (){
            d=document.getElementById(‘1‘);
            d_text=d.innerText;
            sub_char=d_text.slice(1,d_text.length);
            first_char=d_text[0];
            new_str=sub_char+first_char;
            d.innerText=new_str
       },300);
//        setInterval(
//            function () {
//                var c=document.getElementsById(‘w‘)
//                var ip=document.getElementById(‘i‘)
//                c_text=c.innerText
//                ip_text=ip.value
//            }
//        )
    </script>
</body>
</html>

View Code

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .gotop{
            position:fixed;
            right: 28px;
            bottom: 19px;
            width: 40px;
            height: 40px;
            background: #000;
            color: #ffffff;

        }
        .hide{
            display: none;

        }
    </style>
</head>
<body onscroll="Show()">
    <div id="i1" style="height: 20000px;">
        <h1>7899789979889</h1>
    </div>
    <div id="i2" class="gotop hide" >
        <a onclick="Gtop()">回去</a>
    </div>
    <script>
        function Show() {
            var scrolltop=document.body.scrollTop;
            var i=document.getElementById(‘i2‘);
            if(scrolltop>100){
                i.classList.remove(‘hide‘);

            }else{
                i.classList.add(‘hide‘);
            }
        }
        function Gtop() {
            document.body.scrollTop=0

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

View Code

高度相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
            background-color: #dddddd;
        }
        .pg-header{
            background-color: black;
            color: #ffffff;
            height: 50px;
        }
        .pg-body .menu{
            position: absolute;
            left: 200px;
            width: 180px;
            background-color: white;
            float: left;

        }
        .pg-body .content{
            position: absolute;
            right: 200px;
            left: 389px;
            background-color: white;
            float: left;
        }
        .pg-body .content .item{
            height: 900px;
        }
        .pg-body .fix{
            position: fixed;
            top: 3px;
        }
        .active{
            background-color: #447e9b;
            color: #ffffff;
        }
    </style>
</head>
<body onscroll="Go();">
        <div class="pg-header"></div>
        <div class="pg-body">
            <div id="menu" class="menu">
                <div >第一章</div>
                <div>第二章</div>
                <div id=‘2‘>第三章</div>
            </div>
            <div id="content" class="content">
                <div class="item">wowowoowowowowowoww</div>
                <div class="item">cvbcvbcvbnbcvbcvbcvbcvbcbc</div>
                <div  class="item" style="height: 100px;">lilililiilloliloiliolioiolilili</div>
                <div></div>
            </div>
        </div>
    <script>
        function Go() {
            var Go=document.body.scrollTop;
            var menu=document.getElementById(‘menu‘);
            if(Go>50){
//                console.log(menu);
//                a.classList.add(‘fix‘);
                menu.classList.add(‘fix‘)

            }else {
                menu.classList.remove(‘fix‘)

            }
            var item= document.getElementById(‘content‘).children
            for (var i=0;i<item.length;i++){
                var currentItem=item[i];
                var currentItemBodyTop=currentItem.offsetTop+currentItem.offsetParent.offsetTop;
                var currentItemWindowTop=currentItemBodyTop-Go;
                var currentH=currentItem.offsetHeight;
                var bottomH=currentItemBodyTop+currentH;
                if (currentItemWindowTop<0 && Go<bottomH){
                    var my=menu.getElementsByTagName(‘div‘)[i];
                        my.className=‘active‘;
                    var lis=menu.getElementsByTagName(‘div‘);
                    var d2=document.getElementById(‘2‘)
                    d2h=d2.scrollTop
                    console.log(bottomH,1,Go,d2h )
                    for (var j=0;j<lis.length;j++){
                        if(lis[j]==my){

                        }
                        else {
                        lis[j].classList.remove(‘active‘);
                    }
                       if (Go>currentH){
                            lis[j].className=‘‘
                            d2.className=‘active‘
                       }
                    }
                    break;
                }

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

View Code

跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .g{
            background-color: #cccccc;
            color: #000;
            text-align: center;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div class=‘g‘ id="1">
        来呀~造作呀
    </div>
    <script>
       setInterval( function (){
            d=document.getElementById(‘1‘);
            d_text=d.innerText;
            sub_char=d_text.slice(1,d_text.length);
            first_char=d_text[0];
            new_str=sub_char+first_char;
            d.innerText=new_str
       },300);

//       li=[11,22,33,44]
//        for(var l=1;l<10;l++){
//           console.log(l)
//        }
       //面向对象 prototype 原型
        function Fc(name,words) {
            this.Name =name;
            this.Words =words;
        }
        Fc.prototype={
            G: function () {
             return this.Name+this.Words
         }
        };
        a=new Fc(‘jiji‘,‘gogogogoge‘);
        ret=a.G();
        console.log(ret)
    </script>
</body>
</html>

View Code

以上是关于HTML-JS-CODING的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数