Web前端——JavaScript练习

程序员文章站 2022-05-15 14:22:41

Js练习显示和隐藏，改变display属性(点击查看图片) 关键代码：源码： "querySelector三种方法介绍" 鼠标滑动更改内容 onmouseover 关键： onmouse事件时间自动更新关键代码： Js中内置了Date对象 getFullYear 年 getMonth 月 g ......

js练习

显示和隐藏，改变display属性(点击查看图片)

关键代码：

e.style.display = "block";
e.style.display = "none";

源码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>显示和隐藏</title>
        <script type="text/javascript">
            function showpicture(){
                //普通方式获得控件实例
                var e = document.getelementbyid("myimg");
                e.style.display = "block";
            }
            
            function hidepicture(){
                //queryselector是html5增加的
                //id前面得写#,class前面得写
                document.queryselector("#myimg").style.display = "none";
                //标签直接写即可,获取到第一个img标签
                //document.queryselector("img").style.display = "none";
            }
        </script>
    </head>
    <body>
        <a href="javascript:void(0);"onclick="showpicture()">查看图片</a>
        <a href="javascript:void(0);"onclick="hidepicture()">隐藏图片</a>
        <br />
        <img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;"  >
    </body>
</html>

queryselector三种方法介绍

鼠标滑动更改内容 onmouseover

关键：
onmouse事件

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function movetoblue(){
                var e = document.queryselector("#btn_blue");
                var e2 = document.queryselector("#btn_green");
                var div = document.queryselector("#content");
                e.style.border = "1px solid #ccc";
                e.style.backgroundcolor = "white";
                e2.style.border = "none";
                e2.style.backgroundcolor = "none";
                div.style.backgroundcolor = "blue";
            }
            function movetogreen(){
                var e = document.queryselector("#btn_blue");
                var e2 = document.queryselector("#btn_green");
                var div = document.queryselector("#content");
                e2.style.border = "1px solid #ccc";
                e2.style.backgroundcolor = "white";
                e.style.border = "none";
                e.style.backgroundcolor = "none";
                div.style.backgroundcolor = "green";
            }
        </script>
    </head>
    <body>
        <div style="width: 100px;height: 50px;">
            <button id="btn_blue" style="width: 45px;"onmousemove="movetoblue()">蓝色</button>
            <button id="btn_green" style="width: 45px;"onmousemove="movetogreen()">绿色</button>
            <div id="content" style="background-color: blue;width: auto;height: 50px;"></div>
        </div>

        <br />
        <img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;">
    </body>
</html>

时间自动更新

关键代码：
js中内置了date对象

getfullyear 年
getmonth 月
getdate 日
gethours 小时
getminutes 分钟
getseconds 秒
getday 星期几（0-6）星期日为0

方法	说明
getfullyear()	从 date 对象以四位数字返回年份。
getmonth()	从 date 对象返回月份 (0 ~ 11)。
getdate()	从 date 对象返回一个月中的某一天 (1 ~ 31)。
getday()	从 date 对象返回一周中的某一天 (0 ~ 6)。
gethours()	返回 date 对象的小时 (0 ~ 23)。
getminutes()	返回 date 对象的分钟 (0 ~ 59)。
getseconds()	返回 date 对象的秒数 (0 ~ 59)。
getmilliseconds()	返回 date 对象的毫秒(0 ~ 999)。
tostring()	把 date 对象转换为字符串。
totimestring()	把 date 对象的时间部分转换为字符串。
todatestring()	把 date 对象的日期部分转换为字符串。
toutcstring()	根据世界时，把 date 对象转换为字符串。
tolocalestring()	根据本地时间格式，把 date 对象转换为字符串。
tolocaletimestring()	根据本地时间格式，把 date 对象的时间部分转换为字符串。
tolocaledatestring()	根据本地时间格式，把 date 对象的日期部分转换为字符串。

 var now = new date();

 var time =now.getfullyear() + '年' + now.getmonth() + '月'
     + now.getdate() + '日'
     +now.gethours() +'时' + now.getminutes() +'分' + now.getseconds() + '秒';

