JS 篇（2）

最新推荐文章于 2022-11-14 16:16:47 发布

Dawn___

最新推荐文章于 2022-11-14 16:16:47 发布

阅读量285

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/dawn___/article/details/60883750

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

点击隐藏文字

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    input,button {
    border:0 none;
    padding:0;
    }
    .search {
    width: 258px;
    height: 40px;
    margin:100px auto;
    background-color: pink;
    }
    .search input{
    width: 208px;
    height: 40px;
    background: url(left.jpg) no-repeat;
    outline-style:none;
    padding-left: 8px;
    color: #ccc;
    float: left;
    }
    .search button{
    height: 40px;
    width: 42px;
    background: url(right.jpg) no-repeat;
    cursor:pointer;
    }
    </style>
    <script>
    window.onload = function(){
    var txt = document.getElementById("txt");
    txt.onfocus = function(){
    //alert("得到了焦点");
    //如果 这里input里面的文字是请输入，说明用户没有用过，就应该清空
    //=是赋值，==是判断，===是全等
    if(txt.value=="请输入")
    {
    txt.value = "";
    txt.style.color = "#333";
    }
    }
    txt.onblur = function(){
    //alert("失去焦点");
    //什么时候还原呢:input值为空的时候
    if(txt.value == "")
    {
    txt.value = "请输入";
    txt.style.color = "#ccc";
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="search">
    <input type="text" value="请输入" id="txt">
    <button></button>
    </div>
    </body>
    </html>

这里写图片描述

1.this 主要指事件的调用者，谁调用函数，this指向谁。
this只用在函数体的内部
2.className：类名
3.innerHTML更换盒子里面的内容文字标签都换；
表单更换内容 input.value值（只有表单才有value值）。
4.isNaN 不是数字：isNaN(“12”)如果里面的不是个数字，返回ture ；否则返回false。

简单验证表单

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .box {
    text-align: center;
    margin:100px auto;
    }
    span {
    display: inline-block;
    width: 150px;
    height: 20px;
    border: 1px solid #ccc;
    font-size:12px;
    line-height: 20px;
    text-align: left;
    padding-left: 20px;
    background-color: #eee;
    color:#999;
    }
    .right {  /*正确的*/
    color: #5EFF5E;
    background:url(images/right.png) no-repeat #DFFFDF 4px 3px;
    border: 1px solid #ACFFAC;
    }
    .wrong {  /*错误的*/
    background:url(images/wrong.png) no-repeat #FFDCD0 4px 3px;
    border: 1px solid #FFAC91;
    color: #FF6B39;
    }
    </style>
    <script>
    window.onload = function(){
    function $(id){
    return document.getElementById(id);
    }
    $("txt").onblur = function(){//离开焦点判断
    // alert($("txt").value);
    //alert(this.value);
    if(this.value==""){
    $("result").className = "wrong";
    $("result").innerHTML = "内容不能为空"
    }
    else if(isNaN(this.value)){
    $("result").className = "wrong";
    $("result").innerHTML = "请输入数字";
    }
    else if(this.value >150|| this.value<0 ){
    $("result").className = "wrong";
    $("result").innerHTML = "请输入合理的范围";
    }
    else
    {
    $("result").className = "right";
    $("result").innerHTML = "输入正确";
    }
    }
    }
    </script>
    </head>
    <body>
    <div class="box">
    语文: <input type="text" id="txt">  <span id="result">请输入成绩</span>
    </div>
    </body>
    </html>

这里写图片描述

两个表单方法

自动获得焦点以及鼠标经过选择表单

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload = function(){
    var txt  = document.getElementById("txt");
    var sele = document.getElementById("select");
    txt.focus();//自动获得焦点
    sele.onmouseover = function(){
    this.select();//选择
    }
    }
    </script>
    </head>
    <body>
    自动获得焦点：
    <input type="text" id="txt">
    鼠标经过选择表单：
    <input type="text" id="select">
    </body>
    </html>

这里写图片描述

for循环—打印金字塔

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <script>
    for(var i=0;i<=100;i+=3){
    document.write("<hr width=  "+i+"%/>")
    }
    </script>
    </body>
    </html>