前端小例子 基础js css html练习

时间：2021-08-23 12:59:50

前情提要:

　　学前端也有一阵了,个人感觉前端还是重要的.

　　html 学习教程

https://www.cnblogs.com/baili-luoyun/p/10466040.html

　　css 教程

　　js 教程

https://www.cnblogs.com/baili-luoyun/p/10453714.html

　　本次主要是分享几个综合小例子

案例一:

　　js的事件交互

　　知识点:

前端小例子 基础js css html练习

　　代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js </title>

    <script>

        function cherkname(username) {

            if (username==''){

                alert("用户名不能为空")

            }

        }

    </script>

</head>

<body onload="alert('页面全部加载完成')">

    用户名:<input type="text" value="小宝" onfocus="this.value=''" onblur="cherkname(this.value)">

</body>

</html>

　　　　前端小例子 基础js css html练习

案例二:

利用math 对象  选择  循环等进行判断数字

代码:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>猜数字游戏</title>

    <style>

        html {

            font-family: sans-serif

        }

        body {

            width: 50%;

            max-width: 800px;

            min-width: 480px;

            margin: 0 auto

        }

        .lastResult {

            color: white;

            padding: 3px

        }

    </style>

</head>

<body>

<h1>猜数字游戏</h1>

<p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>

<div class="form">

    <label for="guessField">请猜数: </label>

    <input type="text" id="guessField" class="guessField">

    <input type="submit" value="确定" class="guessSubmit">

</div>

<div class="resultParas">

    <p class="guesses"></p>

    <p class="lastResult"></p>

    <p class="lowOrHi"></p>

</div>

<script>

    // 开始编写 JavaScript 代码

    let randomNumber = Math.floor(Math.random() * 100) + 1;

    const guesses = document.querySelector('.guesses');

    const lastResult = document.querySelector('.lastResult');

    const lowOrHi = document.querySelector('.lowOrHi');

    const guessSubmit = document.querySelector('.guessSubmit');

    const guessField = document.querySelector('.guessField');

    let guessCount = 1;

    let resetButton;

    function checkGuess() {

        let userGuess = Number(guessField.value);

        if (guessCount === 1) {

            guesses.textContent = '上次猜的数：';

        }

        guesses.textContent += userGuess + ' ';

        if (userGuess === randomNumber) {

            lastResult.textContent = '恭喜你！猜对了';

            lastResult.style.backgroundColor = 'green';

            lowOrHi.textContent = '';

            setGameOver();

        } else if (guessCount === 10) {

            lastResult.textContent = '!!!GAME OVER!!!';

            setGameOver();

        } else {

            lastResult.textContent = '你猜错了！';

            lastResult.style.backgroundColor = 'red';

            if (userGuess < randomNumber) {

                lowOrHi.textContent = '你猜低了！';

            } else if (userGuess > randomNumber) {

                lowOrHi.textContent = '你猜高了';

            }

        }

        guessCount++;

        guessField.value = '';

        guessField.focus();

    }

    guessSubmit.addEventListener('click', checkGuess);

    function setGameOver() {

        guessField.disabled = true;

        guessSubmit.disabled = true;

        resetButton = document.createElement('button');

        resetButton.textContent = '开始新游戏';

        document.body.appendChild(resetButton);

        resetButton.addEventListener('click', resetGame);

    }

    function resetGame() {

  guessCount = 1;

  const resetParas = document.querySelectorAll('.resultParas p');

  for (let i = 0 ; i < resetParas.length; i++) {

    resetParas[i].textContent = '';

  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;

  guessSubmit.disabled = false;

  guessField.value = '';

  guessField.focus();

  lastResult.style.backgroundColor = 'white';

  randomNumber = Math.floor(Math.random() * 100) + 1;

}

</script>

</body>

</html>

前端小例子 基础js css html练习

案例三:

创建按钮 切换图片

知识点 数组 自增加

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload = function () {

            let img1 = document.getElementsByTagName("img")[0];

            let left = document.getElementById("bt1");

            let right = document.getElementById("bt2");

            let num = 0;

            let arrimg = ["image/1.jpg", "image/2.jpg"

                , "image/3.jpg", "image/4.jpg", "image/5.jpg"];

            let text = document.getElementById("ye");

            text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";

            function left1() {

                num--;

                if (num < 1) {

                    num = 0;

                }

                img1.src = arrimg[num];

                text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";

            }

            function right1() {

                num++;

                if (num == arrimg.length) {

                    num = 0

                }

                img1.src = arrimg[num];

                text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";

            }

            left.onclick = function () {

                left1()

            };

            right.onclick = function () {

                right1()

            }

        }

    </script>

    <style>

        .dd1 {

            width: 500px;

            height: 500px;

            text-align: center;

            background-color: #00c4ff;

            margin: 30px auto;

        }

        img {

            width: 400px;

            height: 400px;

        }

        #an {

            margin-top: 20px;

        }

        .bt {

            padding: 20px;

            margin-left: 10px;

        }

    </style>

