分别用js,css,html实现三个不同颜色的文字拼接

此博客链接：https://www.cnblogs.com/ping2yingshi/p/12890443.html

js普通版本

<html>
<body>
<script>
var str1 = "红色";
var str2 = "黑色";
var str3 = "蓝色";
document.write("<p> " + str1.fontcolor("red") +str2.fontcolor("black")+str3.fontcolor("blue")+ "</p>");
</script>
</body>
</html>

js调用函数版本：

<html>
<body>
<script>
function myFunction(str1,color1,str2,color2,str3,color3){
    var str="";
    str=str.concat(str1.fontcolor(color1));
    str=str.concat(str2.fontcolor(color2));
    str=str.concat(str3.fontcolor(color3));
    //document.write("<p>"+ str+"</p>"); 
    return str;
}

 document.write(myFunction("红色","red","黑色","black","蓝色","blue"));
//var strd=myFunction("红色","red","黑色","black","蓝色","blue")
// document.write(strd);

</script>

</body>
</html>

 js在运行时传参数版本。

<html>
<body>
<script>
function myFunction(){
    var str="";
    str=str.concat(arguments[0].fontcolor(arguments[1]));
    str=str.concat(arguments[2].fontcolor(arguments[3]));
    str=str.concat(arguments[4].fontcolor(arguments[5]));
    return str;
}

 //console.log(myFunction("红色","red","黑色","black","蓝色","blue"));
</script>
</body>
</html>

 js在运行时传参数函数版本升级

<!DOCTYPE html>
<html>
<body>
<script>
function myFunction(){
    var len=arguments.length;
     var str="";
    for(var i=1;i<len;i=i+2)
    {
       str=str.concat(arguments[i-1].fontcolor(arguments[i])); 
    }
    return str;
}

 console.log(myFunction("红色","red","黑色","black","蓝色","blue"));
</script>
</body>
</html>

 

效果图

 

2.html普通版本

<text style="color:red">红色</text>
    <text style="color:black">黑色</text>
     <text style="color:blue">蓝色</text>

 

html调用函数版本：

<html>
<body>
<div id="main1">
<p>红色</p>
<p>red</p>
</div>
<div id="main2">
<p>黑色</p>
<p>black</p>
</div>
<div id="main3">
<p>蓝色</p>
<p>blue</p>
</div>
<script>
var x=document.getElementById("main1");
var y=x.getElementsByTagName("p");
var m=document.getElementById("main2");
var n=m.getElementsByTagName("p");
var p=document.getElementById("main3");
var q=p.getElementsByTagName("p");
function myFunction(str1,color1,str2,color2,str3,color3){
    var str="";
    str=str.concat(str1.fontcolor(color1));
    str=str.concat(str2.fontcolor(color2));
    str=str.concat(str3.fontcolor(color3));
    //document.write("<p>"+ str+"</p>"); 
    return str;
}


document.write( myFunction(y[0].innerHTML,y[1].innerHTML, n[0].innerHTML,n[1].innerHTML,q[0].innerHTML,q[1].innerHTML));
</script>

</body>
</html>

字符串个数是在运行时才确定的版本

<html>
<body>
<div id="main1">
<p>红色</p>
<p>red</p>
</div>
<div id="main2">
<p>黑色</p>
<p>black</p>
</div>
<div id="main3">
<p>蓝色</p>
<p>blue</p>
</div>
<script>
var x=document.getElementById("main1");
var y=x.getElementsByTagName("p");
var m=document.getElementById("main2");
var n=m.getElementsByTagName("p");
var p=document.getElementById("main3");
var q=p.getElementsByTagName("p");
function myFunction(){
   var len=arguments.length;
     var str="";
    for(var i=1;i<len;i=i+2)
    {
       str=str.concat(arguments[i-1].fontcolor(arguments[i])); 
    }
    return str;
}


console.log( myFunction(y[0].innerHTML,y[1].innerHTML, n[0].innerHTML,n[1].innerHTML,q[0].innerHTML,q[1].innerHTML));
</script>

</body>
</html>

 

 

 3.css普通版本

3.1

<html>
<body>
<view class="redstr">红色</view>
<view class="blackstr">黑色</view>
<view class="bluestr">蓝色</view>
<style>
.redstr
{
    color:red;
    
}
.blackstr
{    color:black;
    
} 
.bluestr
{
color:blue;
    
} 
</style>
</body>
</html>

3.2

<html>
<body>
<div  id="main1">
<view  style="color:red;">红色</view>
<view  style="color:black;">黑色</view>
<view  style="color:blue;">蓝色</view>
</div>


