- 商品名称:XXXX
- 商品价格:XXXX
- 交易数量:XXXX
【1+X Web】1+X高级试题（5）
20029-计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>calculator</title>
<(1) rel="stylesheet" type="text/css" href="index.css"> <!--第（1）空-->
<script type="text/javascript" charset="utf-8" src="index.js"></script>
</head>
<(2)> <!--第（2）空-->
<div class="calculator">
<(3) class="output" value="0" id="iputNum" disabled="disabled"></(3)> <!--第（3）空-->
<div class="numbers">
<(3) type="(4)" value="7" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="8" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="9" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="4" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="5" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="6" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="1" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="2" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="3" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="0" onclick="numberClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="AC" onclick="cleanClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="=" onclick="equalClick()"> <!--第（3）空和第（4）空-->
</div>
<div class="operators">
<(3) type="(4)" value="*" onclick="operatorClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="-" onclick="operatorClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="+" onclick="operatorClick(value)"> <!--第（3）空和第（4）空-->
<(3) type="(4)" value="/" onclick="operatorClick('/')"> <!--第（3）空和第（4）空-->
</div>
</div>
</(2)> <!--第（2）空-->
</html>
20030-手机账本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>手机账本</title>
</head>
<body>
<(1) id="canvas" width="270px" height="480px" style="margin: 20px;"></(1)> <!--第（1）空-->
</body>
</html>
<script>
var book_income = {
"一月": "6500",
"二月": "5500",
"三月": "10500",
"四月": "8500",
"五月": "7500",
"六月": "5400",
"七月": "4700",
"八月": "8300",
"九月": "6660",
"十月": "5550",
"十一月": "14690",
"十二月": "8900",
}
var book_pay = {
"一月": "4500",
"二月": "4500",
"三月": "5500",
"四月": "6600",
"五月": "4300",
"六月": "3700",
"七月": "5600",
"八月": "7200",
"九月": "6000",
"十月": "4200",
"十一月": "10000",
"十二月": "5000",
}
// 网页加载完毕后立刻执行
window.(2) = function() { <!--第（2）空-->
let canvas = document.getElementById("canvas");
let ctx = (3).getContext("2d"); <!--第（3）空-->
drawList(ctx);
drawIndex(ctx);
drawNumber(ctx);
}
function drawList(ctx) {
ctx.strokeStyle = "black";
ctx.beginPath();
for (let i = 0; i < 5; i++) {
ctx.moveTo((270 / 4) * i, 0);
ctx.(4)((270 / 4) * i, 480); <!--第（4）空-->
}
for (let j = 0; j < 14; j++) {
ctx.(5)(0, (480 / 13) * j); <!--第（5）空-->
ctx.lineTo(270, (480 / 13) * j);
}
ctx.moveTo(0, 0);
ctx.lineTo(270 / 4, 480 / 13);
ctx.stroke();
}
function drawIndex(ctx) {
//设置阴影
ctx.shadowOffsetX = 1;
ctx.(6) = 1; <!--第（6）空-->
ctx.shadowBlur = 2;
ctx.(7) = "rgba(0,0,0,0.5)"; <!--第（7）空-->
//绘制坐标
//设置字体大小
ctx.(8) = "14px serif"; <!--第（8）空-->
ctx.fillText("月", 10, 30);
ctx.fillText("计", 45, 20);
ctx.fillText("收入", 88, 24);
ctx.fillText("支出", 155, 24);
ctx.fillText("总计", 222, 24);
let i = 1;
for (let val in book_income) {
if (i > 10) {
ctx.(9)(val, 15, 24 + 480 / 13 * i++); <!--第（9）空-->
} else {
ctx.(9)(val, 25, 24 + 480 / 13 * i++); <!--第（9）空-->
}
}
}
function drawNumber(ctx) {
let i = 1;
for (let val in book_income) {
ctx.fillText(book_income[val], 85, 24 + 480 / 13 * i++);
}
let j = 1;
for (let val in book_pay) {
ctx.fillText(book_pay[val], 155, 24 + 480 / 13 * j++);
}
//填充总计数据的代码
let k = 1;
let data = 0;
for (let val in book_pay) {
data = book_income[val] - book_pay[val];
if (data < 0) {
ctx.(10) = "red"; <!--第（10）空-->
} else {
ctx.fillStyle = "black";
}
ctx.fillText(data, 225, 24 + 480 / 13 * k++);
}
}
</script>
</script>
【canvas属性】
shadowOffsetX = float 阴影向右偏移量
shadowOffsetY = float 阴影向下偏移量
shadowBlur = float 阴影模糊效果
shadowColor = color 阴影颜色
【demo】
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.shadowColor = ‘rgba(0, 0, 0, 0.5)’;
ctx.fillRect(25, 25, 100, 100);
20031-在线答题器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线答题器</title>
<link rel="stylesheet" href="stylesheets/index.css">
<script src="javascripts/index.js"></script>
</head>
<body>
<div id="answerArea">
<h1>在线答题器</h1>
<p class="question">
<span>1. 1+1=(</span>
<span id="answer"></span> <!-- 答题后显示答题结果 -->
<span>)</span>
<font id="state" color="red">未答题</font> <!-- 显示答题状态 -->
</p>
<p class="answer">A:0</p>
<p class="answer">B:1</p>
<p class="answer">C:2</p>
<p class="answer">D:3</p>
<p class="question">
<span>A</span><input type="(1)" name="choose" value="A"> <!-- 第（1）空 -->
<span>B</span><input type="(1)" name="choose" value="B"> <!-- 第（1）空 -->
<span>C</span><input type="(1)" name="choose" value="C"> <!-- 第（1）空 -->
<span>D</span><input type="(1)" name="choose" value="D"> <!-- 第（1）空 -->
</p>
<p>
<input id="confirm" type="button" onclick="confirmAnswer()" (2)="确认选项"> <!-- 第（2）空 -->
<input id="clear" type="button" onclick="clearAnswer()" (2)="清除结果"> <!-- 第（2）空 -->
</p>
</div>
</body>
</html>
body{text-align:center;}
#answerArea{
/* 浮动 */
(3): left; /* 第（3）空 */
width:40%;
height:500px;
margin:0 30% 0 30%;
background:#ddd;
}
.answer{
text-align: left;
/* 左外边距 */
(4): 14%; /* 第（4）空 */
}
.question{
text-align: left;
/* 左外边距 */
(4): 10%; /* 第（4）空 */
}
#confirm{float: left;(4): 10%;} /* 第（4）空 */
#clear{float: left;(4): 20%;} /* 第（4）空 */
input[type='button']{
background-color: dodgerblue;
width:100px;
height:40px;
font-size: 15px;
color:#fff
}
//提交答案
function confirmAnswer(){
let theAnswer = getValue();
if(theAnswer != undefined){
let ajax = new XMLHttpRequest();
ajax.open("POST","（5）",false); //第（5）空
ajax.setRequestHeader("（6）","application/json;charset=UTF-8"); //第（6）空
let data = {
value:theAnswer
}
var json = JSON.(7)(data); //第（7）空
ajax.send(json);
//将答案显示到答题区
let answer = JSON.parse(ajax.responseText).answer;
document.getElementById("answer").innerHTML = answer;
document.getElementById("state").innerHTML = "已答题";
//锁定单选框
disabledRedio();
}else{ //如果没有选择答案，提示“请选择答案！”
alert("请选择答案！")
}
}
//清除答题结果
function clearAnswer(){
let ajax = new XMLHttpRequest();
ajax.open("delete","（8）",false); //第（8）空
ajax.setRequestHeader("（6）","application/x-www-form-urlencoded;charset=UTF-8"); //第（6）空
ajax.send();
//重新加载页面
window.location.reload();
}
//获取单选按钮的值
function getValue(){
let dom = document.(9)("choose"); //第（9）空
for(let i=0;i<dom.length;i++){
if(dom[i].checked == true){
return dom[i].(10); //第（10）空
}
}
}
//锁定单选框
function disabledRedio(){
let dom = document.(9)("choose"); //第（9）空
for(let i = 0;i<dom.length;i++){
dom[i].disabled = true;
}
}
var express = (11)('（12）'); //第（11）空和第（12）空
var router = express.Router();
var answer = (11)('../module/answer.js'); //第（11）空
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index');
});
//请求提交答案
router.(13)('/answers/answer',function(req,res,next){ //第（13）空
answer = req.body.value;
res.json({
answer:answer,
statusCode:201
})
res.end();
})
//清空答案
router.(14)('/answers/answer',function(req,res,next){ //第（14）空
answer = '';
res.json({
statusCode:204
})
res.end();
})
module.exports = (15); //第（15）空
20032-第三题
<template>
<div id="app">
<(1)/> <!-- 第（1）空 -->
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
*{margin:0 ;padding: 0}
body{background-color:#EBEEF5;}
li{list-style:none;}
</style>
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Login from '@/components/Login'
import ChatRoom from '@/components/ChatRoom'
export default new Router({
routes: [
{
(2):'/', //第（2）空
redirect:'/(3)' //第（3）空
},
{
(2):'/login', //第（2）空
name:'Login',
component:Login
},
{
(2):'/chatroom', //第（2）空
name:'ChatRoom',
component:ChatRoom
}
]
})
<template>
<div class="wrapper">
<!-- 标题 -->
<h1>用户登录</h1>
<form id="form_login" @submit.prevent="Login">
<input class="form_text" type="text" placeholder="请输入用户名" (4)="user"> <!--第（4）空-->
<input class="form_text" type="password" placeholder="请输入密码" (4)="password"> <!--第（4）空-->
<input type="submit" value="登录">
</form>
</div>
</template>
<script>
export default {
data() {
return {user: '', password: ''};
},
methods: {
//验证通过后，通过编程式路由进行页面跳转
Login() {
if (this.user != '' && this.password != '') {
(5).push({ //第（5）空
path:'chatroom',
(6):{stuser:this.user} //第（6）空
})
}
}
}
}
</script>
<style>
/*盒子水平居中*/
.wrapper {border: 1px solid #409EFF;padding:40px;width: 25%;margin: 0 auto;position: absolute;left:50%;top:50%;transform:translate(-50%,-80%);color:#303133;}
/*标题 */
h1 {text-align:center;margin-bottom:30px;font-weight:400;}
/*表单*/
#form_login .form_text {border:1px solid #dcdfe6;height:40px;line-height: 40px;width:70%;padding:0 15px;margin:0 15%;box-sizing:border-box;margin-bottom:20px;}
/*input的placeholder伪类型*/
#form_login .form_text:focus{
outline: none;
border: 1px solid #409EFF;
}
.form_text::placeholder{color:#c0c4cc;}
/*登录按钮*/
#form_login input[type='submit'] {color:#fff;background-color: #409eff;border:0 none;width: 70%;height:40px;line-height:40px;margin:0 15%;}
</style>
<template>
<div>
<div class="header">
<h1 class="title">网页聊天室</h1>
</div>
</div>
</template>
<script>
</script>
<!-- 组件间样式互不干扰 -->
<style (7)> /* 第(7)空 */
.header{
width:100%;
margin-top:30px
}
.title{
text-align: center;
}
</style>
<template>
<div>
<!-- 自定义页头 -->
<Header></Header>
<div class="room">
<div class="contactAll">
<!-- 当前登录用户-->
<div ref="userName" id="userName">{{userName}}</div>
<!-- 好友列表-->
<ul id="list_friend">
<li (8)="(item,index) in userList" @click="handleClick(index)" :class="[{active_li:activeIndex == index}]">{{ item.nickname }}</li> <!--第（8）空-->
</ul>
</div>
<!-- 对话框-->
<div class="dialog">
<!-- 父组件向子组件传参(chatName、chatContent) ,并监听content事件-->
<Dialog (9)chatName="chatName" (9)chatContent="chatContent" (10)content="getContent"></Dialog> <!--第（9）空和第（10）空-->
</div>
</div>
</div>
</template>
<script>
import Dialog from './Dialog';
import Header from './Header.vue';
export default {
(11):{ // 第（11）空
Dialog,
Header
}
data() {
return {
activeIndex:-1,
userName:'',
chatName:'',
chatContent:'',
userList:[
{nickname:'Plux',content:'Plux:你好！\n'},
{nickname:'Gams',content:'Gams:在吗？\n'},
{nickname:'Msbo',content:'Msbo:hello\n'},
{nickname:'Fngbuto',content:'Fngbuto:好好好\n'},
]
}
},
// Vue实例初始化完成后执行
(12)() { // 第（12）空
//获取当前登录用户名
this.userName = this.$route.query.stuser;
//初始化聊天内容chatContent，初始化chatName默认显示第一位好友的聊天窗口
if (this.userList.length > 0) {
this.activeIndex = 0;
this.chatName = this.userList[0].nickname;
this.chatContent = this.userList[0].content;
}
},
methods:{
//点击好友列表
handleClick(index) {
//当前选中的标签激活
this.activeIndex = index;
//当前选中的用户名
this.chatName= this.userList[index].nickname;
//当前选中的用户的聊天记录
this.chatContent = this.userList[index].content;
},
//获取子组件传过来的值
getContent(value) {
for (let i = 0;i < this.userList.length; i++) {
if (this.userList[i].nickname === this.chatName) {
this.userList[i].content += this.userName+':'+ value;
this.chatContent = this.userList[i].content;
}
}
}
},
}
</script>
<style>
/*聊天室宽高*/
.room {width:760px;height:640px;margin:20px auto;display: flex;}
/*用户名*/
#userName {border:1px solid #999;text-align: center;padding: 10px;margin-bottom:10px;}
/*好友列表宽高*/
#list_friend {border: 1px solid #999;width: 150px;height :590px;padding:10px;box-sizing:border-box;}
#list_friend li{text-align :center;height:40px;line-height:40px;background-color: #ffffff;margin-bottom:10px;}
/*点击li激活样式*/
#list_friend .active_li {color: #409eff;border-color: #c6e2ff;background-color:#ecf5ff;}
/*对话框*/
.dialog {margin:0 20px;width:600px;}
</style>
{{chatName}}
40035-第四题
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8 ">
<title>Web 阅读器</title>
<!-- 引入样式文件 -->
<link rel="(1)" type="(2)" href="(3)" /><!-- 补充代码（1）（2）（3） -->
<!-- 引入js文件 -->
<script src="(4)"></script> <!-- 补充代码（4） -->
</head>
<body>
<div class="btns">
<button onclick="(5)('./loadJSON.php')">开始阅读(JSON)</button><!-- 补充代码（5） -->
<button onclick="(6)('./loadXML.php')">开始阅读(XML) </button><!-- 补充代码（6） -->
</div>
<header></header>
<aside class="list"></aside>
<article class="content">
<p></p>
</article>
</body>
</html>
/*获取XML格式的书籍数据*/
var data = [];
function loadXML(url) {
clear();
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result = xmlhttp.(7);/*补充代码（7）*/
/*在这里构建目录和内容*/
var dom = document.getElementsByTagName("header")[0];
var h1 = document.createElement("h1");
h1.innerHTML = result.getElementsByTagName("title")[0].childNodes[0].nodeValue;
dom.appendChild(h1);
var dom = document.getElementsByTagName("aside")[0];
var index = 0;
for(var i = 0; i < result.getElementsByTagName("section").length; i++) {
var ul = document.createElement("ul");
ul.innerHTML = result.getElementsByTagName("subject")[i].childNodes[0].nodeValue;
for(var j = 0; j < result.getElementsByTagName("section")[i].getElementsByTagName("section1").length;j++){
data.push(result.getElementsByTagName("section")[i].getElementsByTagName("content")[j].childNodes[0].nodeValue);
var li = document.createElement("li");
li.id = index++;
/*在这里绑定onclick事件构建内容*/
li.onclick = function(){
document.getElementsByTagName("p")[0].innerHTML = data[this.id];
}
li.innerHTML = result.getElementsByTagName("section")[i].getElementsByTagName("subject1")[j].childNodes[0].nodeValue;
ul.appendChild(li);
dom.appendChild(ul);
}
}
}
}
xmlhttp.open("get",url,true);
// 发送请求
xmlhttp.(8)();/*补充代码（8）*/
}
/** 获取JSON格式的书籍数据 */
var json = {};
function loadJSON(url) {
clear();
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result = xmlhttp.(9);/* 补充代码（9）*/
result = (10)(result);/* 补充代码（10）*/
/*在这里构建目录和内容*/
var dom = document.getElementsByTagName("header")[0];
var h1 = document.createElement("h1") ;
h1.innerHTML = result.title;
dom.appendChild(h1);
var dom = document.getElementsByTagName("aside")[0];
for(var data in result) {
if(data.search ("subject") != -1){
var ul = document.createElement("ul") ;
ul.innerHTML = result[data];
ul.value = data;
/*在这里绑定onclick事件构建内容*/
ul.onclick = function() {
document.getElementsByTagName("p")[0].innerHTML = result["content" + this.value.split("subject")[1]]
};
dom.appendChild(ul);
}
}
}
}
xmlhttp.open("GET",url,true);
// 发送请求
xmlhttp.(8)();/*补充代码（8）*/
}
function clear() {
var dom = document.getElementsByTagName("header")[0];
while (dom.hasChildNodes()) {
dom.removeChild(dom.firstChild);
}
var dom = document.getElementsByTagName("aside")[0];
while (dom.hasChildNodes ()) {
dom.removeChild(dom.firstChild);
}
document.getElementsByTagName("P")[0].innerHTML = "";
}
40036-第五题
注册页面
账号注册
40037-第六题
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
h1{
text-align: center;
margin: 20px 0;
}
table {
width: 600px;
(1): 1px solid #000000; /* 补充代码（1） 设置边框 */
text-align: center;
margin: 0 auto;
border-collapse: collapse;
}
input[type=text] {
height: 25px;
padding: 0 5px;
outline: none;
}
th,td {
(2): 5px; /* 补充代码（2） 内边距5px */
(1): 1px solid #000000; /* 补充代码（1） 设置边框 */
}
button {
width: 130px;
height: 25px;
margin: 0 2px;
}
span {
(3): red; /* 补充代码（3） 设置文字颜色：红色 */
}
.datetime {
margin-top: 20px;
}
title = $title;
}
public function set($key, $val) {
$this->data[$key] = $val;
}
public function Display() {
echo "\n";
echo "\n";
echo "\n";
echo "\n";
echo "" . $this->title . " \n";
echo "\n";
echo "\n";
$this->DisplayHeader();
$this->DisplayContent();
$this->DisplayFooter();
echo "\n";
echo "";
}
public function DisplayHeader() {
echo "\n";
echo "" . $this->title . "
\n";
echo " \n";
}
public function DisplayFooter() {
date_default_timezone_set("Asia/Shanghai");
echo "\n";
}
public abstract function DisplayContent();
}
set("username", $_POST["username"]);
$page->set("content", $_POST["content"]);
$page->Display();
data["username"] . "：" . $this->data["content"];
}
}
40038-第七题
房屋贷款
<(1) rel="stylesheet" (2)="(3)" type="text/css" />
房贷计算器
贷款方式：
贷款金额：
<(4) class="cal-select" (5)="(6)" name="amount" placeholder="贷款金额" id="loansAmount" />
万元
贷款年限：
<(4) class="cal-select" (5)="(6)" name="year" placeholder="贷款年限" id="loansYear">
年
年利率：
* { /* 该选择器用于获取文档中所有标签 */
margin: 0;
padding: 0;
}
/* 初始化input、select、button元素的样式 */
input,(11),button { /* 补充代码（11） */
(12): none;/* 补充代码（12） 去掉激活后的蓝色外边框 */
border: none;
background: transparent;
border: 1px solid #cccccc;
}
/* 居中显示 */
.wrapper {
width: 40%;
margin: 50px auto;
padding: 20px;
border: 1px solid #999999;
border-radius: 2%;
(13): 2px 2px 3px #999999; /* 补充代码（13） 设置阴影，勿需进行浏览器兼容处理 */
}
/* 用户选择贷款方式 */
.wrapper h3 {
text-align: center;
margin: 10px 0 25px;
font-size: 25px;
}
/* 贷款方下拉列表框 */
#selectedBox {
width: 81%;
height: 30px;
line-height: 24px;
padding: 4px 8px;
font-size: 14px;
display: inline-block;
}
/* 用户输入区域 */
.cal-form {
margin-top: 20px;
}
/* 每一行 */
.cal-item {
margin: 12px 0;
}
/* 输入框名字 */
.cal-name {
width: 20%;
font-size: 16px;
font-weight: 600;
}
/* 输入框 */
.cal-select {
height: 30px;
line-height: 24px;
width: 70%;
padding-left: 10px;
font-size: 14px;
display: inline-block;
}
/* 下拉列表框 */
#loansRate {
margin-left: 16px;
width: 81%;
}
/* 计算房贷按钮 */
#calButton {
width: 100%;
height: 30px;
background-color: #1885F5;
color: #FFFFFF;
cursor: pointer;
}
/* 计算结果显示区域 */
.cal-result table {
margin-top: 10px;
width: 100%;
}
.cal-result tr {
height: 30px;
line-height: 24px;
margin: 12px 0;
font-size: 14px;
}
/* 计算结果表格标题栏 */
.cal-result th:nth-of-type(1) {
width: 30%;
font-size: 14px;
font-weight: normal;
background-color: #cccccc;
}
.cal-result th:nth-of-type(2) {
width: 60%;
font-size: 14px;
font-weight: normal;
background-color: #cccccc;
}
/* 计算结果表格标题 */
/* .cal-result th {
color: #ffffff;
display: inline-block;
font-size: 14px;
font-weight: normal;
background-color: #cccccc;
}
.cal-result th:first-child {
width: 30%;
margin-right: 2px;
}
.cal-result th:nth-child(2) {
width: 69.5%;
} */
/* 计算标题 */
.cal-title{
width: 20%;
font-size: 16px;
font-weight: 600;
}
/* 计算数据 */
.cal-price{
width: 80%;
padding-left: 20px;
color: darkorange;
font-weight: 600;
}
function house(){
this.num = 0; //贷款金额
this.year = 0; //贷款年限
this.yearRate = 0; //年利率
this.status = 0; //贷款方式:0表示等额本息、1表示等额本金
this.outputinfo = {
hkAmount:0, //月供
totalRate:0, //总利息
totalPrice:0 //还款金额
}
this.computeMethod1= function() {
//还款月数
var month= (14)(this.year) * 12; // 补充代码（14） 将年份转换成数值型（整型）
//月利率
var monthRate = parseFloat(this.yearRate) / 12;
//贷款金额
var loansNum = parseFloat(this.num) * 10000;
//月供
var hkAmount = (loansNum * monthRate * Math.pow((1 + monthRate),month))/(Math.pow((1+monthRate),month)-1);
//总利息＝还款月数x每月月供额度－贷款金额
var totalRate = month * hkAmount - loansNum;
//还款总额＝总利息＋贷款金额
var totalPrice = totalRate + loansNum;
//将结果赋值给outputinfo
this.outputinfo.hkAmount = hkAmount.toFixed(2);
this.outputinfo.totalRate = totalRate.toFixed(2);
this.outputinfo.totalPrice = totalPrice.toFixed(2);
}
this.computeMethod2 = function() {
//还款月数
var month= (14)(this.year)*12; // 补充代码（14） 将年份转换成数值型（整型）
//月利率
var monthRate = parseFloat(this.yearRate) / 12;
//贷款金额
var loansNum = parseFloat(this.num) * 10000;
//每月应还本金=贷款金额/还款月数
var everymonthyh = loansNum / month;
//月供额度＝（贷款金额／还款月数）＋（贷款金额－累计已还本金） x月利率
var hkAmount = loansNum / month + loansNum * monthRate;
//总利息＝{(贷款金额/还款月数+贷款金额*月利率)+贷款金额/还款金额=(1+月利率;)/2*还款月数-贷款金额}
var totalRate = ((everymonthyh+loansNum*monthRate)+loansNum/month*(1+monthRate))/2*month-loansNum;
//还款总额＝总利息＋贷款金额
var totalPrice = totalRate + loansNum;
//将结果赋值给outputinfo
this.outputinfo.hkAmount = hkAmount.toFixed(2);
this.outputinfo.totalRate = totalRate.toFixed(2);
this.outputinfo.totalPrice = totalPrice.toFixed(2);
}
}
var house = new house();
function getInputDate(){
//获取贷款金额
var loansNum = document.getElementById('loansAmount').value;
//获取贷款年限
var yearLimit = document.getElementById('loansYear').value;
//获取贷款年利率
var loansSelect = document.getElementById('loansRate').value;
//监听select选择的是等额本金还是等额本息
var selectObj = document.getElementById('selectedBox').value;
//设置贷款金额为1万~一千万元
var numReg = new RegExp("^([0-9]{1,3}|1000)$");
//设置贷款年限为5~30年
var yearReg = new RegExp("^([5-9]|[12][0-9]|30)$");
if(numReg.test(loansNum) && yearReg.test(yearLimit)){
//给house对象中的输入框属性赋值
house.num = loansNum;
house.year = yearLimit;
house.yearRate = loansSelect;
house.status = selectObj;
return true
}else{//验证不通过
alert('您输入的贷款金额或贷款年限不对，\n您的贷款金额只能为1-1000万元！\n您的贷款年限为5-30年！');
document.getElementById('loansAmount').(15); /* 补充代码（15） 让“贷款金额”这个文本框获得焦点，便于重新输入 */
return false;
}
}
//显示计算结果函数
function showResult(){
var tableObj = document.getElementsByClassName('cal-result')[0];
//把计算结果保存到一个数组中
var result= [house.outputinfo.hkAmount, house.outputinfo.totalPrice,house.outputinfo.totalRate];
//定义一个显示文本的数组
var text = ['月供','还款总额','总利息'];
//显示计算结果
var html = '项目 金额 '+result[i]+' ';
}
html += '
'
tableObj.innerHTML = html;
}
//定义点击事件处理函数
function calResult(){
//获取用户输入的值
if(getInputDate()){
//判断等额本金还是等额本息，分别调用不同的方法
if(house.status == 0){
house.computeMethod1();
}else if(house.status == 1){
house.computeMethod2();
}
//显示计算结果
showResult();
}else{
//验证不通过，清空显示结果
document.getElementsByClassName('cal-result')[0].innerHTML = '';
}
}
40039-第九题
（5）();//第（5）空
return view('（6）', ['shopList' => $shopList]);//第（6）空
}
/**
* 显示创建商品表单页.
*
*/
public function create()
{
return view('page.add');
}
/**
* 保存新增的商品信息
*
*/
public function save(（7） $request) //第（7）空
{
//接收新增商品信息
$code = $request->post("code");
$name = $request->post("name");
$type = $request->post("type");
$price = $request->post("price");
$number = $request->post("number");
//判断商品编号是否已存在
$goods = DB::table('t_goods')->where('code',$code)->（8）(); //第（8）空
if ($goods) {
return view('page.add',['（9）'=>'此商品已存在！']); //第（9）空
}
//保存新增的商品信息
$data = array(
'code' => $code,
'name' => $name,
'type' => $type,
'price' => $price,
'number' => $number,
);
$result = DB::table('t_goods')->insert($data);
return （10）('/'); //第（10）空
}
/**
* 编辑商品信息
*
*/
public function edit($id)
{
//获取指定的商品信息
$goods = DB::table('t_goods')->where('id',$id)->（8）(); //第（8）空
return view('page.change', ['goods' => $goods]);
}
/**
* 保存更新的商品信息
*
*/
public function update(（7） $request, $id) //第（7）空
{
//接收更新商品信息
$code = $request->post("code");
$name = $request->post("name");
$type = $request->post("type");
$price = $request->post("price");
$number = $request->post("number");
//更新指定的商品信息
$data = array(
'code' => $code,
'name' => $name,
'type' => $type,
'price' => $price,
'number' => $number,
);
$result = DB::table('t_goods')->where('id', $id)->update($data);;
return （10）('/');//第（10）空
}
/**
* 删除指定资源
*
*/
public function delete($id)
{
$result = DB::table('t_goods')->where('id', $id)->delete();
//删除成功，跳转至首页
return （10）('/');//第（10）空
}
}
商品管理平台
商品管理平台
编号
名称
分类
价格
数量
操作
@（12）($shopList as $v)
{{$v->code}}
{{$v->name}}
{{$v->type}}
{{$v->price}}
{{$v->number}}
@（13）
商品添加
商品添加
标题
内容
60029-第十题
电商网
电商网
注册
- 商品名称:XXXX
- 商品价格:XXXX
- 交易数量:XXXX
- 商品名称:XXXX
- 商品价格:XXXX
- 交易数量:XXXX
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
/* 头部width设置为100%适应屏幕宽度，使用CSS3的flex布局，flex布局中的水平方向对齐方式，让弹性子元素平均分布，即每个项目两侧的间隔相等 */
#top{
width: 100%;
height: 50px;
(5): flex; /* 第(5)空 */
align-items: center;
justify-content: (6); /* 第(6)空 */
}
.brand{font-size: 22px;}
/* 使用CSS3的属性选择器设置搜索框的尺寸 */
#top input[(7)=search]{width: 160px;} /* 第(7)空 */
.content{
width: 90%;
margin: 10px auto;
padding: 5px;
border: 1px #eeeeee solid;
/* 边框圆角 */
(8): 15px; /* 第(8)空 */
/* 边框阴影:水平位置 垂直位置 模糊距离 阴影大小 阴影颜色 */
(9): 0px 0px 8px 0px #eeeeee; /* 第(9)空 */
}
.pic_info img{
border-radius: 15px;
/* 设置图片的宽度，使其适应父元素的宽度 */
width: 100%;
}
.pic_info{
/* 设置父元素为弹性盒模型容器 */
display: flex;
align-items: center;
}
.pic_box{
/* 使用flex属性分配弹性子元素占有的区域大小 */
flex: 0.7;
}
.pic_info ul{
flex: 1;
}
/* 自定义字体 */
@(10){ /* 第(10)空 */
/* 自定义字体的名字 */
font-family: myFont;
/* 自定义字体路径 */
src: url('../ziti/1.TTF');
}
.pic_info li{
padding-left: 20px;
line-height: 20px;
font-size: 18px;
/* 使用自定义字体 第(11)空 */
(11): 'myFont';
}
/* 选择器匹配父元素中的第n个子元素，可以为公式 */
.pic_info li:nth-child(2n-1){
opacity: 0.6; /* 设置背景或背景颜色，以及字体颜色的透明度 */
color: red;
}
60030-第十一题
<(1) type="text/javascript" src="js/jquery-3.5.1.min.js">
<(1) type="text/javascript" src="js/jquery-ui.js">
Document
抽奖列表
60031-第十二题
视频网站
<(5)>
视频播放器
这是页头
<(6)>
Yui Aragaki
<(7) autocomplete="on">
<(8)
name="input"
id="content"
cols="20"
rows="3"
(9)="请输入评论..."
title="评论框"
accesskey="g"
spellcheck="true"
>
/* 设置body中元素居中显示 */
body{
(14): center; /* 第(14)空 */
}
/* 设置页头高度和宽度 */
header{
height: 10%;
width: 100%;
}
section{
width: 100%;
}
/* 输入评论 */
textarea{
width: 90%;
height: 100%;
resize: none;
}
/* 取消的背景颜色 */
mark{
background: (15); /* 第(15)空 */
}
/* 评论列表文字居左 */
#commentList{
text-align: left;
}
60032-第十三题
微博
<(1) type="text/css">
.list1 li {
list-style-type: none;
border: 2px solid;
}
list1 li:nth-child(1) { /*微博列表第一个列表项*/
(2): 1px solid #ccc; /*为列表添加边框 第(2)空 */
(3): 6px; /*设置列表圆角 第(3)空 */
(4): 0 1px 1px #ccc; /*列表阴影设置 第(4)空 */
}
.list1 li:(5) { /*微博列表最后一个列表项 第(5)空 */
(2): solid #ccc 1px; /*为列表添加边框 第(2)空 */
(3): 6px; /*设置表格圆角 第(3)空 */
(4): 0 1px 1px #ccc; /*表格阴影设置 第(4)空 */
}
/*引入外部字体*/
@(6) { /* 第(6)空 */
font-family: YourWebFontName;
(7): url('fonts/1.TTF') ; /* 第(7)空 */
}
/*将外部字体应用到页面元素*/
.list1 li {
(8): 'YourWebFontName'; /* 第(8)空 */
}
.list1 li:last-child{
background-color: (9)(0,100%,60%,0.5);/*设置颜色 第(9)空 */
}
article {
float: left;
}
/* 第(1)空 */
<(10) action="">
<(11) type="text">
-
>杨老师，生日快乐!
张一龙 6月3日
29468
78452
47777
-
>你好2019 今天是充满童真的一天。
李欣 6月3日
294 68
78452
47777
-
>祝愿即将高考的学子们考出自已理想的成绩~
杨凯 6月3日
29468
78452
47777
-
>偷偷藏起来，喜欢被同学取笑。
张伟 6月3日
29468
78452
47777
-
>周一放送——这位顾客您好，今天想来买点什么?要不要看本季度最新到货的~
胡糊 6月3日
29468
78452
47777
