碼上快樂

相關內容    簡體    繁體

前端小例子 基礎js css html練習

本文轉載自   查看原文   2019-03-03 15:57   2005    python 程序練習

前情提要:

　　學前端也有一陣了,個人感覺前端還是重要的.

　　html 學習教程

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

　　css 教程

　　js 教程

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

　　本次主要是分享幾個綜合小例子

案例一:

　　js的事件交互

　　知識點:

 

　　代碼:

 

<!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>

 

 

　　　　

案例二:

利用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>

 

 

 

 

案例三:

創建按鈕 切換圖片 

知識點 數組 自增加

代碼:

<!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="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>

 

案例四

商城選擇,全選,復選,反選,提交表單

<!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>

案例五:

顯示當前時間

知識點:主要是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>

案例六:

時間案例升級

主要是增加刪除節點,增加節點的內容

<!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>

案例七:

生成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>

案例八:

注冊界面

節點的增加刪除,.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>

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 前端開發基礎 HTML+CSS+JS Web前端-HTML、CSS、JS 【Web前端開發】《零基礎入門學習Web開發》（HTML5&CSS3）（小甲魚） 前端-html和css基礎知識 Web基礎 HTML CSS JS JQuery AJAX 前端開發HTML&css入門——CSS&選擇器練習 Python爬蟲基礎——HTML、CSS、JavaScript、JQuery網頁前端技術 前端-HTML練習題 一個小公司的前端筆試HTML CSS JS 前端基礎之CSS
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM