حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود

تغییر رنگ بک گراند

تمرین آسان 3543 visibility link download flag

با استفاده از جاوااسکریپت برنامه ای بنویسید که کاربر بتواند از بین رنگ های سبز، قرمز، آبی، سفید و مشکی یک رنگ را انتخاب کرده و با انتخاب هر رنگ، پس زمینه به آن رنگ تغییر پیدا کند

👨‍💻 1 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

reply 18

visibility 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تغییر رنگ پس زمینه</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        select {
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <h1>انتخاب رنگ پس زمینه</h1>
    <select id="colorSelector">
        <option value="">یک رنگ انتخاب کنید</option>
        <option value="green">سبز</option>
        <option value="red">قرمز</option>
        <option value="blue">آبی</option>
        <option value="white">سفید</option>
        <option value="black">مشکی</option>
    </select>

    <script>
        const colorSelector = document.getElementById('colorSelector');

        colorSelector.addEventListener('change', function() {
            const selectedColor = colorSelector.value;
            if (selectedColor) {
                document.body.style.backgroundColor = selectedColor;
            }
        });
    </script>

</body>
</html>
Mma123 JavaScript HTML & CSS 
const btnColor = [
    {
        text: "قرمز",
        color: "red",
    },
    {
        text: "آبی",
        color: "blue",
    },
    {
        text: "مشکی",
        color: "black",
    },
    {
        text: "سفید",
        color: "white",
    },
];

function App() {
    const background = (color) => {
        document.body.style.backgroundColor = color;
    };
    return (
        <>
            {btnColor.map((item, index) => (
                <button key={index + 1} onClick={() => background(item.color)}>
                    {item.text}
                </button>
            ))}
        </>
    );
}
export default App;
Kristis JavaScript 
from tkinter import *
window = Tk()
window.minsize(200, 200)
window.maxsize(300, 300)
window.config(bg="white")


def color_green():
    window.config(bg="green")


def color_red():
    window.config(bg="red")


def color_blue():
    window.config(bg="blue")


def color_white():
    window.config(bg="white")


def color_black():
    window.config(bg="black")


but_green = Button(window, fg="green", text="green", command=color_green)
but_red = Button(window, fg="red", text="red", command=color_red)
but_blue = Button(window, fg="blue", text="blue", command=color_blue)
but_white = Button(window, fg="silver", text="white", command=color_white)
but_black = Button(window, fg="black", text="black", command=color_black)
but_green.grid(row=0, column=0, padx=10, pady=10)
but_red.grid(row=0, column=1, padx=10, pady=10)
but_blue.grid(row=1, column=0, padx=10, pady=10)
but_white.grid(row=1, column=1, padx=10, pady=10)
but_black.grid(row=2, column=0, columnspan=2, padx=10, pady=10)

window.mainloop()
Bat.batmany Python 
import customtkinter as ctk
from tkinter import messagebox

app = ctk.CTk()
app.title("T_Color")
app.geometry("220x70")

frame = ctk.CTkFrame(app , corner_radius = 0)
frame.pack(fill = "both" , expand = True)

label = ctk.CTkLabel(frame , text = "تغییر تم برنامه" , font = ("B nazanin" , 17))
label.pack(pady = 1)

def changecolor(color):
     if color == "روشن":
          ctk.set_appearance_mode("Light")
     elif color == "تیره":
          ctk.set_appearance_mode("Dark")
     elif color == "سیستم":
          ctk.set_appearance_mode("System")

menu_color = ctk.CTkOptionMenu(frame , values = ["سیستم" , "روشن" , "تیره"] , command = changecolor , font = ("B nazanin" , 15))
menu_color.pack(pady = 1)


app.mainloop()
Shayancoder Python 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
            padding: 50px;
        }
        select{
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <select onchange="changBackgraund(this.value)">
        <option value="#ffcccc">red</option>
        <option value="#ccffcc">green</option>
        <option value="#ccccff">blue</option>
        <option value="#ffffff">waite</option>
        <option value="#000000">black</option>
    </select>
    <script>
        let changBackgraund=(color)=>{
            document.body.style.backgroundColor=color
        }
    </script>
</body>
</html>
Maryam.n HTML & CSS 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Change-Color</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .note{
            font-family: sans-serif , Arial;
            font-size: 2rem;
            font-weight: bold;
            border: 4px solid black;
            border-radius: 10px;
            text-shadow: 5px 5px 8px #66e666;
            margin: 100px;
            padding: 20px;
        }
        .color{
            text-align: center;
            width: 150px;
            height: 50px;
            padding: 5px;
            font-family: sans-serif , Arial;
            font-weight: bolder;
            text-shadow: 5px 5px 8px #66e666;
            border: 5px solid black;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<div class="note">
    <h1>please pick color</h1>
</div>
<div>
    <select class="color">
        <option value="white">White</option>
        <option value="crimson">Crimson</option>
        <option value="forestgreen">Forestgreen</option>
        <option value="dodgerblue">Dodgerblue</option>
        <option value="aqua">Aqua</option>
        <option value="gray">Gray</option>
        <option value="chocolate">Chocolate</option>
        <option value="goldenrod">Goldenrod</option>
    </select>
</div>

<script>
    const grabColor = document.querySelector(".color");
    grabColor.addEventListener('change' , function (){
    const selectedColor = grabColor.value;
    grabColor.style.backgroundColor = selectedColor;
    if (selectedColor){
        document.body.style.backgroundColor = selectedColor;
    }
    });
</script>
</body>
</html>
User 271 JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice</title>
    <style>

      .color {
        width: 100px;
        height: 100px;
      }
      #red {
        background-color: red;
      }
      #green {
        background-color: green;
      }
      #blue {
        background-color: blue;
      }
      #white {
        background-color: white;
      }
      #black {
        background-color: black;
      }
    </style>
