编程狮在线代码实例

Tab
<>
""
''
()
{}
[]
/
:
;
?
,
.
$
输入
运行
xxxxxxxxxx
 
<html>
<head>
<script type="text/javascript">
// JavaScript Document
function tiy_onload()
{
var PreVal=""
PreVal=document.getElementById("PreSelectedValue").value
if (PreVal!="")
  {
  test_demo_val(PreVal)
  var x=document.getElementsByTagName("input")
  var l=x.length
  for (i=0;i<l;i++)
    {
    if (x[i].value==PreVal)
      {
      x[i].checked=true
      }
    }
  }
}
​
function test_demo(obj)
{
test_demo_val(obj.value)
}
​
function test_demo_val(strValue)
{
​
var strId="DemoArea"
​
document.getElementById(strId).style.borderBottomLeftRadius=strValue;
​
document.getElementById("CodeValue").innerHTML=strValue;
}
</script>
<style>
/* CSS Document */
​
div#wrapper
  {
  width: 600px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  border:1px solid #c5c5c5;
  }
​
div#header
  {
  width: 600px;
  height: 90px;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  border-bottom: 1px solid #c5c5c5;
  }
​
#header h1
  {
  float: left;
  margin: 22px 0 0 5px;
  padding: 0;
  font-size: 27px;
  color: #a5a5a5;
  }
​
​
#SelArea
  {
  float: left;
  width: 480px;
  margin:0;
  padding:0;
  border: 0px solid #c5c5c5;
  }
​
#SelArea p
  {
  margin:20px;  
  }
​
#result
  {
  float: left;
  width: 478px;
  margin:0;
  padding:0;
  border: 0px solid #c5c5c5;
  }
​
#DemoArea
  {
  width: 450px;
  height: 280px;
  margin:0;
  padding:0;
  margin-left: 10px;
  background-color: #ffffff;
  border: 1px solid #c3c3c3;
  }
​
#CodeArea
  {
  width: 440px;
  margin:0;
  margin-left: 10px;
  margin-bottom:10px;
  padding: 5px;
  font-family: courier new;
  color: #222222;
  background-color: #f1f1f1;
  border: 1px solid #c3c3c3;
  }
​
#footer {
  width: 960px;
  clear: both;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  border-top: 1px solid #c5c5c5;
  }
​
#CodeValue
  {
  font-weight: bold;
  font-size: 12px;
  color: blue;
  }
​
#SelAreaCode
  {
  margin: 30px 15px 15px 15px;
  }
​
.help {
  float:left;
  margin:10px;
  }
​
.copyright {
  text-align:right;
  margin:0;
  padding:10px;
  }
​
.marked
  {
  color:#dd0000;
  font:bold 18px '微软雅黑';
  }
​
.note span
  {
  font-weight:bold;
  }
​
body
  {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align:center;
  }
​
h2
  {
  font: bold 16px '微软雅黑';
  margin: 5px 0 5px 5px;
  color: red;
  }
​
h3
  {
  font-size: 14px;
  margin: 10px;
  }
​
form
  {
  margin: 15px;
  }
​
ul, li
  {
  margin:0;
  padding:0;
  }
​
li
  {
  list-style:none;
  }
div#DemoArea
{
border-bottom-left-radius:10%;
​
}
</style>
</head>
<body>
​
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
​
<h3>border-bottom-left-radius:</h3>       
​
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="10%" />
<li><input autocomplete="off" type="radio" name="lpos" onClick="test_demo(this)" id="value_1" value="100px"    />100px</li>
<li><input autocomplete="off" type="radio" name="lpos" onClick="test_demo(this)" id="value_2" value="50px" />50px</li>
<li><input autocomplete="off" type="radio" name="lpos" onClick="test_demo(this)" id="value_3" value="10px" />10px</li>
<li><input autocomplete="off" type="radio" name="lpos" onClick="test_demo(this)" id="value_4" value="5px" />5px</li>
<li><input autocomplete="off" type="radio" name="lpos" onClick="test_demo(this)" id="value_5" value="3px" />3px</li>
<li><input autocomplete="off" type="radio" name="lpos" onClick="test_demo(this)" id="value_6" value="10%" checked="checked" />10%</li>
<li><input autocomplete="off" type="radio" name="lpos" onClick="test_demo(this)" id="value_7" value="50%" />50%</li>
<li><input autocomplete="off" type="radio" name="lpos" onClick="test_demo(this)" id="value_8" value="100%" />100%</li>
</ul>
</form>
​
​
​
</div>
​
​
<div id="result">
<h2>结果：</h2>
​
<div id="DemoArea">
​
</div>
​
<h2>CSS 代码：</h2>
​
<pre id="CodeArea">
div#DemoArea
{
border-bottom-left-radius:<span id="CodeValue">10%</span>;
}
</pre>
</div>
​
​
</div>
​
​
<script type="text/javascript">tiy_onload()</script>
</body>
</html>
实例代码
运行结果