</head>

<body>

<div class="dd1">

    <div id="t1">

        <img src="data:image/1.jpg">

    </div>

    <div id="an">

        <span id="ye">图片1</span>

        <button class="bt" id="bt1">上一页</button>

        <button class="bt" id="bt2">下一页</button>

    </div>

</div>

</body>

</html>

前端小例子 基础js css html练习

案例四

商城选择,全选,复选,反选,提交表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload=function () {

            qx.onclick =function () {

                   let qx =document.getElementById("qx").checked;

                    let cdnodes =document.getElementsByTagName("input");

            for (let i=1;i<cdnodes.length;i++){

                cdnodes[i].checked =qx;

            }

            }

            // let dn =document.getElementById("dn");

            // let sj =document.getElementById("sj");

            // let wj =document.getElementById("wj");

        }

    </script>

    <script>

        function yz() {

        let cdnodes =document.getElementsByTagName("input");

           for (let i=1;i<cdnodes.length;i++){

                if (cdnodes[i].checked==""){

                    let stase =window.confirm("确定不购买东西");

                return stase

                }

            }

                }

        let te1= document.getElementsByClassName("te1");

        for (let i =1;i<te1.length;i++){

            te1[i].title ="请输入数量";

            te1[i].placeholder="请输入数量"

        }

    </script>

    <style>

        .dd1 {

            background-color: #00c4ff;

            text-align: center;

            /*margin: 100px auto;*/

            /*width: 500px;*/

            height: 400px;

        }

        .tt1 {

            font-size: 30px;

            line-height: 60px;

            margin: auto;

            border-spacing: 0px ;

            width: 700px;

            border: 1px solid red;

        }

        .th1 {

            margin-left: 40px;

                     border: 1px solid black;

            line-height: 60px;

        }

        .xzk{

            margin-top: 13px;

            width: 20px;

            height: 20px;

        }

        .tijiao{

            font-size: 30px ;

        }

        .te1{

            line-height: 30px;

            margin-bottom: 15px;

        }

    </style>

</head>

<body>

<form action="http://www.baidu.com" method="get" onsubmit="return yz()">

<div class="dd1">

    <table class="tt1">

        <tr class="tr1">

            <th class="th1"><input type="checkbox" id="qx" class="xzk" /></th>

            <th class="th1">商品名称</th>

            <th class="th1">商品价格</th>

            <th class="th1">商品库存</th>

            <th class="th1">购买数量</th>

        </tr>

        <tr class="tr1">

            <td class="th1"><input type="checkbox" id="dn" class="xzk" name="dn"/></td>

            <td class="th1">电脑</td>

            <td class="th1">100</td>

            <td class="th1">200</td>

            <td class="th1"><input type="text" name="dn" class="te1"></td>

        </tr>

        <tr class="tr1">

            <td class="th1"><input type="checkbox" id="sj" class="xzk" name="sj"></td>

            <td class="th1">手机</td>

            <td class="th1">200</td>

            <td class="th1">100</td>

                        <td class="th1"><input type="text" name="sj" class="te1"></td>

        </tr>

        <tr>

            <td class="th1"><input type="checkbox" id="wj" class="xzk" name="wj"></td>

            <td class="th1">玩具</td>

            <td class="th1">400</td>

            <td class="th1">500</td>

                        <td class="th1"><input type="text" name="wj" class="te1" placeholder="请输入数量"></td>

        </tr>

    </table>

    <hr>

    <input type="submit" value="提交" class="tijiao">

    <p>您购买的东西是</p>

    <p id ="gmsp"></p>