</body>
</html>

 3.3

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .redstr
   {
    color: red;
   
   }
     .blackstr
   {
    color: black;
   
   }
     .bluestr
   {
    color: blue;
   
   }
  </style>
 </head>
 <body>
  <script>

      document.write("<font class=\"redstr\">红色</font >");
        document.write("<font class=\"blackstr\">黑色</font >");
          document.write("<font class=\"bluestr\">蓝色</font >");
</script>
 </body>
</html>

 

css函数版本

 没有修改好的版本：

<html>
<body>
<div  id="main1">
<p class="redstr">红色</p>
</div>
<div id="main2">
<p class="blackstr">黑色</p>
</div>
<div id="main3">
<p class="bluestr">蓝色</p>
</div>
<script>
var x=document.getElementById("main1");
var y=x.getElementsByTagName("p");
var m=document.getElementById("main2");
var n=m.getElementsByTagName("p");
var p=document.getElementById("main3");
var q=p.getElementsByTagName("p");
var a=document.getElementById("redstr");
var b=a.getElementsByTagName("p");
var c=document.getElementById("blackstr");
var d=c.getElementsByTagName("p");
var e=document.getElementById("bluestr");
var f=e.getElementsByTagName("p");
function myFunction(str1,color1,str2,color2,str3,color3){
    var str="";
    str=str.concat(str1.fontcolor(color1));
    str=str.concat(str2.fontcolor(color2));
    str=str.concat(str3.fontcolor(color3));
    //document.write("<p>"+ str+"</p>"); 
    return str;
}
var x = document.getElementById('redstr');


document.write( myFunction(y[0].innerHTML,b[0].innerHTML, n[0].innerHTML,d[0].innerHTML,q[0].innerHTML,f[0].innerHTML));
</script>

<style>
.redstr
{
    color:red;
    
}
.blackstr
{    color:black;
    
} 
.bluestr
{
color:blue;
    
} 
</style>

</body>
</html>

 使用style版本：

<!DOCTYPE html>
<html>
<body>
<div  id="main1">
<p class="redstr" style="color:red;">红色</p>
</div>
<div  id="main2">
<p class="blackstr" style="color:black;">黑色</p>
</div>
<div  id="main3">
<p class="bluestr" style="color:blue;">蓝色</p>
</div>
<script>
var x=document.getElementById("main1");
var y=x.getElementsByTagName("p");
var m=document.getElementById("main2");
var n=m.getElementsByTagName("p");
var p=document.getElementById("main3");
var q=p.getElementsByTagName("p");
var a=document.getElementsByClassName("redstr")[0];
var b=document.getElementsByClassName("blackstr")[0];
var c=document.getElementsByClassName("bluestr")[0];
function myFunction(str1,color1,str2,color2,str3,color3)
{
    var str="";
    str=str.concat(str1.fontcolor(color1));
    str=str.concat(str2.fontcolor(color2));
    str=str.concat(str3.fontcolor(color3));
    return str;
}
document.write( myFunction(y[0].innerHTML,a.style.color,n[0].innerHTML,b.style.color,q[0].innerHTML,c.style.color));
</script>


</body>
</html>

无函数返回值版本：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #redstr
   {
    color: red;
   
   }
     #blackstr
   {
    color: black;
   
   }
     #bluestr
   {
    color: blue;
   
   }
  </style>
 </head>
 <body>
  <h1 id="redstr" >红色</h1>
    <h1 id="blackstr" >黑色</h1>
      <h1 id="bluestr" >蓝色</h1>
  
  <script>
    var str1="红色";
    var str2="黑色";
    var str3="蓝色";
     
   var x= document.getElementById("redstr");
   var color1 = document.defaultView.getComputedStyle(x,null).color;
   var y= document.getElementById("blackstr");
   var color2 = document.defaultView.getComputedStyle(y,null).color;
   var z= document.getElementById("bluestr");
   var color3 = document.defaultView.getComputedStyle(z,null).color;
   function myFunction(str1,color1,str2,color2,str3,color3)
{
      document.write('<font style="color:'+color1+'">'+str1+'</font >');
      document.write('<font style="color:'+color2+'">'+str2+'</font>');
      document.write('<font style="color:'+color3+'">'+str3+'</font >');
     
}
 myFunction(str1,color1,str2,color2,str3,color3);
     
</script>
 </body>
</html>

 css版本：

