اذهب إلى المحتوى

السؤال

نشر (معدل)

السلام عليكم اخوتي الاعزاء مشاهدين هذا الطلب 

هذا كود لأدة تحويل كود الوان hex الي كود الوان rgb علام اعتقد ان الخطا في javascript ولا استطيع اصلاحة واتمني ان يصلحه احد لي وشكرا

<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
:root {
  --shortTiming: 0.3s;
  --timing: 1.5s;
  --longTiming: 3s;
  --converter-color: white;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
  font-family: "Montserrat";
  background: #f5f5f5;
}
body *,
body *:after,
body *:before {
  box-sizing: inherit;
}

* {
  position: relative;
}
.color-block {
  width: 100px;
  height: 100%;
  background: var(--color-block-bg);
  border-radius: 8px;
  box-shadow: 0 0.5vmin 1vmin rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

#converter .error {
  color: #e57373;
}
#converter .color-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--converter-color);
  width: 300px;
  height: 100px;
}
#converter .converter__hex {
  display: flex;
  height: 4rem;
  align-items: center;
  border-radius: 8px;
  max-width: 400px;
  overflow: hidden;
  background: #37474f;
  color: white;
}
#converter .converter__hex .hash {
  padding: 10px;
  width: 30px;
  display: inline-block;
}
#converter .converter__hex input {
  flex: 2;
  min-width: 100px;
  height: 100%;
  font-size: 2rem;
  padding-left: 10px;
  letter-spacing: 5px;
  color: #37474f;
  margin: 0;
}
#converter .converter__hex button {
  border: none;
  margin: 0;
  -webkit-appearance: button;
  height: 100%;
  flex: 1;
  background: #9575cd;
  outline: none;
  color: white;
  font-size: 1rem;
}
#converter .converter__hex button:hover {
  background: #37474f;
}

</style>
	<div class="divider from-guide">
		👍
		<h3>Great work, You did it!!!</h3>
	</div>
	<section class="converter">
		<h2>In case you didnt do the math with us</h2>
		<p>Here is a hex to rgb converter that uses the above algorithm.</p>
		<div id="converter">
			<h3>Hex 2 RGB Converter</h3>
			<div class="converter__wrapper">
				<div class="color-block">rgb(255,255,255)</div>
				<div class="converter__hex">
					<span class="hash">#</span> <input type="text" />
					<button>convert</button>
				</div>
				<div class="error"></div>
			</div>
		</div>
<script>

//converter
const newError = msg => {
	const errorTag = document.querySelector(".error");
	errorTag.innerHTML = msg;
};
const removeError = () => {
	const errorTag = document.querySelector(".error");
	errorTag.innerHTML = "";
};
const base16 = {
	0: 0,
	1: 1,
	2: 2,
	3: 3,
	4: 4,
	5: 5,
	6: 6,
	7: 7,
	8: 8,
	9: 9,
	a: 10,
	b: 11,
	c: 12,
	d: 13,
	e: 14,
	f: 15
};

const convertBtn = document.querySelector("#converter button");
convertBtn.addEventListener("click", function() {
	removeError();
	const input = document.querySelector("#converter input").value;
	if (input.length !== 6) return newError("must have exactly 6 values");
	const hex = input.split("");
	const r = hex
		.splice(0, 2)
		.map((n, index) => (index === 1 ? base16[n] : 16 * base16[n]))
		.reduce((total, n) => total + n, 0);
	const g = hex
		.splice(0, 2)
		.map((n, index) => (index === 1 ? base16[n] : 16 * base16[n]))
		.reduce((total, n) => total + n, 0);
	const b = hex
		.splice(0, 2)
		.map((n, index) => (index === 1 ? base16[n] : 16 * base16[n]))
		.reduce((total, n) => total + n, 0);

	if (isNaN(r) || isNaN
تم التعديل في بواسطة ابراهيم محمد9

Recommended Posts

  • 0
نشر

أهلًا بك،

قد جربت هذه الشيفرة البسيطة لتحويل كود الوان hex الي كود الوان rgb وأدت الغرض معي بشكل ممتاز.. ربما تكون أبسط لك إن أردت


<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>hex to rgba converter</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#result
{
font-size: 20px;
font-weight:bold;
}
</style>
</head>
<body align="center">
<h1>hex to rgba converter</h1>
<form class="form-inline">
 <div class="form-group">
 <label class="sr-only" for="hexcolor">Hex Color</label>
 <div class="input-group">
 <div class="input-group-addon">#</div>
 <input type="text" class="form-control" id="hexcolor" placeholder ="Enter Hex">
 </div>
 <div class="input-group">
 <div class="input-group-addon">Opacity</div>
 <input type="number" class="form-control" id="opacity" value="70">
 </div>
 </div>
 <button type="submit" id="convert" class="btn btn-primary">Convert</button>
</form>
<div id="result"></div>
</body>
<script>
$(document).ready(function() {
 
 $('#convert').click(function()
 {
function hex2rgba_convert(hex,opacity){
 hex = hex.replace('#','');
 r = parseInt(hex.substring(0,2), 16);
 g = parseInt(hex.substring(2,4), 16);
 b = parseInt(hex.substring(4,6), 16);

 result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
 return result;
}
var color = $('#hexcolor').val();
var opacity = $('#opacity').val();
$('#result').html(hex2rgba_convert(color,opacity));
return false;
 }); 
 });
</script>
</html>

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...