zoukankan      html  css  js  c++  java
  • 颜色变换 JavaScript 练习【每日一段代码1】

    <html>
    <head>
    <title>变换颜色</title>
    <style type="text/css">
    body{
    font-size:12px;
    font-family:微软雅黑;
    }
    form{
    padding:0px;
    margin:0px;
    }
    input{
    border:#06F solid 1px;
    40px;
    height:20px;
    }
    .btn{
    55px;
    height:20px;
    }
    span{
    font-size:36px;
    font-family:宋体;
    font-weight:bold;
    }

    </style>
    <script type="text/javascript">
    function changeColor(){
    var red = document.formcolor.red.value;
    var green = document.formcolor.green.value;
    var blue = document.formcolor.blue.value;
    var obj = document.getElementById("text");
    obj.style.color="#"+red+green+blue;
    }
    </script>
    </head>

    <body>
    <form name="formcolor">
    R:<input name="red" maxlength="2" />
    G:<input name="green" maxlength="2" />
    B:<input name="blue" maxlength="2" />
    &nbsp;<input type="button" onClick="changeColor()" value="变颜色" class="btn" />
    </form><br />
    <span id="text">变换文字颜色</span>
    </body>
    </html>

    显示图像如下

    【自学JavaScript,还不知怎么用力。先从练习小程序开始。很简单,大牛勿扰。代码实现的功能是,文本框输入颜色值,点击“变颜色”按钮,下面文字实现变色。闲话一句:想学程序,处世需要有一技之长,从今天开始每天练习一段代码,并发表在博客园。】

  • 相关阅读:
    jquery 插件扩展2
    jquery 插件扩展
    call apply bind
    bom object
    js oop 封装
    js oop 继承
    js页面之间传参2
    js弹出新窗口的6中方法
    display Tag
    js中extends方法
  • 原文地址:https://www.cnblogs.com/naokr/p/2323058.html
Copyright © 2011-2022 走看看