更改背景

☞机器猫ღ

于 2019-06-27 10:56:00 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/weixin_44551890/article/details/93853351

版权

开发工具与关键技术：Visual Studio

作为一个程序猿，要时常为生活找些乐趣；
废话不说太多；
直接上代码：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2</title>
    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .index{
            text-align:center;
        }
        .index h3{
            color:#808080;
        }
        .index .btn{
           display:block;
           margin-top:25px;
        }
        .btn_white{
            background:white;
        }
        .btn_white:hover{
            background:#ccc;
        }
        .btn_black{
            background:#000;
            color:#fff;
        }
        .btn_black:hover{
            background:#474444;
            color:#000;
        }
        .btnc{
            height:35px;
            border:none;
            border-radius:5px;
            font-size:20px;
            margin-left:8px;
        }
        #input{
            width:35%;
            height:35px;
            border:2px solid #ddd;
            font-size:25px;
            color:#808080;
        }
        #opacity{
            display:none;
            position:absolute;
            top:0;
            left:0;
            width:100%;
            background:#000;
            opacity:0.3;
            z-index:-1;
        }
    </style>
</head>
<body id="body">
    <div id="opacity"></div>
    <div class="index"> 
        <h3>你喜欢什么颜色呢？</h3>
        <input type="text" id="input" onkeyup="ii()"/>
        <button class="btnc btn-info" onclick="change()">Change</button>
        <input type="button" value="Red" class="btn btn-danger" onclick="red()"/>
        <input type="button" value="White" class="btn btn_white" onclick="white()" />
        <input type="button" value="Black" class="btn btn_black" onclick="black()" />
        <input type="button" value="Green" class="btn btn-success" onclick="green()" />
        <input type="button" value="Yellow" class="btn btn-warning" onclick="yellow()" />
        <input type="button" value="Opacity" class="btn btn-toolbar" onclick="opacity()" />
        <div id="text1"></div>
    </div>
    <script>
        var setHight = innerHeight;
        var Body = document.getElementById("body");
        var Input = document.getElementById("input");
        var Opacity = document.getElementById("opacity");
        var text1=document.getElementById("text1");
        Opacity.style.height = setHight+"px";
        
        window.onload = function () {
            text1.innerHTML = Input.value;
        };
        function ii() {
            text1.innerHTML = Input.value;
        }
        function red() {
            Body.style.background = "red";
            Input.value = "red";
            opa();
        }
        function white() {
            Body.style.background = "white";
            Input.value = "white";
            opa();
        }
        function black() {
            Body.style.background = "black";
            Input.value = "black";
            opa();
        }
        function green() {
            Body.style.background = "green";
            Input.value = "green";
            opa();
        }
        function yellow() {
            Body.style.background = "yellow";
            Input.value = "yellow";
            opa();
        }
        function opacity() {
            Opacity.style.display = "block";
            Input.value = "opacity";
        }
        function opa() {
            Opacity.style.display = "none";
        }
        function black1() {
        }
        function change() {
            if (Input.value == "") {
                alert("Write You Love Color,Please");
                
            }
            else if (Input.value == "red") {
                red();
            }
            else if (Input.value == "white") {
                white();
            }
            else if (Input.value == "black") {
                black();
            }
            else if (Input.value == "green") {
                green();
            }
            else if (Input.value == "yellow") {
                yellow();
            }
            else if (Input.value == "opacity") {
                opacity();
            }
            else {
                alert("Sorry,We Don't Have")
            }
        }
        
        onkeydown = function (event) {
            if (event.keyCode == 13) {
                change();
            }
            
        }
    </script>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-1.11.3.min.js"></script>
</body>
</html>

引用了一个封装好的css和js插件；
效果如下图：
在这里插入图片描述

封装css和js插件下载链接: https://pan.baidu.com/s/137U6XS2A4dLi8ky1ry46nQ 提取码: u72s

☞机器猫ღ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
更改背景

开发工具与关键技术：Visual Studio作为一个程序猿，要时常为生活找些乐趣；废话不说太多；直接上代码：@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> ...
复制链接

扫一扫