web前端开发实验——3

最新推荐文章于 2024-05-11 09:58:50 发布

可以燎原的星星

最新推荐文章于 2024-05-11 09:58:50 发布

阅读量1.3k

点赞数 1

分类专栏： # Web 文章标签：前端 javascript css html

本文链接：https://blog.csdn.net/qq_46476515/article/details/127340272

版权

Web 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

1、制作简易计算器

制作一个简易计算器，能够对两个不为0的数进行“+、-、*、/”运算，用户输入两个运算数，选择运算符之后点击“=”可以计算结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>
<input type="number"  id="qian">
<select id="yun">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
</select>
<input type="number" id="hou">
<input type="button" value="=" id="=" onclick="result()">
<input type="text"  id="res">


<script type="text/javascript" >
    function result() {
        var oqian=document.getElementById("qian").value;
        var ohou=document.getElementById("hou").value;
        var oyun=document.getElementById("yun").value;
        var ores=document.getElementById("res").value;
        oqian=parseInt(oqian);
        ohou=parseInt(ohou);

        if (oqian==0 || ohou==0){
            alert("值不能为零");
        }else {
            switch (oyun) {
                case '+':
                    ores=oqian + ohou;
                    break;
                case "-":
                    ores=oqian - ohou;
                    break;
                case "*":
                    ores=oqian * ohou;
                    break;
                case "/":
                    ores=oqian / ohou;
                    break;

            }
            document.getElementById("res").value=ores;
        }


    }
</script>
</body>
</html>

2、制作简易聊天室

当用户在聊天窗口下方文本框中输入信息后，点击发送按钮，文本框中的信息显示在信息显示区域，同时文本框中信息被清空。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易聊天室</title>
</head>
<body>
<div>
    <textarea rows="10" cols="30" id="jiemian"></textarea>
</div>
<div>
    <span id="">客服：
    <input id="neirong" ><input type="button" value="发送" onclick="sub()"></span>
</div>

<script>
    function sub() {
        var onei=document.getElementById("neirong").value;
        var ojie=document.getElementById("jiemian").value;
        document.getElementById("jiemian").value=ojie+"\n"+"客服："+onei;
        document.getElementById("neirong").value="";
    }
</script>
</body>
</html>

3、图片点击按钮轮换

当点击左、右两个按钮，更换图片信息。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片轮番</title>
</head>
<body>
<input type="button" id="prev" value="<">

<img id="img" src="images/img1.jpg" style="width: 500px;height: 300px;"/>

<input type="button" id="next" value=">">

<script>
    var oinput=document.getElementsByTagName('input');
    var oimgs=document.getElementById('img');
    var img=['images/img1.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg'];

    var index=0;
    oinput[0].onclick=function(){
        index--;
        if(index<0)
            index=img.length-1;
        oimgs.src=img[index];
    };
    oinput[1].onclick=function(){
        index++;
        if(index>img.length-1)
            index=0;
        oimgs.src=img[index];
    };
</script>
</body>
</html>

4、制作12小时的时钟，要求如下：

显示年、月、日，显示星期几，显示时钟特效，时钟为12小时进制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页时间显示</title>
</head>
<body>
<h1>您好，现在是北京时间：</h1>
<h1 id="wrapper">

</h1>
<script>
    var _wrapper = document.getElementById("wrapper");
    var id = setInterval(
        function() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var xingqi = date.getDay();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            var swxw = date.getHours();

            if (swxw > 12) {
                swxw = `PM`
            } else {
                swxw = `AM`
            }
            if (hours > 12) {
                hours = hours - 12;
            } else {
            hours = hours;
            }
            if (hours < 10) {
                hours = `${hours}`;
            }
            if (xingqi == 0) {
                xingqi = `日`;
            }
            if (xingqi == 1) {
                xingqi = `一`;
            }
            if (xingqi == 2) {
                xingqi = `二`;
            }
            if (xingqi == 3) {
                xingqi = `三`;
            }
            if (xingqi == 4) {
                xingqi = `四`;
            }
            if (xingqi == 5) {
                xingqi = `五`;
            }
            if (xingqi == 6) {
                xingqi = `六`;
            }
            _wrapper.innerHTML = `${year}年${month}月${day}日&emsp;${hours}：${minutes}：${seconds}&emsp;${swxw}&emsp;星期${xingqi}&emsp;`;
        }, 1000)
</script>
</body>
</html>

5、用户输入成绩，程序输出相应的成绩等级。

要求成绩必须在0~100之间，否则提示错误并要求重新输入，等级分为优秀、良好、中等、及格和不及格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩等级</title>
</head>
<body>

<script>
        var exm=window.prompt("请输入成绩：","");
        if(exm <60 ){
            alert("不及格");
        }else if (exm>=60 && exm<70){
            alert("及格");
        }else if (exm>=70 && exm<80){
            alert("中等");
        }else if (exm>=80 && exm<90){
            alert("良好");
        }else (alert("优秀"))
</script>
</body>
</html>