0
点赞
收藏
分享

微信扫一扫

JavaScript学习3

程序员伟杰 2022-07-01 阅读 55
html留言板字符串Linux系统/运维

1、简易计算器

JavaScript学习3_字符串

 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id='input1' type="text">+<input id='input2' type="text">
    <button id="btn"> = </button>
    <span id="result"> </span>

<script>
    var input1 = document.getElementById('input1');
    var input2 = document.getElementById('input2');
    var result = document.getElementById('result');
    var btn = document.getElementById('btn');

    btn.onclick = function () {
        result.innerHTML = input1.value + input2.value
    }
</script>
</body>
</html>

2、+加号的作用：

1)作为计算的加法运算符使用，加号的左右两侧必须是数字。
2)作为字符串的连接符使用，把加号左右两边的内容连接到一起。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
//    alert(1+1);
//    alert('1' + 1);
//    alert('1'+'1');

    /*
    * 字符串：'1'和"1"一样但是和1不一样
    * */
    var a = '123';
    var b = '456';
    var c = a + b;
    console.log(c);

    /*
    * +加号的作用：
    * 1)作为计算的加法运算符使用，加号的左右两侧必须是数字。
    * 2)作为字符串的连接符使用，把加号左右两边的内容连接到一起。
    *
    * */
</script>
</body>
</html>

3、类型判断typeof的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var a = '123';
    console.log(typeof a);
</script>
</body>
</html>

JavaScript学习3_字符串_02

 4、简易留言板一：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
        <title>Document</title>
            <style>
                 textarea{
                      width: 200px;
                      height: 100px;
                      margin-left: 50px;
                 }
                 li{
                      background-color: rgb(109, 202, 202);
                      margin-bottom: 5px;
                      width: 300px;
                      list-style-type: none;
                      }
                 button{
                     margin-left: 50px;
                     }
                 a{
                    float: right;
                    text-decoration: none;
                    }
                    </style>
               </head>
<body>
     <textarea></textarea><br>
     <button>发布</button>
     <ul> </ul>
    <script>
    var num = document.querySelector('textarea');
    var but= document.querySelector('button');
    var ul = document.querySelector('ul');
     //注册事件
    but.onclick = function(){
    if(num.value == ''){
        alert('您没有输入内容');
    }else{
        // 创建节点
        var li = document.createElement('li');
        //赋值  javascript:;设置不跳转
        li.innerHTML = num.value +"<a href= 'javascript:;'>删除</a>";
        //添加节点
        //ul.appendChild(li);
        ul.insertBefore(li,ul.children[0]);
        var a = document.querySelectorAll('a');
        for(var i=0;i<a.length;i++){
            a[i].onclick = function(){
                ul.removeChild(this.parentNode);
            }
        }
    }
}
</script>
</body>
</html>

JavaScript学习3_留言板_03

 留言板二：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0 auto;
            background: #FFEE99;
        }

        #dt {
            border: double 1px #000000;
            size: a3;
            width: 298px;
            height: 98px;
            color: #000000;
        }

        #logo {
            background: red;
            height: 100px;
            width: 300px;
            align = "center";
            margin-top: 20px;
        }

        #pl {
            float: right;
            color: #888888;
            font-size: 12px;
            cursor: pointer;
        }
    </style>
</head>
<link rel="stylesheet" type="text/css" href="css/reply.css"/>

<body>
<div id="logo">
    <textarea id='dt'></textarea>
    <p id="pl">留言(0)</p>
</div>

