ساخت دکمه کپی شونده [برای کد تخفیف المنتور]
من خیلی دنبال این کد گشتم ولی چیز درست حسابی پیدا نکردم کسایی که دوست دارند یه دکمه کپی شونده داشته باشند هم می تونند درسایت خودشون به عنوان html و css و javscript وارد کنند و یا نیازی نیست برای المنتور افزونه جانبی نصب کرد کافیه با گذاشتن المان HTML این کد رو درونش کپی کنید و متن های شخصی کد تخفیف خودتون رو جایگزین متن های من بکنید . این کد زیر مخصوص کسایی هستش که نیاز به این دارند در المنتور این دکمه رو داشته باشند.
HTML دکمه کپی شونده :
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Copy Discount Code</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<button class=”copy-btn” onclick=”copyCode()”>کپی کد تخفیف</button>
<p id=”code” style=”display:none;”>DISCOUNT2024</p>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS دکمه کپی شونده(styles.css)
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.container {
text-align: center;
}
.copy-btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.copy-btn:hover {
background-color: #45a049;
}
JavaScript دکمه کپی شونده(script.js):
function copyCode() {
// Get the discount code text
var code = document.getElementById(“code”).innerText;
// Create a temporary textarea to hold the text
var tempTextarea = document.createElement(“textarea”);
tempTextarea.value = code;
document.body.appendChild(tempTextarea);
// Select the text in the textarea and copy it
tempTextarea.select();
document.execCommand(“copy”);
// Remove the temporary textarea
document.body.removeChild(tempTextarea);
// Notify the user that the code has been copied
alert(“کد تخفیف کپی شد: ” + code);
}
- HTML: ساختار اصلی صفحه را تعریف می‌کند، شامل یک دکمه و یک پاراگراف که کد تخفیف در آن قرار دارد.
- CSS: استایل دهی به دکمه و سایر عناصر صفحه.
- JavaScript: تابع
copyCodeبرای کپی کردن متن کد تخفیف به کلیپ بورد و نمایش پیغام به کاربر.
این کد به شما یک دکمه زیبا می‌دهد که با کلیک روی آن کد تخفیف کپی می‌شود و به کاربر اطلاع داده می‌شود که کد تخفیف کپی شده است. اگر سوال یا تغییری نیاز دارید، لطفاً بفرمایید!
منبع : خودم
