learn_english
/
英语单词随机默写.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>英语单词随机默写</title>
    <style>
        body {
            background: #d1d1d1;
            width: 920px;
            border: 1px solid #e0e0e0;
        }

        .btn1 {
            background-color: #db5a6b;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 64px;
            margin: 4px 2px;
            cursor: pointer;
            width: 900px;
            height: 150px;
        }

        .btn2 {
            background-color: #db5a6b;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 64px;
            margin: 4px 2px;
            cursor: pointer;
            width: 150px;
            height: 150px;
        }

        .btn2.disabled,
        .btn2[disabled],
        fieldset[disabled].btn2 {
            background-color: #d9b7f8;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 64px;
            margin: 4px 2px;
            cursor: pointer;
            width: 150px;
            height: 150px;

        }

        .btn3 {
            background-color: #db5a6b;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 64px;
            margin: 4px 2px;
            cursor: pointer;
            width: 445px;
            height: 150px;

        }

        .div1 {
            width: 900px;
        }

        .div2 {
            width: 900px;
        }

        .divbtn {
            width: 900px;
            height: 500px;
        }

        .txt1 {
            font-size: 64px;
            width: 900px;
            height: 120px;
        }

        .longtxt {
            width: 600px;
        }
    </style>
</head>

<body>
    <script>
        var words = ["afternoon", "air", "ant", "apple", "April", "august", "autumn", "bag", "ball", "balloon", "banana",
            "basketball", "bear", "beautiful", "bed", "bee", "bicycle", "big", "bird", "birthday", "biscuit", "black",
            "blouse", "blue", "boat", "book", "bowl", "box", "boy", "branch", "bread", "brother", "brown", "bus", "butterfly",
            "cake", "can", "cap", "car", "card", "carnation", "carrot", "cat", "catch", "chair", "chick", "chicken",
            "chopsticks", "classroom", "close", "cloud", "cloudy", "coat", "cola", "cold", "cool", "cow", "cream", "dance",
            "day", "December", "desk", "dog", "doll", "door", "draw", "dress", "duck", "ear", "eat", "egg", "eight", "elephant",
            "evening", "eye", "face", "farmer", "fat", "father", "February ", "firecracker", "firework", "fish", "five",
            "flower", "fly", "foot", "football", "four", "Friday ", "friend", "frog", "gift", "giraffe", "girl", "goodbye",
            "grandfather", "grandmother", "green", "hair", "hall", "hamburger", "hand", "hard", "hat", "have", "head", "hen",
            "hop", "hot", "hungry", "ice", "ice cream", "January", "jelly", "juice", "July", "jump", "June", "kite", "ladybird", "leaf",
            "leaves", "letter", "library", "light", "long", "look", "man", "March", "May", "milk", "Monday ", "monkey", "morning",
            "mother", "mouth", "name", "night", "nine", "noodles", "noon", "nose", "November", "October", "old", "one", "open",
            "orange", "panda", "peach", "pear", "pencil", "pie", "pig", "pink", "pizza", "plant", "plate", "play", "playground",
            "purple", "rabbit", "rain", "raniy", "read", "red", "rice", "ride", "root", "rough", "rubber", "ruler", "run", "salad",
            "Saturday ", "say", "school", "see", "seesaw", "September", "seven", "sheep", "ship", "shirt", "short", "shorts", "sing",
            "sister", "sit", "sit down", "six", "skate", "skip", "slide", "small", "smooth", "snake", "soft", "soup", "spoon",
            "spring", "stand", "stand up", "stop", "summer", "sun", "Sunday ", "sunny", "sweater", "sweet", "swim", "swing", "tall",
            "teacher", "ten", "thank", "thin", "thirsty", "thirty", "three", "Thursday ", "tiger", "time", "today", "toilet",
            "tonight", "touch", "toy", "train", "tree", "trousers", "trunk", "try", "T- shirt", "Tuesday ", "TV", "two", "van",
            "wait", "watch", "water", "Wednesday ", "white", "wind", "windy", "winter", "wolf", "write", "yellow", "young", "zebra", "zoo"];
        var wordsnum = 253;//单词数量
        var rightanswer = "not define";//用来比对输入结果是否正确
        //随机抽选单词，用来听写
        function changeword() {
            var i = Math.floor(Math.random() * (wordsnum + 1));
            var w = document.getElementById("btn01");
            w.innerHTML = words[i];//html代码里面，按钮的值用value初始化，js代码就用value去改，如果用<input...>按钮名<>初始化，就用innerHTML去改。
        }
        //比对输入结果是否正确
        function isright() {
            if (document.getElementById("txt02").value == rightanswer) {
                alert("恭喜，答对啦！");
            }
            else {
                alert("很遗憾，再试试吧！");
            }
        }
        //随机抽取单词，乱序字母排列，生成对应的字母按钮
        function resort() {
            var t = words[Math.floor(Math.random() * (wordsnum + 1))];//输入的字符串
            var s = "";//乱序输出的字符串
            rightanswer = t;//乱序前用全局变量rightanswer保存单词
            var ary = t.split('');//字符串转数组
            ary.sort(function (a, b) { return Math.random() > .5 ? -1 : 1; });//数组乱序
            ary.sort(function (a, b) { return Math.random() > .5 ? -1 : 1; });//数组乱序，乱序两次，看起来更乱些。
            var i = document.getElementById("txt01");
            i.value = ary;//显示出乱序后的单词
            document.getElementById("txt02").value = "";//清空输入的单词
            document.getElementById("txtstack").value = "";//清空输入的按钮堆栈
            document.getElementById("divbtn").innerHTML = "";//清空生成动态按鈕的div
            //动态生成字母按钮
            for (var j in ary) {
                var temp = "<input id='btndyn" + j + "'  type=\"button\" class='btn2' onClick=\"inputletter('" + ary[j] + "',id)\" value=\"" + ary[j] + "\" ><\/input>"
                document.getElementById("divbtn").innerHTML += temp;
            }
        }
        //点击动态字母按钮，输入对应的字母
        function inputletter(arg, btnid) {
            document.getElementById("txt02").value += arg;//记录按过的字母
            //用一个隐藏的文本框记录按过的按钮顺序，后退的时候，反向激活按钮。用逗号隔开不同的按钮，便于后续的判断。
            if (document.getElementById("txtstack").value != "") {
                document.getElementById("txtstack").value += ",";
            }
            document.getElementById("txtstack").value += btnid;
            document.getElementById(btnid).setAttribute("disabled", "true");
        }
        //后退按钮对应的方法，删除输入框一个文本，激活一个禁用的按钮
        function undo() {
            var ary = document.getElementById("txtstack").value.split(',');//堆栈转数组，便于激活对应的按钮，此处没有判断文本框是否为空，浏览器调试时会报错。
            var b = ary.pop();//取数组的最后一个元素，并删除最后一个元素
            document.getElementById("txtstack").value = ary;
            document.getElementById(b).removeAttribute("disabled");
            var l = document.getElementById("txt02").value.length;//逐个字母删除已经输入的文本
            if (l > 0) {
                document.getElementById("txt02").value = document.getElementById("txt02").value.substring(0, l - 1);
            }
        }
        function testcode() {

        }
    </script>

    <div class="div11">


        <button type="button" id="btn01" class="btn1" onclick="changeword()">随机默写</button>
    </div>
    <div>
        <br>
        <button type="button" id="btn02" class="btn1" onclick="resort()">字母乱序</button>
        <br>
        <input type="text" class="txt1" id="txt01" value="words" disabled="disabled">
        <br>
        <input type="text" class="txt1" id="txt02" value="input answer" disabled="disabled">

        <input type="hidden" id="txtstack" class="longtxt" value="input stack">
        <div id="divbtn" class="divbtn">

        </div>
        <button type="button" class="btn3" id="btnundo" onclick="undo()">后退</button>
        <button type="button" class="btn3" onclick="isright()">提交答案</button>

    </div>


</body>

</html>