JavaScript小功能总结

最新推荐文章于 2021-03-27 20:52:00 发布

旋律~学

最新推荐文章于 2021-03-27 20:52:00 发布

阅读量245

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42429369/article/details/84947790

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.实现选择列表项并显示出来

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function one(name){
            alert(name.value);
        }
    </script>
</head>
<body>
<input type="button" id="one" value="按钮一" onclick="one(this)">
<input type="button" id="two" value="按钮二" onclick="one(this)">
<input type="button" id="three" value="按钮三" onclick="one(this)">
</body>
</html>

显示结果：
在这里插入图片描述

2.数字长度验证

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    function changdu(){
       var length=document.getElementById("changdu").value.length;
       var div=document.getElementById("div");
        if(length<5){
            div.innerHTML="数据长度小于5".fontcolor("red");
        }
        else{
            div.innerHTML="数据验证通过".fontcolor("green");
        }
    }
</script>
<body>
请输入字符：
<input type="text" id="changdu" onblur="changdu()">
<div id="div"></div>
</body>
</html>

在这里插入图片描述

3.部分样式规则

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--第一个样式表-->
    <style>
        .red{
            width: 200px;
            height: 300px;
            background: red;
        }
    </style>
    <!--第二个样式表-->
    <style>
        .red {
            width: 200px;
            height: 300px;
            background: green;
        }
    </style>
    <script>
        //选中第二个样式表
        var sheet=document.styleSheets[1];
        function red(){
            //第二个样式表（绿）失效为真
            sheet.disabled=true;
        }
        function green(){
            //第二个样式表（绿）失效为假
            sheet.disabled=false;
        }
        function add(){
            //添加规则
            var sheet=document.styleSheets[0];
            var sheet1=document.styleSheets[1];
            /*第二个参数代表在样式表的第几行插入这句话*/
            sheet.insertRule(".red{border: 2px solid black}",1);
            sheet1.insertRule(".red{border: 2px solid black}",1);

        }
        function del(){
            //删除规则
            var sheet=document.styleSheets[0];
            var sheet1=document.styleSheets[1];
            sheet.deleteRule(1);
            sheet1.deleteRule(1);
        }

    </script>
</head>
<body>
<input class="red" type="text" >
<br/>
<input type="button" value="红色" onclick="red()">&nbsp;
<input type="button" value="绿色" onclick="green()">&nbsp;
<input type="button" value="添加样式规则" onclick="add()"/>&nbsp;
<input type="button" value="删除样式规则" onclick="del()"/> <br/>
</body>
</html>

在这里插入图片描述

4.字体悬浮放大，背景颜色改变，点击放大字体

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>

        function over(){
            var el=document.getElementById("div");
            el.style.fontSize="30px";
        }
        function out(){
            var el=document.getElementById("div");
            /*可省略，默认16px*/
            el.style.fontSize="16px";
        }

        function change(){
            var b=document.getElementById("bod");
            b.style.backgroundColor="black";
        }
        function recover(){
            var b=document.getElementById("bod");
            b.style.backgroundColor="white";
        }
        var size=16;
        function big(){
            var el=document.getElementById("div1");
            size=size+5;
            //拼接字符串
            el.style.fontSize=size+"px";
        }
        function small(){
            var el=document.getElementById("div1");
            size=size-5;

            el.style.fontSize=size+"px";
        }
    </script>
</head>
<body id="bod">
<div id="div" onmouseover="over()" onmouseout="out()">悬浮放大</div>
<div id="div1">百度一下</div>
<input type="button" value="改变颜色" onclick="change()"/>
<input type="button" value="恢复颜色" onclick="recover()"/>
<input type="button" value="变大" onclick="big()"/>
<input type="button" value="变小" onclick="small()"/>
</body>
</html>

在这里插入图片描述

5.勾选爱好自动显示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function check() {
            var hobbys=document.getElementsByName("aihao");
            var div=document.getElementById("div");
            var msg="";
            for(var i=0;i<hobbys.length;i++){
                //是否被选中
                if(hobbys[i].checked==true)
                    msg+=hobbys[i].value+" ";
            }
            div.innerHTML="您的爱好是:"+msg;
        }

    </script>
</head>
<body>
<!--复选框name值必须相同-->
<input type="checkbox"name="aihao" value="登山" onchange="check()">登山
<input type="checkbox" name="aihao" value="游泳" onchange="check()">游泳
<input type="checkbox" name="aihao" value="看书" onchange="check()">看书
<input type="checkbox" name="aihao" value="钢琴" onchange="check()">钢琴
<div id="div"></div>
</body>
</html>

在这里插入图片描述

6.好玩的二级省市联动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>

        var p=["河北省","山西省","山东省"];
        var c=[["石家庄","邯郸"],["大同","临汾"],["青岛","济南"]];
        // window.onload:随着页面加载而加载
        window.onload=function(){
            for(var i =0;i< p.length;i++ ){
                //创建一个便签
                var p1 =document.createElement("option");
                //创建一个文本节点（即标签的内容）
                var txt =document.createTextNode(p[i]);
                //内容放进标签
                p1.appendChild(txt);
                //标签放进pros
                pros.appendChild(p1);
            }
            //默认加载页面c[0]个城市
            for(var i =0;i< c[0].length;i++ ){
                var p1 =document.createElement("option");
                var txt =document.createTextNode(c[0][i]);
                p1.appendChild(txt);
                citys.appendChild(p1);
            }
        };
        function change2(){
            while(citys.hasChildNodes()){
                //先移除默认的c[0]城市
                citys.removeChild(citys.firstChild);
            }
            //获取省份的下标
            var index=pros.selectedIndex;
            //根据省份下标查询对应城市并遍历
            for(var i=0;i< c[index].length;i++ ){
                var p1=document.createElement("option");
                var txt=document.createTextNode(c[index][i]);
                p1.appendChild(txt);
                citys.appendChild(p1);
            }
        }
    </script>
</head>
<body>
<select id="pros" onchange="change2()"></select>
<select id="citys" onchange=></select>
</body>
</html>

在这里插入图片描述

7. 增删节点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function create(){
            //创建一个节点
            var p1=document.createElement("p");//p是段落标签
            var txt=document.createTextNode("这是一个段落");
            //p1节点添加一个名为txt的子节点。
            p1.appendChild(txt);
            //div添加p1
           document.getElementById("div").appendChild(p1);
        }
        function del(){
            var div=document.getElementById("div");
            div.removeChild(div.lastElementChild);
        }
    </script>
</head>
<body>
<input type="button" value="创建节点" onclick="create()"/>
<input type="button" value="删除节点" onclick="del()"/>
<div id="div"></div>
</body>
</html>

在这里插入图片描述

8.获取系统时间

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function test(){
            var now=new Date();
            //获取年份
            var y=now.getFullYear();
            //获取月份需加1
            var m=now.getMonth()+1;
            var d=now.getDay();
            var h=now.getHours();
            var mi=now.getMinutes();
            var s=now.getSeconds();
            //个位数是时前边补0
            if(m<10) m="0"+m;
            if(d<10) d="0"+d;
            if(h<10) h="0"+h;
            if(mi<10) mi="0"+mi;
            if(s<10) s="0"+s;
            //字符串拼接起来
            var str=y+"年"+m+"月"+d+"日"+h+"时"+mi+"分"+s+"秒";
            document.getElementById("div").innerHTML=str;
        }
    </script>
</head>
<!--每隔1s执行一次test-->
<body onload="setInterval(test,1000)">
<div id="div"></div>
</body>
</html>

在这里插入图片描述

9.动态生成表格，模拟新增用户并做相应修改（初级版）

点击修改会把密码改为hello

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function add(){
            //获取名字，密码
            var name=myName.value;
            var pass=myPassword.value;
            newTr(name,pass);
        }
            function newTr(name,pass){ //传参
                //创建一行四列的表格
                var ntr=document.createElement("tr");
                var nametd=document.createElement("td");
                var passtd=document.createElement("td");
                var deltd=document.createElement("td");
                var updtd=document.createElement("td");
                //创建文本节点存放账号密码
                var nametxt=document.createTextNode(name);
                var passtxt=document.createTextNode(pass);
                //创建input标签
                var delbtn=document.createElement("input");
                var updbtn=document.createElement("input");
                //inpu标签的类型设置为button，值value
                delbtn.type="button";
                delbtn.value="删除";
                //点击删除按钮触发此事件
                delbtn.onclick=function () {
                    if(confirm("确定删除吗？")){
                        //在myContent里把子节点删除
                        //需删除的子节点为：此节点的父节点的父节点，即delbtn->deltd->ntr,即删除这一行元素
                        myContent.removeChild(this.parentNode.parentNode);
                }
            }
                updbtn.type="button";
                updbtn.value="修改密码";
                //点击修改按钮触发此事件
                updbtn.onclick=function () {
                    var newpass=document.createTextNode("hello");
                    this.parentNode.parentNode.childNodes[1].replaceChild(newpass,this.parentNode.parentNode.childNodes[1].firstChild);
                }
                nametd.appendChild(nametxt);
                passtd.appendChild(passtxt);
                deltd.appendChild(delbtn);
                updtd.appendChild(updbtn);
                ntr.appendChild(nametd);
                ntr.appendChild(passtd);
                ntr.appendChild(deltd);
                ntr.appendChild(updtd);
                myContent.appendChild(ntr);
            }

    </script>
