下面是一个简单的CSS脚本交互示例,该示例使用了JavaScript和CSS来创建一个简单的计算器。用户可以在网页上输入数字,然后点击“计算”按钮,计算器将自动计算并显示结果。
“`html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
input[type=”number”] {
width: 200px;
height: 20px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
.result {
width: 100px;
height: 20px;
background-color: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
</style>
</head>
<body>
<h1>计算器</h1>
<form>
<input type=”number” name=”num1″ placeholder=”数字1″>
<input type=”number” name=”num2″ placeholder=”数字2″>
<input type=”button” value=”计算” onclick=”javascript:eval(document.getElementsByName(‘num1’)[0].value) + eval(document.getElementsByName(‘num2’)[0].value)”>
<div class=”result”></div>
</form>
</body>
</html>
在这个示例中,大家使用了HTML中的<form>标签来创建表单,其中包含两个<input>标签和一个<input>标签,用于输入数字。大家还使用了CSS样式来定义输入框和结果div的样式。
在JavaScript中,大家使用了eval()函数来执行JavaScript代码。首先,大家获取了表单中的姓名为“num1”和“num2”的两个输入框的值,然后将它们相加,并将结果传递给eval()函数。最后,大家使用eval()函数将结果渲染到结果div中。
通过使用CSS和JavaScript,大家可以创建出各种复杂的交互式网页,从而丰富大家的生活和工作。