</head>
<body id="bg">
  <h1>Practices</h1>

  <p>Select a color :</p>

  <div id="red" class="color"> red </div>
  <div id="green" class="color"> green </div>
  <div id="blue" class="color"> blue </div>
  <div id="white" class="color"> white </div>
  <div id="black" class="color"> black </div>

  <script>
    document.getElementById("red").addEventListener("click",() => {
      document.getElementById("bg").style.backgroundColor = "red"
    })
    document.getElementById("green").addEventListener("click",() => {
      document.getElementById("bg").style.backgroundColor = "green"
    }) 
    document.getElementById("blue").addEventListener("click",() => {
      document.getElementById("bg").style.backgroundColor = "blue"
    })
        document.getElementById("white").addEventListener("click",() => {
      document.getElementById("bg").style.backgroundColor = "white"
    })
    document.getElementById("black").addEventListener("click",() => {
      document.getElementById("bg").style.backgroundColor = "black"
    })
  </script>
</body>
</html>
Programmer JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM</title>

</head>
<body>
<select id="changeColor">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value=""></option>
</select>
<button id="submitBtn">ثبت انتخاب</button>
    <script>
      const bgcolorchange = document.getElementById("changeColor");
  const submitBtn = document.getElementById("submitBtn");
  const body = document.body;

  bgcolorchange.addEventListener("change", function () {
    const selectedColor = this.value;
    if (selectedColor === "blue") {
      body.style.backgroundColor = "blue";
    }
  });

  submitBtn.addEventListener("click", function () {
    const selectedValue = bgcolorchange.value;

    if (selectedValue === "blue") {
      body.style.backgroundColor = "blue";
    } else if (selectedValue === "green") {
      body.style.backgroundColor = "green";
    } else if (selectedValue === "black") {
      body.style.backgroundColor = "black";
    }
  });
    </script>
</body>
</html>
User 4497 JavaScript HTML & CSS 
package opp;
import java.util.Scanner;
public class changecolor {
	public static void print(Object message) {
        System.out.println(message);
    }
    public static final String RESET = "\u001B[0m";
    public static final String BG_BLACK = "\u001B[40m";
    public static final String BG_RED = "\u001B[41m";
    public static final String BG_GREEN = "\u001B[42m";
    public static final String BG_YELLOW = "\u001B[43m";
    public static final String BG_BLUE = "\u001B[44m";
    public static final String BG_PURPLE = "\u001B[45m";
    public static final String BG_CYAN = "\u001B[46m";
    public static final String BG_WHITE = "\u001B[47m";
	public static void main(String[] args) {
		Scanner sc = new Scanner(System.in);
		System.out.println("For change color :"
				+ "\n1-blue" + "\n2-red" + "\n3-yellow\nPlease Enter the number:");
		int x = sc.nextInt();
		if(x==1) {
			print(BG_BLUE + "Changed background color to blue"); 
			
		}else if(x==2) {
			print(BG_RED + "Changed background color to red"); 
		}else if(x==3) {
			print(BG_YELLOW + "Changed background color to yellow"); 
		}
	}
}
Makcode Java 
from tkinter import *
from PIL import Image,ImageTk



class Backgrand:
    def __init__(self):
        self.windo = None
        self.bnt_black = None
        self.bnt_blue = None
        self.bnt_green = None
        self.btn_white = None
        self.btn_pink = None
        self.btn_close = None
        self.img = None
        self.icon = None

    def close_btn_enter(self,e):
        self.btn_close.config(background="brown",fg="white",cursor="hand2")

    def close_btn_leave(self,e):
        self.btn_close.config(background="purple",fg="white",cursor="arrow")


    def close_windo(self):
        self.windo.destroy()



    def bg_color(self,color):
        self.windo.config(background=color)



    def windo_bg(self):
        self.windo = Tk()
        self.windo.title("backgrand")
        self.windo.geometry("300x300")
        self.windo.resizable(False,False)
        self.img = Image.open("image/1157969.png")
        self.icon = ImageTk.PhotoImage(self.img)
        self.windo.iconphoto(False,self.icon)


        self.bnt_black = Button(self.windo,bg="black",width=5,command=lambda:self.bg_color("black"))
        self.bnt_black.pack(padx=5,pady=5)
        self.bnt_blue = Button(self.windo,bg="blue",width=5,command=lambda:self.bg_color("blue"))
        self.bnt_blue.pack(padx=5,pady=5)
        self.bnt_green = Button(self.windo,bg="green",width=5,command=lambda:self.bg_color("green"))
        self.bnt_green.pack(padx=5,pady=5)
        self.btn_white = Button(self.windo,bg="white",width=5,command=lambda:self.bg_color("white"))
        self.btn_white.pack(padx=5,pady=5)
        self.btn_pink = Button(self.windo,bg="pink",width=5,command=lambda:self.bg_color("pink"))
        self.btn_pink.pack(padx=5,pady=5)
        self.btn_close = Button(self.windo,text="close",font=("arial",16),bg="purple",fg="white",width=5,command=self.close_windo)
        self.btn_close.pack(padx=10,pady=10)



        self.btn_close.bind("<Enter>",self.close_btn_enter)
        self.btn_close.bind("<Leave>",self.close_btn_leave)



        self.windo.mainloop()

app = Backgrand()
app.windo_bg()
Sumy.amiri Python
<< صفحه قبل 1 2 صفحه بعد >>

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن