第四周学习笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_46096384/article/details/117996159

第四周学习笔记

1.初探JavaScript

1.初探JavaScript

1.1JavaScript用法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>.com)</title> 
</head>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
	
</body>
</html>

1.2实现简单的按钮、弹窗功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
	
        function rec()
        {
            var mymessage= confirm("Do you know Dmitriy·Dmitriyevich·Shostakovich？");
 
            if(mymessage==true)
 
            {
                document.write("He was one of the most important composers in the Soviet Union.");
            }
            else
            {
                document.write("Get to know. You'll like it!");
            }
        }
    </script>
</head>
<body>
<script type="text/javascript">
    alert('Welcome to my world.')
</script>
 
Welcome to my world.
<input name="button" type="button" onClick="rec()" value="点我" />
 
</body>
</html>

在这里插入图片描述

1.3移入移出

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p> "onmouseenter"（鼠标移入） 和 "onmouseleave"（鼠标移出） 事件。</p>
<h1 id="demo" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()">鼠标移到我这里</h1>
<script>
function mouseEnter() {
    document.getElementById("demo").style.color = "blue";
}
function mouseLeave() {
    document.getElementById("demo").style.color = "black";
}
</script>

</body>
</html>

在这里插入图片描述

1.4鼠标悬停改变背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin: 0; padding: 0;}
        .container{
            margin: 0 auto;
            padding-top: 30px;
            width: 1000px;
        }
        .btn{
            display: inline-block;
            padding: 0 30px;
            width: auto;
            height: 35px;
            font: 14px/35px 'microsoft yahei';
            color: #fff; border: 0;
            border-radius: 3px;
            text-align: center;
            cursor: pointer;
            /*实现渐变（时间变化效果）*/
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }
        .blueBtn{
            background: #5dcbff;
        } /*蓝色按钮*/
        .blueBtn:hover{
            background: #40b6ee;
        }
        .orangeBtn{
            background: #ff5700;
        }/*橙色按钮*/
        .orangeBtn:hover{
            background: #e25d18;
        }
        .violetBtn{
            background: #6680ff;
        }/*紫色按钮*/
        .violetBtn:hover{
            background: #425de0;
        }
        .grayBtn{
            background: #999;
        }/*灰色按钮*/
        .grayBtn:hover{
            background: #7f7f7f;
        }
    </style>
</head>
<body>
<div class="container">
    <span class="btn blueBtn">蓝色</span>
    <span class="btn orangeBtn">橙色</span>
    <span class="btn violetBtn">紫色</span>
    <span class="btn grayBtn">灰色</span>
</div>
</body>
</html>

在这里插入图片描述

1.5鼠标点击显示/隐藏

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js显示隐藏层</title>
<script>
function look(targetid,objN){
      var target=document.getElementById(targetid);
      var clicktext=document.getElementById(objN)
 
            if (target.style.display=="block"){
                target.style.display="none";
                clicktext.innerText="点击查看详细信息";
 
            } else {
                target.style.display="block";
                clicktext.innerText='关闭详细信息信息';
            }
   
}
 
</script>
<style type="text/css">
a { text-decoration: none; }
#looklook{ cursor:pointer;}
#text{ width:1000px; border: 1px solid #CCC; background: #f8f8f8; padding: 20px; }
.dis{ display: none; text-indent:2em;}
</style>
</head>
 
<body>
<a id="looklook" onClick="look('text','looklook')">点击查看详细信息</a>
<div id="text" class="dis">
世界上只有一种真正的英雄主义，那就是在认清生活的真相后依然热爱生活。
</div>
 
</body>
 
 
</html>

在这里插入图片描述