</head>
<body>
<h3>新增用户</h3>
用户名：<input type="text" id="myName" /><br>
密码：<input type="text" id="myPassword" /><br>
<input type="button" onclick="add()" value="新增" />
<table>
    <tbody id="myContent">
    <tr>
        <td>
            账号
        </td>
        <td>
            密码
        </td>
        <td>
            删除
        </td>
        <td>
            修改
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

在这里插入图片描述

10.极简单的表单验证功能

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function check() {
            if(uname.value.length>0&&upass.value.length>0&&upass.value==upasstoo.value){
                return true;
            }
            else if(uname.value.length<=0){
                document.getElementById("d0").innerHTML="请输入账号".fontcolor("red");
                return false;
            }
            else if(upass.value.length<=0) {
                document.getElementById("d1").innerHTML = "请输入密码".fontcolor("red");
                return false;
            }
            else if(upass.value!=upasstoo.value){
                document.getElementById("d2").innerHTML = "两次密码不一致".fontcolor("red");
                return false;
            }
            else return false;
        }
    </script>
</head>
<body>
<form action="success.html" method="get" onsubmit="return check()">
    <h1>注册页面</h1>
    用 户 名 ： <input type="text" name="uname"id="uname"><br>
    <div id="d0"></div>
    输入密码：<input type="text" name="upass"id="upass"><br>
    <div id="d1"></div>
    确认密码：<input type="text" name="upasstoo" id="upasstoo"><br>
    <div id="d2"></div>
    <input type="submit">

</form>
</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
注册成功..
</body>
</html>

在这里插入图片描述

11.正则表达式部分简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function check(){
            //   /g是全局匹配，不仅是第一个
            reg=/abc/g;
            //匹配0-9之间的数字出现2-4次即可
            reg1=/[0-9]{2,4}/;
            //控制台打印
            //把匹配到reg的替换为“ok”
            console.log(d0.value.replace(reg,"ok"));
            //serach定位下标，括号里是正则
            console.log(d0.value.search(reg1));
            //测试reg1是否与d0的值匹配
            console.log(reg1.test(d0.value));

        }
        function  test() {
            reg2=/龙的传人/;
            //serach定位下标，括号里是正则
            d2.innerHTML=d1.value.search(reg2);
        }
        function test2() {
            //index of也是定位下标，括号里是字符串
            d4.innerHTML=d3.value.indexOf("龙的传人");
        }

        

    </script>
</head>
<body>
<input type="text" id="d0" onblur="check()">
<br>
<input type="text" value="遥远的东方有一群人，他们都是龙的传人！" id="d1" onblur="test()"><br>
<input type="text" value="遥远的东方有一群人，他们都是龙的传人！" id="d3" onblur="test2()">

<div id="d2"></div>
<div id="d4"></div>
</body>
</html>

在这里插入图片描述
关于正则匹配这块网上代码很容易找到，了解即可

12.1 Json初识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //Json  （key value）都用引号括住
        var s1={"name":"zhangsan","age":20};
        //遍历s1
        for(var i in s1){
            console.log(i+" "+s1[i]);
        }
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

12.2 json字符串与对象间的转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var fcar='{"brand":"本田","color":"black" }';
        //Json字符串转化为对象
        var tcar=JSON.parse(fcar);
        console.log(tcar);
        //Json对象转化为字符串
        var rcar=JSON.stringify(tcar);
        console.log(rcar);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

旋律~学

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript小功能总结

1.实现选择列表项并显示出来&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head lang=&quot;en&quot;&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;
复制链接

扫一扫