</div>

</form>

</body>

</html>

前端小例子 基础js css html练习

案例五:

显示当前时间

知识点:主要是date 对象和for 循环的使用

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script>

window.onload =function () {

    let p1 = document.getElementById("p1"); //获取p1 dom

    let kwhite = "ss";  //增加空白

    for (let i = 0; i < 5; i++) {    //循环3次

        nums1 = Math.floor(Math.random() * 10);    //生成随机数向下取整

        kwhite+=nums1

    }

    p1.innerText = kwhite

}

</script>

<style>

    /*.a1{*/

        /*background-color: orange;*/

        /*width: 500px;*/

        /*height: 300px;*/

        /*margin: 0px auto;*/

    /*}*/

    .a2{

        background-color: palegreen;

        width: 700px;

        height: 300px;

        margin: 0px auto;

    }

    .p1{

        margin: auto;

        line-height: 240px;

        font-size: 50px;

        text-align: center;

        padding: 30px;

        border: 1px solid red;

    }

</style>

</head>

<body>

   <div class="a1">

   </div>

   <hr>

<div class="a2">

<p class="p1" id="p1"></p>

</div>

</body>

</html>

前端小例子 基础js css html练习

案例六:

时间案例升级

主要是增加删除节点,增加节点的内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload = function () {

            let texid;//这是定时器id

            let nun = 1;

            function gettime() {

                let p_time = document.getElementById("now_time");

                let time1 = new Date();

                let now_time = time1.toLocaleString();

                p_time.innerHTML = now_time;

                return now_time

            }

            let start_time = document.getElementById("start-time");

            let stop_time = document.getElementById("stop-time");

            let nums1 = document.getElementById("nums"); //2

            function starts1() {

                if (texid == null) {

                    gettime();

                    texid = setInterval(gettime, 1000)

                }

                let num_p = document.createElement("p");

                num_p.innerHTML = nun;

                nun++;

                num_p.setAttribute("class", "sty1");

                nums1.appendChild(num_p);

                let str_p = document.createElement("p");

                str_p.innerHTML = gettime();

                start_time.appendChild(str_p);

                str_p.setAttribute("class", "sty1");

            }

            function stops1() {

                clearInterval(texid);

                texid = null;

                let sto_p = document.createElement("p");

                sto_p.innerHTML = gettime();

                sto_p.setAttribute("class", "sty1");

                stop_time.appendChild(sto_p);

                sto_p.innerHTML = gettime()

            }

            let bgh = document.getElementById("bg");

            let clears = document.getElementById("clear");

            clears.onclick = function () {

                nun = 1;

                bgh.removeChild(nums1); //2

                                nums1 = document.createElement("td");

                                                nums1.setAttribute("class", "nums");

                                                                bgh.appendChild(nums1);

                bgh.removeChild(start_time);

                                start_time = document.createElement("td");

                                                start_time.setAttribute("class","start-time");

                                                                bgh.appendChild(start_time);

                bgh.removeChild(stop_time);

                                stop_time = document.createElement("td");

                                                stop_time.setAttribute("class","stop-time");

                                                                bgh.appendChild(stop_time);

            };

            let sta1 = document.getElementById("start");

            sta1.onclick = function () {

                starts1()

            };

            let stp1 = document.getElementById("stop");

            stp1.onclick = function () {

                stops1()

            }

        }

    </script>

    <style>

        .kezi {

            width: 350px;

            height: 500px;

            border: 1px solid red;

            background-color: orange;

            float: left;

        }

        .show-time {

            width: 900px;

            height: 500px;

            border: 1px solid green;

            background-color: #06b6ef;

            float: left;

        }

        .t1 {

            width: 900px;

            height: 500px;

        }

        .thh {

            height: 30px;

        }

        #now_time {

            height: 50px;

            color: gold;

            font-size: 50px;

            font-weight: bolder;

            text-align: center;

        }

        #start {

            margin-top: 50px;

            height: 100px;

            width: 100px;

            margin-left: 50px;

            font-size: 30px;

        }

        #stop {

            margin-top: 50px;

            height: 100px;

            width: 100px;

            margin-left: 13px;

            font-size: 30px;

        }

        #clear {

            margin-top: 30px;

            height: 100px;

            width: 200px;

            margin-left: 60px;

            font-size: 30px;

        }

        .sty1 {

            font-size: 30px;

            color: red;

        }

        #start-time {

            width: 350px;

        }

        #stop-time {

            width: 350px;

        }

        #nums {

            width: 100px;

        }

    </style>

