html5+css+js实战(Day01)

最新推荐文章于 2022-03-06 02:02:06 发布

小盒子之旅

最新推荐文章于 2022-03-06 02:02:06 发布

阅读量184

点赞数 1

本文链接：https://blog.csdn.net/qq_44943018/article/details/104462731

版权

前端练习 Day01

	作为IT行业的小白，想要以后找到一份还不错自己又有兴趣的工作，不断的练习所学知识是非常有必要的。所以， 从今天开始，在这里也将开始我的代码学习及复习之旅。今天是练习第一天，一下代码纯属练习及复习，希望对你也有帮助。

过程介绍：

前期主要把html和css等样式制作并展示在页面，后期在加上JS动作对按钮和文本进行操作。
通过点击“更改内容”按钮对文本样式进行更改(双击第一段文字也可达到类似效果)，点击“刷新页面”返回更改前文本形式，点击“CSDN”按钮跳转到CSDN官网。

以下是代码部分：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        h3 {
            color:          blue;           /* #00f */
        }
        .center {
            text-align: center;
        }
        #divText {
            width:          500px;
            height:         500px;
            margin:         20px auto;      /* 外边距 左右居中*/
            border:         1px solid #8ae; /* 边框 */
            padding:        20px 40px 60px 80px;   /* 内边距*/
            text-align:     justify;        /* 两端对齐 */
            text-indent:    2em;            /* 首行缩进2字符 */
            font-size:      1.2em;          /* 1.2倍大小 */
            line-height:    30px;           /* 行高 */
            border-radius:  10px;            /* 圆角*/
        }
        .margin20{
            margin:20px;
        }
    </style>
</head>
<body>    
    <h3 style="text-align: center;">JS动作</h3>
    <div class="center">内联样式，内置样式，外部样式</div>
    <div class="center margin20">
        <input type="button" value="更改内容" onclick="change();" />
        <input type="button" value="刷新页面" onclick="window.location.reload();" />
         <input type="button" value="CSDN" ondblclick="window.location.href='https://www.csdn.net';" />
    </div>
    <div id="divClick">
       单击或双击此段文字看看lorem====Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nulla maiores necessitatibus deserunt itaque consequatur, nobis, illo et atque ut aperiam. Iusto eaque laboriosam illo, nobis suscipit adipisci. Officia, consectetur? 
    </div>
    <div id="divText">
        lorem100====Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, porro, debitis! Nisi repellat aut distinctio natus eum deserunt ipsa iure nemo officiis perferendis id tempore vero maxime neque error, dicta eius quibusdam quisquam adipisci consectetur eos porro! Quo iusto dicta deserunt. Animi nam asperiores natus vero doloribus saepe culpa numquam eligendi expedita repellat ab laboriosam tenetur adipisci consectetur corporis, perferendis ullam ipsum. Reiciendis quos dignissimos voluptatibus unde temporibus possimus ipsa libero nesciunt minima ex saepe, neque, ut! Id et tenetur, molestias. Quod, esse, ratione necessitatibus neque beatae possimus corrupti. Veniam vero nostrum provident nulla eum totam optio nobis, cupiditate nesciunt.     
    </div>
</body>
</html>
<script type="text/javascript">
    function change(){
        var divText=document.getElementById("divText")
        //divText.innerText="更改后的内容<span style='color:blue;'>8888</span>";
        divText.innerHTML="更改后的内容<span style='color:blue;'>lorem====Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nulla maiores necessitatibus deserunt itaque consequatur, nobis, illo et atque ut aperiam. Iusto eaque laboriosam illo, nobis suscipit adipisci. Officia, consectetur? </span>";
      
       divText.style.color="red";
       divText.style.border="3px dotted  #000";      //dotted 为虚线
       divText.style.borderColor="red";              //设置某一属性值

       console.log(divText.style.color);             //成功输出到控制台
       console.log(divText.style.width);             //输出为空值
       console.log("Hello World");
    }
    window.onload=function(){                        //网页装载完成后直接执行
        document.getElementById("divClick").onclick=function(){
            change();
        }
        document.getElementById("divClick").onmouseout=function(){
            window.location.reload();               //鼠标移开后，刷新页面
        }
    }
</script>

小盒子之旅

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html5+css+js实战(Day01)

前端练习 Day01 作为IT行业的小白，想要以后找到一份还不错自己又有兴趣的工作，不断的练习所学知识是非常有必要的。所以，从今天开始，在这里也将开始我的代码学习及复习之旅。今天是练习第一天，一下代码纯属练习及复习，希望对你也有帮助。过程介绍：前期主要把html和css等样式制作并展示在页面，后期在加上JS动作对按钮和文本进行操作。通过点击“更改内容”按钮对文本样式进行更改(双击第...
复制链接

扫一扫