注意：这种方法需要需要把rgb颜色值转换成十六进制颜色值。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #redstr
   {
    color: red;
   
   }
     #blackstr
   {
    color: black;
   
   }
     #bluestr
   {
    color: blue;
   
   }
  </style>
 </head>
 <body>
  <h1 id="redstr" >红色</h1>
    <h1 id="blackstr" >黑色</h1>
      <h1 id="bluestr" >蓝色</h1>
  
  <script>
    // var str1="红色";
    // var str2="黑色";
    // var str3="蓝色";
     
   var x= document.getElementById("redstr");
   var color4 = document.defaultView.getComputedStyle(x,null).color;
   var y= document.getElementById("blackstr");
   var color5 = document.defaultView.getComputedStyle(y,null).color;
   var z= document.getElementById("bluestr");
   var color6 = document.defaultView.getComputedStyle(z,null).color;
           function transferRgbToStr(color) {
        if (typeof color !== 'string' && !(color instanceof String) || !~color.indexOf('rgb')) return console.error("请输入rgb形式的颜色值");
        color = color.replace(/\s+/g, '');
        var index = color.indexOf('(') + 1;
        //注意： String 的slice方法，slice方法参数为负数时，即为倒数
        // substring 方法参数为负数时，全都认为是0
        var colors = color.slice(index, -1).split(',').slice(0, 3);
        for (var i = 0; i < colors.length; i++) {
            if (parseInt(colors[i], 10) > 255 || parseInt(colors[i], 10) < 0)
                return console.error("颜色值范围在0到255之间，请注意输入值！")
            colors[i] = parseInt(colors[i], 10).toString(16);
            if (colors[i].length === 1) {
                colors[i] = "0" + colors[i]
            }
        }
        return colors.join("");
    }

 var color1=transferRgbToStr(color4);
 var color2=transferRgbToStr(color5);
 var color3=transferRgbToStr(color6);
   function myFunction(str1,color1,str2,color2,str3,color3)
{
      var str="";
      str=str.concat(str1.fontcolor(color1));
       str=str.concat(str2.fontcolor(color2));
        str=str.concat(str3.fontcolor(color3));
     return str;
}
document.write(myFunction(x.innerHTML,color1,y.innerHTML,color2,z.innerHTML,color3));
     
</script>
 </body>
</html>

 css版本，函数参数时在运行时才确定的。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #redstr
   {
    color: red;
   
   }
     #blackstr
   {
    color: black;
   
   }
     #bluestr
   {
    color: blue;
   
   }
  </style>
 </head>
 <body>
  <h1 id="redstr" >红色</h1>
    <h1 id="blackstr" >黑色</h1>
      <h1 id="bluestr" >蓝色</h1>
  
  <script>
    // var str1="红色";
    // var str2="黑色";
    // var str3="蓝色";
     
   var x= document.getElementById("redstr");
   var color4 = document.defaultView.getComputedStyle(x,null).color;
   var y= document.getElementById("blackstr");
   var color5 = document.defaultView.getComputedStyle(y,null).color;
   var z= document.getElementById("bluestr");
   var color6 = document.defaultView.getComputedStyle(z,null).color;
           function transferRgbToStr(color) {
        if (typeof color !== 'string' && !(color instanceof String) || !~color.indexOf('rgb')) return console.error("请输入rgb形式的颜色值");
        color = color.replace(/\s+/g, '');
        var index = color.indexOf('(') + 1;
        //注意： String 的slice方法，slice方法参数为负数时，即为倒数
        // substring 方法参数为负数时，全都认为是0
        var colors = color.slice(index, -1).split(',').slice(0, 3);
        for (var i = 0; i < colors.length; i++) {
            if (parseInt(colors[i], 10) > 255 || parseInt(colors[i], 10) < 0)
                return console.error("颜色值范围在0到255之间，请注意输入值！")
            colors[i] = parseInt(colors[i], 10).toString(16);
            if (colors[i].length === 1) {
                colors[i] = "0" + colors[i]
            }
        }
        return colors.join("");
    }

 var color1=transferRgbToStr(color4);
 var color2=transferRgbToStr(color5);
 var color3=transferRgbToStr(color6);
   function myFunction()
{
      var len=arguments.length;
     var str="";
    for(var i=1;i<len;i=i+2)
    {
       str=str.concat(arguments[i-1].fontcolor(arguments[i])); 
    }
    return str;
}
document.write(myFunction(x.innerHTML,color1,y.innerHTML,color2,z.innerHTML,color3));
     
</script>
 </body>
</html>

 

posted @ 2020-05-14 18:09  萍2樱释  阅读(2466)  评论(0)  编辑  收藏  举报