</head>

<body>

<div class="kezi">

    <div class="show-class">

        <p id="now_time">00:00:00</p>

        <button id="start">开始</button>

        <button id="stop">结束</button>

        <br>

        <button id="clear">清空</button>

    </div>

</div>

<div class="show-time">

    <table border="1" class="t1">

        <tr>

            <th class="nums">次数</th>

            <th class="thh">start-time</th>

            <th class="thh">stop-time</th>

        </tr>

        <tr id="bg">

            <td id="nums"></td>

            <td id="start-time"></td>

            <td id="stop-time"></td>

        </tr>

    </table>

</div>

</body>

</html>

前端小例子 基础js css html练习

案例七:

生成4位随机数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script>

window.onload =function () {

    let p1 = document.getElementById("p1"); //获取p1 dom

    let kwhite = "ss";  //增加空白

    for (let i = 0; i < 5; i++) {    //循环3次

        nums1 = Math.floor(Math.random() * 10);    //生成随机数向下取整

        kwhite+=nums1

    }

    p1.innerText = kwhite

}

</script>

<style>

    /*.a1{*/

        /*background-color: orange;*/

        /*width: 500px;*/

        /*height: 300px;*/

        /*margin: 0px auto;*/

    /*}*/

    .a2{

        background-color: palegreen;

        width: 700px;

        height: 300px;

        margin: 0px auto;

    }

    .p1{

        margin: auto;

        line-height: 240px;

        font-size: 50px;

        text-align: center;

        padding: 30px;

        border: 1px solid red;

    }

</style>

</head>

<body>

   <div class="a1">

   </div>

   <hr>

<div class="a2">

<p class="p1" id="p1"></p>

</div>

</body>

</html>

前端小例子 基础js css html练习

案例八:

注册界面

节点的增加删除,.css 界面的显示等

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .header{

            background-color: #06b6ef;

            height: 100px;

        }

        .bt1{

            line-height: 70px;

            margin-top: 10px;

            width: 500px;

            font-size: 30px;

            /*height: 200px;*/

        }

        .mod{

            /*background-color: orange;*/

            text-align: center;

            line-height: 40px;

            font-size: 30px;

            margin-top: 5px;

            padding: 10px;

        }

        .dxck{

            padding: 10px;

            width: 300px;

            color: ghostwhite;

        }

        .sc{

            line-height: 100%   ;

            height: 30px;

            width: 100px;

            margin-left: 100px;

        }

        .hide{

            display: none;

        }

        #show_msg{

            height: 350px;

            background-color: pink;

            position: fixed;

        }

        .xbnr{

            line-height: 100px;

            font-size: 80px;

        }

        input{

            font-size: 80px;

        }

        .close1{

            margin-left: 900px;

            font-size: 25px;

        }

        body{

            height: 1500px;

            background-color: black;

        }

    </style>

