<html>
<head>
<meta charset="utf-8" />
<title>设计递归函数f0(N)</title>
</head>
<body>
<script>
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
function fibonacci(n) {
if (n <= 1) {
return n;
} else {
return (fibonacci(n - 1) + fibonacci(n - 2));
}
}
// 输出斐波那契数列的前20项
for (let i = 0; i < 20; i++) {
console.log(fibonacci(i), end = ' ');
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>水仙花</title>
</head>
<body>
<script>
function shuiXian(k) {
var num = k.toString();
var len = num.length;
if (len !== 3) {
return false;
}
var sum = 0;
for (var i = 0; i < len; i++) {
sum += Math.pow(parseInt(num[i]), 3);
}
if (sum === k) {
return true;
} else {
return false;
}
}
var start = 100;
var end = 999;
for (var i = start; i <= end; i++) {
if (shuiXian(i)) {
console.log(i);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>完美数</title>
</head>
<body>
<script>
function wanmei(k) {
var sum = 1;
for (var i = 2; i < k / 2; i++) {
if (k % i === 0) {
sum += i;
}
}
if (sum === k && k != 1) {
return true;
} else {
return false;
}
}
for (var i = 2; i < 10000; i++) {
if (wanmei(i)) {
console.log(i);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>同构数</title>
</head>
<body>
<script>
function tonggou(k) {
var square = Math.pow(k, 2).toString();
for (var i = 0; i < square.length; i++) {
if (square.charAt(i) === k.toString()) {
return true;
}
}
return false;
}
for (var i = 1; i <= 100; i++) {
if (tonggou(i)) {
console.log(i);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 50px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">留言板</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">电话</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
// 学生填写部分
var nav = document.querySelector('.nav');
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
};
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
};
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>将水果加入购物车</title>
<style>
.u1 {
/* display: block; */
width: 65px;
height: 80px;
margin-top: 20px;
/* border: 1px black solid; */
list-style-type: square;
position: relative;
float: left;
}
.d1 {
/* display: block; */
width: 100px;
height: 80px;
margin-top: 20px;
margin-left: 20px;
/* border: 1px blue solid; */
float: left;
position: relative;
}
.d2 {
clear: both;
}
</style>
</head>
<body>
<h1>今日水果</h1>
<ul id="myList" class="u1">可选项:
<!-- The notes -->
<li>苹果</li>
<li>葡萄</li>
<li>橘子</li>
</ul>
<div class="d1">
请选择：<br />
<input type="radio" name="ck1" /><span>Apple</span><br />
<input type="radio" name="ck1" checked /><span>Grape</span><br />
<input type="radio" name="ck1" /><span>Orange</span>
</div>
<div class="d2"></div>
<hr>
<button onclick="myFunction()">加入购物车</button>
<ul id="op"></ul>
<script>
var count = 0;
function myFunction() {
count++;
if (count > 3) {
alert("最多只能选三次");
return;
}
var mu = document.getElementById('myList');
var in1 = document.querySelectorAll("input");
for (let k = 0; k < in1.length; k++) {
if (in1[k].checked) {
var item = mu.children[k];
var cloneItem = item.cloneNode(true);
document.getElementById('op').appendChild(cloneItem);
}
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>将水果加入购物车-可多选</title>
<style>
.u1 {
/* display: block; */
width: 65px;
height: 80px;
margin-top: 20px;
/* border: 1px black solid; */
list-style-type: square;
position: relative;
float: left;
}
.d1 {
/* display: block; */
width: 100px;
height: 80px;
margin-top: 20px;
margin-left: 20px;
/* border: 1px blue solid; */
float: left;
position: relative;
}
.d2 {
clear: both;
}
</style>
</head>
<body>
<h1>今日水果</h1>
<ul id="myList" class="u1">可选项:
<!-- The notes -->
<li>苹果</li>
<li>葡萄</li>
<li>橘子</li>
</ul>
<div class="d1">
请选择：<br />
<input type="checkbox" name="ck1" /><span>Apple</span><br />
<input type="checkbox" name="ck1" checked /><span>Grape</span><br />
<input type="checkbox" name="ck1" /><span>Orange</span>
</div>
<div class="d2"></div>
<hr>
<button>加入购物车</button>
<ul id="op"></ul>
<script>
//学生填写部分
var count = 0;
var addbutton = document.querySelector('button');
addbutton.addEventListener('click',function(){
count++;
if(count > 3){
alert("最多只能选三次");
return;
}
var mu = document.getElementById('myList');
var inputs = document.querySelectorAll("input");
for (let k = 0; k < inputs.length; k++) {
console.log(inputs[k]);
if (inputs[k].checked) {
var item = mu.children[k];
var cloneItem = item.cloneNode(true); //如果没有true，内容不会复制
document.getElementById('op').appendChild(cloneItem);
}
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>将水果加入购物车-下拉选</title>
</head>
<body>
<h1>今日水果</h1>
<h3>请选你要吃的水果:</h3>
<select class="course" id="mySelect">
<option>葡萄</option>
<option selected="selected">苹果</option>
<option>梨子</option>
<option>香蕉</option>
</select>
<br /><br />
<ol id="op"></ol>
<script>
var count = 0;
document.getElementById("mySelect").addEventListener("change", function() {
if (count < 3) {
var selectedOption = this.value;
var ol = document.getElementById("op");
var li = document.createElement("li");
li.textContent = selectedOption;
ol.appendChild(li);
count++;
} else {
alert("最多只能选三次");
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>表单控件与属性2</title>
<style>
label {
line-height: 30px;
}
</style>
</head>
<body>
<form action="" method="post">
<h4 id="h4a">input的若干type属性示例</h4>
<label>color属性<input id="color1" type="color" value="#aaaaaa"></label><br>
<label>range属性 <input type="range" id="range1" max="100" min="0" step="5" onchange="show()"
value="70"></label><br>
<label>url属性 <input type="url" id="myUrl" value="http://www.qq.com"></label><br>
<p>注1：在此框中输入完整的URL地址之前点击超链，访问baidu网站。</p>
<p>注2：在此框中输入完整的URL地址之后点击"Hello"按钮，再点击超链，访问指定网站。</p>
<input type="button" value="Hello" id="btn"><br>
<a href="https://www.baidu.com" id="la">访问百度网站。</a><br>
<label>datetime-local属性<input type="datetime-local" id="dt"> </label><br>
</form>
<br><br>
<script>
color1.onchange = function(e) {
console.log("你在调色板中选择的颜色是:");
console.log(this.value);
h4a.style.color = this.value;
}
function show(e) {
var r1 = document.getElementById("range1");
console.log("你在range控件中选择的数值1是:");
console.log(Number(r1.value) * 2);
}
range1.onchange = function() {
console.log("你在range控件中选择的数值2是:");
console.log(this.value);
console.log(Number(this.value));
console.log(Number(this.value) * 2);
}
btn.onclick = function() {
var urltext = "https://" + myUrl.value;
console.log(urltext);
la.href = urltext;
}
dt.onchange = function() {
console.log(dt.value);
var yd = new Date(dt.value);
console.log(yd.getDate());
}
</script>
</body>
</html>
/*全局控制*/
body{font-size:12px; font-family:"宋体"; color:#515151;}
/*重置浏览器的默认样式*/
body,h2,form,table{padding:0; margin:0;}
#box{ /*控制最外层的大盒子*/
width:560px;
height:500px;
border:1px solid #CCC;
padding:20px;
margin:15px auto 0;
}
.header{ /*控制标题*/
font-size:22px;
color:#0b0b0b;
padding-bottom:30px;
}
.header span{ /*控制标题中的小号字体*/
font-size:12px;
font-weight:normal;
}
td{padding-bottom:26px;}
td.left{
width:78px;
text-align:right; /*使提示信息居右对齐*/
padding-right:8px; /*拉开提示信息和表单控件间的距离*/
}
.red{color:#F00;} /*控制提示信息中星号的颜色*/
.txt01,.txt02{ /*定义前两个单行文本输入框相同的样式*/
width:264px;
height:12px;
border:1px solid #CCC;
padding:3px 3px 3px 26px;
font-size:12px;
color:#949494;
}
.txt01{ /*定义第一个单行文本输入框的背景图像*/
background:url("") no-repeat 2px center;
}
.txt02{ /*定义第二个单行文本输入框的背景图像*/
background:url("") no-repeat 2px center;
}
.txt03{ /*定义第三个单行文本输入框的样式*/
width:122px;
height:12px;
padding:3px 3px 3px 26px;
font-size:12px;
background:url("") no-repeat 2px center;
}
.course{ width:184px;} /*定义下拉菜单的宽度*/
.message{ /*定义多行文本输入框的样式*/
width:432px;
height:80px;
font-size:12px;
color:#949494;
padding:3px;
}
<html>
<head>
<meta charset="utf-8">
<title>表单控件属性的读与写</title>
<link href="input_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="box">
<h2 class="header">在线报名表<span>(以下信息是报名的重要依据，请认真填写)</span></h2>
<form action="#" method="post">
<table class="content">
<tr>
<td class="left">姓名<span class="red">*</span></td>
<td><input type="text" value="报名的重要依据，请认真填写" id="myName" class="txt01" /></td>
</tr>
<tr>
<td class="left">手机<span class="red">*</span></td>
<td><input type="number" placeholder="此处该输入手机号码" id="myTel" class="txt02" /></td>
</tr>
<tr>
<td class="left">性别<span class="red">*</span></td>
<td>
<label for="boy"><input type="radio" name="sex" id="boy" />男</label>
<label for="girl"><input type="radio" name="sex" id="girl" />女</label>
</td>
</tr>
<tr>
<td class="left">邮箱<span class="red">*</span></td>
<td><input type="email" id="myEmail" class="txt03" /></td>
</tr>
<tr>
<td class="left">意向课程<span class="red">*</span></td>
<td>
<select class="course" id="mySelect">
<option>网站设计</option>
<option selected="selected">前端开发</option>
<option>UI设计</option>
<option>数据分析</option>
</select>
</td>
</tr>
<tr>
<td class="left">了解渠道</td>
<td>
<label name="liaojie"><input type="checkbox" name="qudao" />baidu</label>
<label name="liaojie"><input type="checkbox" name="qudao" />论坛</label>
<label name="liaojie"><input type="checkbox" name="qudao" />朋友推荐</label>
<label name="liaojie"><input type="checkbox" name="qudao" checked />CSDN网站</label>
<label name="liaojie"><input type="checkbox" name="qudao" />抖音</label>
<label name="liaojie"><input type="checkbox" name="qudao" />其他</label>
</td>
</tr>
<tr>
<td class="left">留言</td>
<td><textarea cols="50" rows="5" id="liuYan" class="message">
请简述您有没有设计基础，以及为什么选择学习网页平面UI设计？</textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" id="myBtn" value="报名" /></td>
</tr>
</table>
</form>
</div>
<script>
var yourName = document.getElementById("myName");
var yourTel = document.getElementByid("myTel");
var rk0 document.getElementById("boy");
var rk1 = document.getElementByid("girl");
var yourEmail = document.getElementById("myEmail");
var yourCourse = document.getElementById("mySelect");
var yourQudao = document.getElementsByName("qudao");
var liaoJie = document.getElementsByName("liaojie");
var liuYan = document.getElementById("liuYan");
var btn = document.getElementById("myBtn");
var selectCourse = "";
yourCourse.onchange = function() {
//console.log(yourCourse);
// console.log(yourCounse.options);
// console.log(yourCourse.options.selectedIndex);
var options = document.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
// alert( options[i].text );
selectCourse "你选择的课程是:" + options[i].text;
}
}
btn.onclick = function() {
// console.log("your name:"+yourName.value);// console.log("your Tel:"+yourTel,value); var yourliuyan = "";
if (rk0.checked) {
yourliuyan = "帅哥:" + yourName.value + "\t" + "your Tel:" + yourTel.value + "\t";
if (rk1.checked) {
yourliuyan = "美女:" + yourName.value + "\t" + "your Tel:" + yourTe1.value + "\t";
yourliuyan = yourliuyan + "\n你了解课程的渠道是:";
for (var j = 0; j < yourQudao.length; j++) {
if (yourQudao[j].checked) {
console.log(liaoJie[j].innerText);
yourliuyan = yourliuyan + liaoJie[j].innerText + "";
}
}
liuYan.value = yourliuyan + "\n" + selectCourse;
}
</script>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>设计递归函数f0(N)</title>
</head>
<body>
<script>
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
function fibonacci(n) {
if (n <= 1) {
return n;
} else {
return (fibonacci(n - 1) + fibonacci(n - 2));
}
}
// 输出斐波那契数列的前20项
for (let i = 0; i < 20; i++) {
console.log(fibonacci(i), end = ' ');
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>水仙花</title>
</head>
<body>
<script>
function shuiXian(k) {
var num = k.toString();
var len = num.length;
if (len !== 3) {
return false;
}
var sum = 0;
for (var i = 0; i < len; i++) {
sum += Math.pow(parseInt(num[i]), 3);
}
if (sum === k) {
return true;
} else {
return false;
}
}
var start = 100;
var end = 999;
for (var i = start; i <= end; i++) {
if (shuiXian(i)) {
console.log(i);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>完美数</title>
</head>
<body>
<script>
function wanmei(k) {
var sum = 1;
for (var i = 2; i < k / 2; i++) {
if (k % i === 0) {
sum += i;
}
}
if (sum === k && k != 1) {
return true;
} else {
return false;
}
}
for (var i = 2; i < 10000; i++) {
if (wanmei(i)) {
console.log(i);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>同构数</title>
</head>
<body>
<script>
function tonggou(k) {
var square = Math.pow(k, 2).toString();
for (var i = 0; i < square.length; i++) {
if (square.charAt(i) === k.toString()) {
return true;
}
}
return false;
}
for (var i = 1; i <= 100; i++) {
if (tonggou(i)) {
console.log(i);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 50px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">留言板</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">电话</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
// 学生填写部分
var nav = document.querySelector('.nav');
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
};
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
};
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>将水果加入购物车</title>
<style>
.u1 {
/* display: block; */
width: 65px;
height: 80px;
margin-top: 20px;
/* border: 1px black solid; */
list-style-type: square;
position: relative;
float: left;
}
.d1 {
/* display: block; */
width: 100px;
height: 80px;
margin-top: 20px;
margin-left: 20px;
/* border: 1px blue solid; */
float: left;
position: relative;
}
.d2 {
clear: both;
}
</style>
</head>
<body>
<h1>今日水果</h1>
<ul id="myList" class="u1">可选项:
<!-- The notes -->
<li>苹果</li>
<li>葡萄</li>
<li>橘子</li>
</ul>
<div class="d1">
请选择：<br />
<input type="radio" name="ck1" /><span>Apple</span><br />
<input type="radio" name="ck1" checked /><span>Grape</span><br />
<input type="radio" name="ck1" /><span>Orange</span>
</div>
<div class="d2"></div>
<hr>
<button onclick="myFunction()">加入购物车</button>
<ul id="op"></ul>
<script>
var count = 0;
function myFunction() {
count++;
if (count > 3) {
alert("最多只能选三次");
return;
}
var mu = document.getElementById('myList');
var in1 = document.querySelectorAll("input");
for (let k = 0; k < in1.length; k++) {
if (in1[k].checked) {
var item = mu.children[k];
var cloneItem = item.cloneNode(true);
document.getElementById('op').appendChild(cloneItem);
}
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>将水果加入购物车-可多选</title>
<style>
.u1 {
/* display: block; */
width: 65px;
height: 80px;
margin-top: 20px;
/* border: 1px black solid; */
list-style-type: square;
position: relative;
float: left;
}
.d1 {
/* display: block; */
width: 100px;
height: 80px;
margin-top: 20px;
margin-left: 20px;
/* border: 1px blue solid; */
float: left;
position: relative;
}
.d2 {
clear: both;
}
</style>
</head>
<body>
<h1>今日水果</h1>
<ul id="myList" class="u1">可选项:
<!-- The notes -->
<li>苹果</li>
<li>葡萄</li>
<li>橘子</li>
</ul>
<div class="d1">
请选择：<br />
<input type="checkbox" name="ck1" /><span>Apple</span><br />
<input type="checkbox" name="ck1" checked /><span>Grape</span><br />
<input type="checkbox" name="ck1" /><span>Orange</span>
</div>
<div class="d2"></div>
<hr>
<button>加入购物车</button>
<ul id="op"></ul>
<script>
//学生填写部分
var count = 0;
var addbutton = document.querySelector('button');
addbutton.addEventListener('click',function(){
count++;
if(count > 3){
alert("最多只能选三次");
return;
}
var mu = document.getElementById('myList');
var inputs = document.querySelectorAll("input");
for (let k = 0; k < inputs.length; k++) {
console.log(inputs[k]);
if (inputs[k].checked) {
var item = mu.children[k];
var cloneItem = item.cloneNode(true); //如果没有true，内容不会复制
document.getElementById('op').appendChild(cloneItem);
}
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>将水果加入购物车-下拉选</title>
</head>
<body>
<h1>今日水果</h1>
<h3>请选你要吃的水果:</h3>
<select class="course" id="mySelect">
<option>葡萄</option>
<option selected="selected">苹果</option>
<option>梨子</option>
<option>香蕉</option>
</select>
<br /><br />
<ol id="op"></ol>
<script>
var count = 0;
document.getElementById("mySelect").addEventListener("change", function() {
if (count < 3) {
var selectedOption = this.value;
var ol = document.getElementById("op");
var li = document.createElement("li");
li.textContent = selectedOption;
ol.appendChild(li);
count++;
} else {
alert("最多只能选三次");
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>表单控件与属性2</title>
<style>
label {
line-height: 30px;
}
</style>
</head>
<body>
<form action="" method="post">
<h4 id="h4a">input的若干type属性示例</h4>
<label>color属性<input id="color1" type="color" value="#aaaaaa"></label><br>
<label>range属性 <input type="range" id="range1" max="100" min="0" step="5" onchange="show()"
value="70"></label><br>
<label>url属性 <input type="url" id="myUrl" value="http://www.qq.com"></label><br>
<p>注1：在此框中输入完整的URL地址之前点击超链，访问baidu网站。</p>
<p>注2：在此框中输入完整的URL地址之后点击"Hello"按钮，再点击超链，访问指定网站。</p>
<input type="button" value="Hello" id="btn"><br>
<a href="https://www.baidu.com" id="la">访问百度网站。</a><br>
<label>datetime-local属性<input type="datetime-local" id="dt"> </label><br>
</form>
<br><br>
<script>
color1.onchange = function(e) {
console.log("你在调色板中选择的颜色是:");
console.log(this.value);
h4a.style.color = this.value;
}
function show(e) {
var r1 = document.getElementById("range1");
console.log("你在range控件中选择的数值1是:");
console.log(Number(r1.value) * 2);
}
range1.onchange = function() {
console.log("你在range控件中选择的数值2是:");
console.log(this.value);
console.log(Number(this.value));
console.log(Number(this.value) * 2);
}
btn.onclick = function() {
var urltext = "https://" + myUrl.value;
console.log(urltext);
la.href = urltext;
}
dt.onchange = function() {
console.log(dt.value);
var yd = new Date(dt.value);
console.log(yd.getDate());
}
</script>
</body>
</html>
/*全局控制*/
body{font-size:12px; font-family:"宋体"; color:#515151;}
/*重置浏览器的默认样式*/
body,h2,form,table{padding:0; margin:0;}
#box{ /*控制最外层的大盒子*/
width:560px;
height:500px;
border:1px solid #CCC;
padding:20px;
margin:15px auto 0;
}
.header{ /*控制标题*/
font-size:22px;
color:#0b0b0b;
padding-bottom:30px;
}
.header span{ /*控制标题中的小号字体*/
font-size:12px;
font-weight:normal;
}
td{padding-bottom:26px;}
td.left{
width:78px;
text-align:right; /*使提示信息居右对齐*/
padding-right:8px; /*拉开提示信息和表单控件间的距离*/
}
.red{color:#F00;} /*控制提示信息中星号的颜色*/
.txt01,.txt02{ /*定义前两个单行文本输入框相同的样式*/
width:264px;
height:12px;
border:1px solid #CCC;
padding:3px 3px 3px 26px;
font-size:12px;
color:#949494;
}
.txt01{ /*定义第一个单行文本输入框的背景图像*/
background:url("") no-repeat 2px center;
}
.txt02{ /*定义第二个单行文本输入框的背景图像*/
background:url("") no-repeat 2px center;
}
.txt03{ /*定义第三个单行文本输入框的样式*/
width:122px;
height:12px;
padding:3px 3px 3px 26px;
font-size:12px;
background:url("") no-repeat 2px center;
}
.course{ width:184px;} /*定义下拉菜单的宽度*/
.message{ /*定义多行文本输入框的样式*/
width:432px;
height:80px;
font-size:12px;
color:#949494;
padding:3px;
}
<html>
<head>
<meta charset="utf-8">
<title>表单控件属性的读与写</title>
<link href="input_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="box">
<h2 class="header">在线报名表<span>(以下信息是报名的重要依据，请认真填写)</span></h2>
<form action="#" method="post">
<table class="content">
<tr>
<td class="left">姓名<span class="red">*</span></td>
<td><input type="text" value="报名的重要依据，请认真填写" id="myName" class="txt01" /></td>
</tr>
<tr>
<td class="left">手机<span class="red">*</span></td>
<td><input type="number" placeholder="此处该输入手机号码" id="myTel" class="txt02" /></td>
</tr>
<tr>
<td class="left">性别<span class="red">*</span></td>
<td>
<label for="boy"><input type="radio" name="sex" id="boy" />男</label>
<label for="girl"><input type="radio" name="sex" id="girl" />女</label>
</td>
</tr>
<tr>
<td class="left">邮箱<span class="red">*</span></td>
<td><input type="email" id="myEmail" class="txt03" /></td>
</tr>
<tr>
<td class="left">意向课程<span class="red">*</span></td>
<td>
<select class="course" id="mySelect">
<option>网站设计</option>
<option selected="selected">前端开发</option>
<option>UI设计</option>
<option>数据分析</option>
</select>
</td>
</tr>
<tr>
<td class="left">了解渠道</td>
<td>
<label name="liaojie"><input type="checkbox" name="qudao" />baidu</label>
<label name="liaojie"><input type="checkbox" name="qudao" />论坛</label>
<label name="liaojie"><input type="checkbox" name="qudao" />朋友推荐</label>
<label name="liaojie"><input type="checkbox" name="qudao" checked />CSDN网站</label>
<label name="liaojie"><input type="checkbox" name="qudao" />抖音</label>
<label name="liaojie"><input type="checkbox" name="qudao" />其他</label>
</td>
</tr>
<tr>
<td class="left">留言</td>
<td><textarea cols="50" rows="5" id="liuYan" class="message">
请简述您有没有设计基础，以及为什么选择学习网页平面UI设计？</textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="button" id="myBtn" value="报名" /></td>
</tr>
</table>
</form>
</div>
<script>
var yourName = document.getElementById("myName");
var yourTel = document.getElementByid("myTel");
var rk0 document.getElementById("boy");
var rk1 = document.getElementByid("girl");
var yourEmail = document.getElementById("myEmail");
var yourCourse = document.getElementById("mySelect");
var yourQudao = document.getElementsByName("qudao");
var liaoJie = document.getElementsByName("liaojie");
var liuYan = document.getElementById("liuYan");
var btn = document.getElementById("myBtn");
var selectCourse = "";
yourCourse.onchange = function() {
//console.log(yourCourse);
// console.log(yourCounse.options);
// console.log(yourCourse.options.selectedIndex);
var options = document.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
// alert( options[i].text );
selectCourse "你选择的课程是:" + options[i].text;
}
}
btn.onclick = function() {
// console.log("your name:"+yourName.value);// console.log("your Tel:"+yourTel,value); var yourliuyan = "";
if (rk0.checked) {
yourliuyan = "帅哥:" + yourName.value + "\t" + "your Tel:" + yourTel.value + "\t";
if (rk1.checked) {
yourliuyan = "美女:" + yourName.value + "\t" + "your Tel:" + yourTe1.value + "\t";
yourliuyan = yourliuyan + "\n你了解课程的渠道是:";
for (var j = 0; j < yourQudao.length; j++) {
if (yourQudao[j].checked) {
console.log(liaoJie[j].innerText);
yourliuyan = yourliuyan + liaoJie[j].innerText + "";
}
}
liuYan.value = yourliuyan + "\n" + selectCourse;
}
</script>
</body>
</html>
