本文介绍了计算器javascript css3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我如何使用JAVASCRIPT代码,我将它放在HTML代码的下面代码中



i这个代码是否为HTML:



HOW CAN I USE JAVASCRIPT CODE THAT I PUT IT IN BELOW CODE IN HTML CODE

i HAVE THIS CODE FOR HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/Site.css" rel="Stylesheet" type="text/css" />
    <script src="menu.js" type="text/javascript"></script>
</head>
<body  önclick="Click()">
    <div id="calculator">
        <div>
            Make Calculator with CSS3 and Java script By Omid dehaghin
        </div>
        <!-- نمایشگر و پاک کننده -->
        <div class="top">
            <span class="clear">پاک کردن</span>
            <div class="screen">
            </div>
        </div>
        <div class="keys">
            <!-- کلیدها -->
            <span>7</span> <span>8</span> <span>9</span> <span class="operator">+</span> <span>4</span>
            <span>5</span> <span>6</span> <span class="operator">-</span> <span>1</span> <span>2</span>
            <span>3</span> <span class="operator">÷</span> <span>0</span> <span>.</span> <span>
                class="eval">=</span> <span class="operator">x</span>
        </div>
    </div>
</body>
</html>





和JAVA脚本的这个代码:





AND THIS CODE FOR JAVA SCRIPT:

var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
//اضافه نمودن رویداد onclickبه همه ی کلید ها و عملگرها
function Click() {
    for (var i = 0; i < keys.length; i++) {
        keys[i]. önclick = function (e) {
            //در ابتدا ورودی ها و مقادیر دکمه ها را می گیریم
            var input = document.querySelector('.screen');
            var inputVal = input.innerHTML;
            var btnVal = this.innerHTML;
            //در این قسمت تنها کافی است که کلید هایی را که فشار داده شده است با استفاده از تابع محاسباتی EVAL به محاسبه ی مقادیر آن ها بپردازیم
            //حال اگر کلید Cکلیک شود تنها کافی است تمام مقدایر را پاک کنیم.
            if (btnVal == 'C') {
                input.innerHTML = '';
                decimalAdded = false;
            }
            //در صورتی که تساوی کلیک شود تنها کافی است که نتیجه محاسبه و نمایش داده شود
            else if (btnVal == '=') {
                var equation = inputVal;
                var lastChar = equation[equation.length - 1];
                //برای انجام محاسبات عملگرهای ضربدر و تقسیم باید به حالت معممولی خود در محاسبات جاوا اسکریپت تبدیل شوند   
                equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
                //هم چنین در پایان هر رشته ورودی نباید دات وجود داشته باشد لذا در این صورت باید حذف شود.
                if (operators.indexOf(lastChar) > -1 || lastChar == '.')
                    equation = equation.replace(/.$/, '');
                //محاسبه ی مقدار نهایی
                if (equation)
                    input.innerHTML = eval(equation);
                decimalAdded = false;
            }
            //به طور کلی محاسبات اصلی انجام شده است و ما در این قسمت تنها کافی است که مانند اینکه دو عملگر نباید بعد ازهم قرار بگیرند
            //و یا هیچ عملگری به جز تفریق نمی تواند در ابتدا قرار گیرد و یا تنها یک بار می توان از نشانه ی اعداد اعشاری استفاده کرد 
            //زمانی که عملگر کلیک شود
            else if (operators.indexOf(btnVal) > -1) {
                //آخرین مقدار را در نظر می گیریم
                var lastChar = inputVal[inputVal.length - 1];
                //اگر بخواهیم دو عملگر یعد از هم قرار نگیرند تنها کافیست که یا ورودی هیچ رشته ای نداشته باشد و یا آخرین مقدار رشته ای بدون کاراکتر باشد
                if (inputVal != '' && operators.indexOf(lastChar) == -1)
                    input.innerHTML += btnVal;
                //اگر بخواهیم از عملگرها فقط عملگر تفریق را اجازه دهیم که در ابتدا قرار گیرد به این صورت استفاده می کنیم 
                else if (inputVal == '' && btnVal == '-')
                    input.innerHTML += btnVal;
                //در صورتی که عملگری داشته باشیم و بخواهیم با عملگر جدیدی جایگزین شود 
                if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
                    //در صورتیکه به جای عمل گر از دات استفاده شود با استفاده از پایین با عملگر جایگزین می شود
                    input.innerHTML = inputVal.replace(/.$/, btnVal);
                }
                decimalAdded = false;
            }
            //  برای جلوگیری از تکرار دات بیش از یک بار می توان از فلگ زیر استفاده نمود
            //که در هر بار تساوی و یا پاک کردن ریست می شود
            else if (btnVal == '.') {
                if (!decimalAdded) {
                    input.innerHTML += btnVal;
                    decimalAdded = true;
                }
            }
            // در صورت استفاده از دیگر ورودی ها
            else {
                input.innerHTML += btnVal;
            }
            // پایان و قطع برنامه
            e.preventDefault();
        }
    }
}





和CSS3我有这个代码:





AND FOR CSS3 I HAVE THIS CODE:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;


	font: bold 14px Arial, sans-serif;
}
/*کدهای کلی صفحه*/
html {
	height: 100%;
	background: white;
	background: radial-gradient(circle, #fff 20%, #ccc);
	background-size: cover;
}
/*مشخصات مورد نیاز برای قسمت اصلی با آی دی calculatorکه در دو  خط آخر کدهای css3استفاده شده است.*/
#calculator {
	width: 325px;
	height: auto;

	margin: 100px auto;
	padding: 20px 20px 9px;

	background: #000000;
	background: linear-gradient(#9dd2ea, #8bceec);
	border-radius: 3px;
	box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/*قسمت مربوط به پاک کردن وclear صفحه*/
.top span.clear {
	float: left;
}
/*قسمت مربوط به نمایشگر کلید ها*/
.top .screen {
	height: 40px;
	width: 212px;

	float: right;

	padding: 0 10px;

	background: rgba(0, 0, 0, 0.2);
	/*CSS3*/
	border-radius: 3px;
	box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/*CSS3*/
	font-size: 17px;
	line-height: 40px;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	text-align: right;
	letter-spacing: 1px;
}
/*بقیه مشخصات و تنظیمات نیز بنا بر نیاز ایجاد گردیده است.*/
.keys, .top {overflow: hidden;}

.keys span, .top span.clear {
	float: left;
	position: relative;
	top: 0;

	cursor: pointer;

	width: 66px;
	height: 36px;

	background: white;
	border-radius: 3px;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);

	margin: 0 7px 11px 0;

	color: #888;
	line-height: 36px;
	text-align: center;


	user-select: none;


	transition: all 0.2s ease;
}

.keys span.operator {
	background: #FFF0F5;
	margin-right: 0;
}
.keys span.eval {
	background: #f1ff92;
	box-shadow: 0px 4px #9da853;
	color: #888e5f;
}
.top span.clear {
	background: #ff9fa8;
	box-shadow: 0px 4px #ff7c87;
	color: white;
}

.keys span:hover {
	background: #9c89f6;
	box-shadow: 0px 4px #6b54d3;
	color: white;
}
.keys span.eval:hover {
	background: #abb850;
	box-shadow: 0px 4px #717a33;
	color: #ffffff;
}
.top span.clear:hover {
	background: #f68991;
	box-shadow: 0px 4px #d3545d;
	color: white;
}

.keys span:active {
	box-shadow: 0px 0px #6b54d3;
	top: 4px;
}
.keys span.eval:active {
	box-shadow: 0px 0px #717a33;
	top: 4px;
}
.top span.clear:active {
	top: 4px;
	box-shadow: 0px 0px #d3545d;
}

推荐答案






AND FOR CSS3 I HAVE THIS CODE:





AND FOR CSS3 I HAVE THIS CODE:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;


	font: bold 14px Arial, sans-serif;
}
/*کدهای کلی صفحه*/
html {
	height: 100%;
	background: white;
	background: radial-gradient(circle, #fff 20%, #ccc);
	background-size: cover;
}
/*مشخصات مورد نیاز برای قسمت اصلی با آی دی calculatorکه در دو  خط آخر کدهای css3استفاده شده است.*/
#calculator {
	width: 325px;
	height: auto;

	margin: 100px auto;
	padding: 20px 20px 9px;

	background: #000000;
	background: linear-gradient(#9dd2ea, #8bceec);
	border-radius: 3px;
	box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/*قسمت مربوط به پاک کردن وclear صفحه*/
.top span.clear {
	float: left;
}
/*قسمت مربوط به نمایشگر کلید ها*/
.top .screen {
	height: 40px;
	width: 212px;

	float: right;

	padding: 0 10px;

	background: rgba(0, 0, 0, 0.2);
	/*CSS3*/
	border-radius: 3px;
	box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/*CSS3*/
	font-size: 17px;
	line-height: 40px;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	text-align: right;
	letter-spacing: 1px;
}
/*بقیه مشخصات و تنظیمات نیز بنا بر نیاز ایجاد گردیده است.*/
.keys, .top {overflow: hidden;}

.keys span, .top span.clear {
	float: left;
	position: relative;
	top: 0;

	cursor: pointer;

	width: 66px;
	height: 36px;

	background: white;
	border-radius: 3px;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);

	margin: 0 7px 11px 0;

	color: #888;
	line-height: 36px;
	text-align: center;


	user-select: none;


	transition: all 0.2s ease;
}

.keys span.operator {
	background: #FFF0F5;
	margin-right: 0;
}
.keys span.eval {
	background: #f1ff92;
	box-shadow: 0px 4px #9da853;
	color: #888e5f;
}
.top span.clear {
	background: #ff9fa8;
	box-shadow: 0px 4px #ff7c87;
	color: white;
}

.keys span:hover {
	background: #9c89f6;
	box-shadow: 0px 4px #6b54d3;
	color: white;
}
.keys span.eval:hover {
	background: #abb850;
	box-shadow: 0px 4px #717a33;
	color: #ffffff;
}
.top span.clear:hover {
	background: #f68991;
	box-shadow: 0px 4px #d3545d;
	color: white;
}

.keys span:active {
	box-shadow: 0px 0px #6b54d3;
	top: 4px;
}
.keys span.eval:active {
	box-shadow: 0px 0px #717a33;
	top: 4px;
}
.top span.clear:active {
	top: 4px;
	box-shadow: 0px 0px #d3545d;
}



这篇关于计算器javascript css3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 18:34