</head>

<body>

<div class="header" id="header">

    <button class="bt1">增加个人信息</button>

</div>

<div class="mod" id="mod">

<table border="1">

    <tbody class="msg1" id="msg1">

    <tr>

    <th class="dxck">姓名</th>

    <th class="dxck">年龄</th>

    <th class="dxck">专业</th>

    <th class="dxck"></th>

</tr>

    <tr>

    <td class="dxck">王</td>

    <td class="dxck">18</td>

    <td class="dxck">计算机</td>

        <td class="dxck"><button class="sc" onclick="delnode(this)">删除</button></td>

    </tr>

    <tr>

    <td class="dxck">王2</td>

    <td class="dxck">181</td>

    <td class="dxck">计算机1</td>

        <td class="dxck"><button class="sc" onclick="delnode(this)">删除</button></td>

    </tr>

    </tbody>

</table>

</div>

<div class="show_msg hide" id="show_msg">

    <span class="xbnr">姓名:</span><input id="name" type="text" title="请输入姓名" placeholder="请输入姓名" ><br>

    <span class="xbnr">年龄:</span><input id="age" type="text" title="请输入age" placeholder="请输入age"><br>

    <span class="xbnr">专业:</span><input id="hobby" type="text" title="请输入专业" placeholder="请输入专业" ><br>

    <button class="close1" id="close1">保存</button>

</div>

</body>

    <script>

                    let bt1 =document.getElementsByClassName("bt1")[0];  //加入信息按钮

                    let show_msg =document.getElementById("show_msg"); //加入内容界面

                    let close1 =document.getElementById("close1");  //关闭加入内容界面

                    let name =document.getElementById("name");  //名字

                    let age =document.getElementById("age");  //年龄

                    let hobby =document.getElementById("hobby"); //专业

                    let msg1  =document.getElementById("msg1") ;//获取展示内容父标签

            bt1.onclick =function () {

                show_msg.classList.remove("hide")

            };

            close1.onclick =function () {

              show_msg.classList.add("hide");

                namemsg= name.value;

                agemsg =age.value;

                hobbymsg =hobby.value;

            let creatbody =document.createElement("tr");  //创建tr

            let creatname =document.createElement("td");  //创建td

            creatname.setAttribute("class","dxck");    //赋值css

            creatname.innerHTML=namemsg;   //给td 赋name value

            let creatage =document.createElement("td");   //创建td

            creatage.setAttribute("class","dxck");

            creatage.innerHTML=agemsg;    //赋值

            let creathobby =document.createElement("td");  //创建td

            creathobby.setAttribute("class","dxck");

            creathobby.innerHTML=hobbymsg;

            let creatclear =document.createElement("td");  //创建td

            creatclear.setAttribute("class","dxck");

            // creatclear.innerHTML="<button class=\"sc\" onclick=\"delnode(this)\">删除</button>"

            let iupdel =document.createElement("button");  //创建button

            iupdel.setAttribute("class","sc");

            iupdel.setAttribute("onclick","delnode(this)");

            iupdel.innerHTML="删除";

            msg1.appendChild(creatbody);     //在msg1 下增加tr标签

            creatbody.appendChild(creatname); //在tr 标签下增加td

            creatbody.appendChild(creatage);   //

            creatbody.appendChild(creathobby);  //

            creatbody.appendChild(creatclear); //

            creatclear.appendChild(iupdel); //在td 标签内增加button

            };

 //             let scmsg =document.getElementsByClassName("sc");     ///待解决

 //             for(let i=0;i>scmsg.length;i++){

 //

 //             scmsg[i].onclick =function () {

 //                     alert("zhans")

 //                 }

 // }

            function delnode(inputNode) {

                let trNode = inputNode.parentNode.parentNode;

                let tbody =document.getElementsByTagName("tbody")[0];

                tbody.removeChild(trNode)

            }

    </script>

</html>

前端小例子 基础js css html练习

相关文章