settomeout(fn, 周期：豪秒): 周期只会执行一次
setinterval(fn, 周期：豪秒)：间隔周期一直执行

源码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>时间自动更新</title>
    </head>
    <body>
        <p></p>
        <script type="text/javascript">
            function settime() {
                var date = new date();
                var time = date.totimestring();
                document.queryselector("p").innertext = time;
            }
            settime();
            //setiime不能加上括号
            // setinterval(settime, 1000);
            //加括号得得在外层加双引号或者单引号
            setinterval("settime()", 1000);
        </script>
    </body>
</html>

源码（es拼接字符串）：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

    </head>
    <body>
        <p></p>
        <script type="text/javascript">
            function settime() {
                var now = new date();
                // 通过css的选择符获得html元素
                var timer1 = document.queryselector('p');
                var year = now.getfullyear();
                var month = now.getmonth() + 1;
                var date = now.getdate();
                var hours = now.gethours();
                var minutes = now.getminutes();
                var seconds = now.getseconds();
                //es6中模板字符串,拼接
                timer1.innertext = `${year}年${month}月${date}日${hours}时${minutes}分${seconds}秒`;
            }
            settime();
            //setiime不能加上括号
            // setinterval(settime, 1000);
            //加括号得得在外层加双引号或者单引号
            setinterval("settime()", 1000);
        </script>
    </body>
</html>

表单

关键代码：e.checked=true;

全选和反选的实现

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function selectall() {
                var hobbys = document.getelementsbyname("hobby");
                var btn = document.getelementbyid("checkall");
                //原生for,推荐使用这一种
                /*
                for (var i = 0; i < hobbys.length; i++) {
                    if (btn.checked) {
                        hobbys[i].checked = true;
                    } else {
                        hobbys[i].checked = false;
                    }

                }
                */
                //使用foreach,使用hbuilderx,在内置的浏览器会报错,提示foreach不起作用
                //使用谷歌浏览器打开则没有问题,下面使用lambda也是如此情况,可能是hbuilder的bug
                hobbys.foreach(function(hobby) {
                    //如果全选的是选中,则把全部设置为选中的状态,否则设置为未选中
                    if (btn.checked) {
                        hobby.checked = true;
                    } else {
                        hobby.checked = false;
                    }
                });
                //使用lambda
                /*
                hobbys.foreach((hobby) => {
                    console.log(hobby);
                    if (btn.checked) {
                        hobby.checked = true;
                    } else {
                        hobby.checked = false;
                    }
                });
                */

            }

            function selectrevese() {
                var hobbys = document.getelementsbyname("hobby");
                for (var i = 0; i < hobbys.length; i++) {
                    //设置为另外的状态
                    hobbys[i].checked = !hobbys[i].checked;
                }
            }
        </script>
    </head>
    <body>

        <input type="checkbox" name="hobby">读书<br><br>
        <input type="checkbox" name="hobby">电影<br><br>
        <input type="checkbox" name="hobby">游戏<br><br>
        <input type="checkbox" name="hobby">游泳<br><br>
        <input type="checkbox" name="hobby">写代码<br><br>
        <input type="checkbox" id="checkall" onclick="selectall()">全选 </input>
        <button type="button" onclick="selectrevese()">反选</button>


    </body>
</html>

上一篇： sql server使用公用表表达式CTE通过递归方式编写通用函数自动生成连续数字和日期

下一篇： C#敏感词过滤实现方法

Web前端——JavaScript练习

js练习

显示和隐藏，改变display属性(点击查看图片)

鼠标滑动更改内容 onmouseover

时间自动更新

表单

提高Web性能的前端优化技巧总结

javascript基础练习之翻转字符串与回文

javascript基础修炼(6)——前端路由的基本原理

JavaScript在web自动化测试中的作用示例详解

前端培训要多少钱（web前端培训班教程）

web应用开发技术有哪些（web前端三大主流框架）

前端笔记知识点整合之JavaScript（七）深入函数&DOM那点事

撩课-Web大前端每天5道面试题-Day6

【代码笔记】Web-JavaScript-JavaScript字符串

web应用开发技术有哪些（web前端三大主流框架）