</body>
<script type="text/javascript" src="js/reply.js"></script>
</html>
js/reply.js
var pl=document.getElementById('pl');
var dt=document.getElementById('dt');
var flag=0//留言个数
var str =date();//当前时间
pl.onclick=function(){
    if(dt.value!=""){ //判断用户是否输入内容
        flag++;
        pl.innerHTML="留言("+flag+")"; //留言+1
        var log=document.createElement('div');// 创建div
        document.body.appendChild(log);// body添加该节点
        var building=document.createElement('span');//创建显示楼层节点
        log.appendChild(building);
        var date=document.createElement('span');//显示用户节点
        log.appendChild(date);
        var matter=document.createElement('span');//显示留言内容节点
        log.appendChild(matter);
        var del=document.createElement('span');//显示删除节点
        log.appendChild(del);
        model(log,building,date,matter,dt,del);   //显示div样式
        dt.value="";//清空上次留言内容
    }
    else {
        alert("请输入内容!");
    }
}
function model(log,buiding,date,matter,dt,del){   //新节点的样式
    del.style.width="35px";
    del.style.height="30px";
    del.style.background="";
    del.style.float="left";
    del.style.marginTop="15px";
    del.innerHTML="删除"
    del.style.color="#888888";
    del.style.cursor="pointer";
    del.onclick=function(){             //为删除添加事件
            if (confirm("确定删除此留言？")){
                document.body.removeChild(this.parentNode);//this.parenNode:定位到该节点的父节点div
                flag--;
                pl.innerHTML="留言("+flag+")";//留言--
                var div=document.body.children;   //body的所有节点数
                for(var i=div.length-1;i>0;i--)//改变所有孩子节点的第一个子节点的（显示楼层的节点）样式
                {
                    div[i].firstChild.innerHTML=i-1+"楼";
                }
            };
        }
    matter.style.width="150px";
    matter.style.height="100px";
    matter.style.background="";
    matter.style.float="left";
    matter.style.fontSize="15px"
    matter.innerHTML="&nbsp&nbsp"+dt.value;

    buiding.style.width="100px";
    buiding.style.height="100px";
    buiding.style.background="";
    buiding.style.float="left";
    buiding.style.fontSize="40px";
    buiding.style.fontFamily="DFKai-SB"
    buiding.style.color="#DDAA00"
    buiding.style.textAlign="center"
    buiding.innerHTML=flag+"楼";
    buiding.style.fontWeight="bold";

    date.style.color="#444444"
    date.style.width="100px";
    date.style.height="100px";
    date.style.float="left";
    date.style.fontWeight="bold"
    date.style.background="";
    date.innerHTML=str+"<br>"+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp用户"+flag

    log.style.width="400px";
    log.style.height="100px";
    log.style.background="";
    log.style.marginTop="20px";
}
function date(){  //获取当前的年月日返回
    var data=new Date();
    var str=data.getFullYear()+"-"+Number(data.getMonth()+1)
    str+="-"+data.getDate()+"<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+data.getHours()+":"+data.getMinutes();
    return str;
}

JavaScript学习3_留言板_04

 简易留言板三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="warp">
        <textarea id="text"></textarea>
        <button id="btn">提交</button>
        <ul id="list"></ul>
    </div>
    <script>
        /*
        * 1、获取元素（输入框、提交按钮、list）
        * 2、按钮绑定点击事件
        * 3、获取输入框的内容
        * 4、把输入内容放在list里面
        * */
        var text = document.getElementById('text');
        var btn = document.getElementById('btn');
        var list = document.getElementById('list');

        btn.onclick = function () {
            //点击后要做的的事情
//            console.log(text.value);
            var txt = text.value;
            //innerHTML 会替换当前标签内的所有内容
//            list.innerHTML = list.innerHTML + '<li>' + txt + '</li>';
            //+=的使用：仅限于=号左右相等在原有的基础上追加后续内容
            list.innerHTML += '<li>' + txt + '</li>';
        }
    </script>
</body>
</html>

JavaScript学习3_html_05


举报

相关推荐

JavaScript学习笔记（3）JS的组成

javascript前端

JavaScript 3

前端

JavaScript 学习-3.Array数组对象基本操作

JavaScript数组取值字符串前端开发

JavaScript(3)基础

javascript前端

javascript基础3

javascript

javascript 3/13

javascript前端开发语言

javascript高级3

javascript

javascript 学习

javascriptfunctionobjectconstructorproperties数字化转型

零基础学习JavaScript-3-JavaScript运算符与循环结构

javascript前端开发语言

JavaScript学习——JavaScript闭包

模块化开发私有变量作用域闭包JavaScript前端开发
0 条评论