下面的數(shù)字其實是一個小列表ul?li,你可以把li設(shè)置出邊框?設(shè)置border-radius屬性為50%,就能實現(xiàn)圓圈效果了.
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了弓長嶺免費建站歡迎大家使用！
ul
li1/li
li2/li
li3/li
/ul
style
li{border:solid?1px?purple;border-radius:50%;magin-right:10px?}
/style
//即可實現(xiàn)數(shù)字邊框變成圓形
div style="width:100px; height:100px; border-radius:50%; overflow:hidden;"
img src=""
/div
1、JS畫圓
script type="text/javascript"
//功能：畫實心圓
//參數(shù)：圓心坐標(biāo)，半徑，精確度，背景顏色
//主要用到了中學(xué)時的圓的一些特征公式呵呵
function SolidCircle(centreX, centreY, radius, precision, color){
var cx = Math.abs(parseInt(centreX));
var cy = Math.abs(parseInt(centreY));
var r = parseInt(radius2 ? 60 : radius);
var p = parseInt(precision1 ? 1 : precision);
var c = color;
var y;
for(var x=cx-r; x=cx+r; x+=p){
y = cy - Math.sqrt(Math.pow(r, 2) - Math.pow(cx - x, 2));
document.write('img style="background:'+c+'; border:1 solid '+c+'; width:'+p+'; height:'+parseInt(2*Math.sqrt(Math.pow(r, 2) - Math.pow(cx - x, 2)))+'; position:absolute; top:'+parseInt(y)+'; left:'+parseInt(x)+';"');
}
//alert("一共有 " + document.all.length + " 個 img");
}
SolidCircle(450, 100, 100, 1, "green");
/script
2、計算器的連加原理其實和連續(xù)計算的原理是一樣的，所以，在JS里面一定要定義一個全局變量，不論是加減乘除都調(diào)用這個變量即可。下面是一段完整的計算器代碼，你可以參考一下，也可以解決你的問題。
FORM name="Keypad" action=""
TABLE
B
TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5
TR
TD colspan=3 align=middle
input name="ReadOut" type="Text" size=24 value="0" width=100%
/TD
TD
/TD
TD
input name="btnClear" type="Button" value=" C " onclick="Clear()"
/TD
TDinput name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()"
/TD
/TR
TR
TD
input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)"
/TD
TD
input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)"
/TD
TD
input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)"
/TD
TD
/TD
TD
input name="btnNeg" type="Button" value=" +/- " onclick="Neg()"
/TD
TD
input name="btnPercent" type="Button" value=" % " onclick="Percent()"
/TD
/TR
TR
TD
input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)"
/TD
TD
input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)"
/TD
TD
input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)"
/TD
TD
/TD
TD align=middleinput name="btnPlus" type="Button" value=" + " onclick="Operation('+')"
/TD
TD align=middleinput name="btnMinus" type="Button" value=" - " onclick="Operation('-')"
/TD
/TR
TR
TD
input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)"
/TD
TD
input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)"
/TD
TD
input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)"
/TD
TD
/TD
TD align=middleinput name="btnMultiply" type="Button" value=" * " onclick="Operation('*')"
/TD
TD align=middleinput name="btnDivide" type="Button" value=" / " onclick="Operation('/')"
/TD
/TR
TR
TD
input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)"
/TD
TD
input name="btnDecimal" type="Button" value=" . " onclick="Decimal()"
/TD
TD colspan=3
/TD
TD
input name="btnEquals" type="Button" value=" = " onclick="Operation('=')"
/TD
/TR
/TABLE
/TABLE
/B
/FORM
/CENTER
font face="Verdana, Arial, Helvetica" size=2
SCRIPT LANGUAGE="JavaScript"
!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End --
/SCRIPT
補充哦，怕在百度hi上給你的留言你看不到呵呵
----------------------------------------
那個圓也是沒有問題的，因為給學(xué)生上課講過這個算法，它有些類似于微積分中圓的面積求法，其實是將圓沿X軸進行細分，細分的精度由precision決定，所以，當(dāng)你在這段代碼中將精確降低的話，圓的邊界就很粗糙，把細分后的每一塊把它看成一個圖形，這樣累加起來，不就組成一個實習(xí)圓了嘛（截止到這兒，講的是算法問題）。然后呢，代碼的精髓在于那個For循環(huán)，(var x=cx-r; x=cx+r; x+=p)表示變量是從圓的最左邊開始的[因為圓心cx-半徑r得到最左邊，下同]，到最右邊結(jié)束[cx+r]，而每次增加多少呢，是由精度控制的[x+=p]，然后循環(huán)體內(nèi)的代碼的精髓是圖片的寬度和高度那塊兒，寬度當(dāng)然就等于精度了，高度的那個公式y(tǒng) = sqrt(r^2 - x^2)是畫圓的必備公式，你應(yīng)該明白吧。好了，到此為止，這段代碼的原理和實現(xiàn)我都說到這兒了，希望你能明白。
重慶分公司
重慶分公司
