Java Script/Html 多种基础页面属性-蒲公英云

Java Script/Html 多种基础页面属性

叁歲伎倆 2022-07-16 07:48 232阅读 0赞

完成效果：利用java script在页面做出各种不同的小效果。

1.输入用户名和密码，显示所输入的用户名和密码

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkUser() {
        var name=document.getElementById("name");
            var pwd=document.getElementById("pwd");
            alert("用户名："+name.value+"密码:"+pwd.value);
        }
    </script>
</head>
<body>
用户名 <input type="text" id="name">
密码：<input type="password" id="pwd">
<input type="button" value="获取用户信息" οnclick="checkUser()">
</body>
</html>

效果如下：

2.输出Json数据

代码：

var text = '{"employees":[' +
                '{"firstName":"John","lastName":"Doe" },' +
                '{"firstName":"Anna","lastName":"Smith" },' +
                '{"firstName":"Peter","lastName":"Jones" }]}';
        function getJson() {
            var json = JSON.parse(text);
            alert(json.employees[0].firstName+"  "+json.employees[0].lastName);
        }

效果：

3.获得当前日期

代码：

function getDate() {
            var date=new Date();
            alert(date);
        }

效果：

4.设置删除选项

代码：

function del() {
            var s=confirm("确定要删除么?");
            if(s){
                alert("删除成功");
            }else {
                alert("已取消");
            }
        }

效果：

5.打开新窗口和关闭当前窗口

代码：

function openWindow() {
            window.open("http://www.baidu.com","我的百度");
        }
        function closeWindow() {
            window.close();
        }

效果：

点击打开新窗口按钮，会直接跳到所输入地址的网页。

6.设置cookie和读取cookie

代码：

function setCookie() {
            document.cookie="张三丰";
        }
        function getCookie() {
            var str=document.cookie;
            alert(str);
        }

效果：

7.改变div背景颜色，并插入字体。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function change() {
            var obj=document.getElementById("div");
            obj.style.backgroundColor="red";
            obj.innerHTML="插入Html";
        }
    </script>
</head>
<body>
<input type="button" value="改变div背景颜色" οnclick="change()">
<div id="div" style="background-color: orange;width: 200px;height: 200px">
</div>
</body>
</html>

效果：

8.增加table中行的个数，删除table。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addRow() {
            var tab1=document.getElementById("tab1");
            var row=tab1.insertRow(0);
            var c1=row.insertCell(0);
            var c2=row.insertCell(1);
            var c3=row.insertCell(2);
            c1.innerText="a";
            c2.innerText="b";
            c3.innerText="c";
        }
        function delTable() {
            var del=document.getElementById("tab1")
            document.body.removeChild(del);
        }
    </script>
</head>
<body>
<input type="button" value="增加行的个数" οnclick="addRow()">
<input type="button" value="删除table" οnclick="delTable()">
<table id="tab1" style="border: 1px solid blue;float: left"width="300px">
    <tr>
        <td width="100px">1</td>
        <td width="100px">2</td>
        <td width="100px">3</td>
    </tr>
    <tr>
        <td width="100px">1</td>
        <td width="100px">2</td>
        <td width="100px">3</td>
    </tr>
    <tr>
        <td width="100px">1</td>
        <td width="100px">2</td>
        <td width="100px">3</td>
    </tr>
</table>
</body>
</html>

效果：

原有效果

Center 10

每点击一次增加一行

Center 11

删除后效果

9.跳转到自己所写的html中/跳转到自己所写的html中（在另一个浏览器打开）

代码：

function go() {
            window.location.href="弹性盒模型.html";
        }
        function go2() {
            window.open("弹性盒模型.html",500,600);
        }

10.获取当前窗口的高度和宽度

代码：

function getWinH() {
            alert( screen.width);
            alert( screen.height);
        }

效果：

11.将鼠标移动悬停到div上时，显示当前位置的xy坐标

代码：

function getXY() {
            alert(event.clientX+"  "+event.clientY);
        }
<div style="width: 200px;height: 200px;background-color: orange"
 οnclick="getXY(event)" οnmοusemοve="getXY(event)">
</div>