整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
我们刚开始学习JS代码时，我们只需要掌握JS中对应知识点就好，随着对JS代码的熟悉程度，我们就要思考如何写出更优雅，更简洁的代码。
接下来我分享10种常用JS代码功能，通过常规写法和优雅写法的对比，来体现其优雅和简洁性。代码中用了ES6新特性，如果你对ES6不了解，可以先收藏好。在后期的VUE中，基本都在和ES6打交道。
常规写法
利用concat方法来合并数组
const apples=["红苹果", "绿苹果"];
const fruits=["西瓜", "草莓", "葡萄"].concat(apples);
console.log(fruits); // ['西瓜', '草莓', '葡萄', '红苹果', '绿苹果']优雅写法
利用ES6中的...扩展运算符来合并数组
const apples=["红苹果", "绿苹果"];
const fruits=["西瓜", "草莓", "葡萄", ...apples];
console.log(fruits);//['西瓜', '草莓', '葡萄', '红苹果', '绿苹果']常规写法
利用数组下标一个一个从数组中取数据
const num=[1, 2];
const num1=num[0];
const num2=num[1];
console.log(num1, num2); //1 2优雅写法
利用ES6的解构赋值来取值
const num=[1, 2];
const [num1, num2]=num;
console.log(num1, num2);常规写法
对象.属性名 的方式获取属性值
const user={
name: "张三",
age: 30,
};
const name=user.name;
const age=user.age;
console.log(name, age);//"张三" 30优雅写法
利用ES6的解构赋值来实现
const user={
name: "张三",
age: 30,
};
const { name, age }=user;
console.log(name, age); // 张三 30常规写法
利用for循环来遍历数组，从而取值
const fruits=["西瓜", "草莓", "葡萄", "苹果"];
for (let i=0; i < fruits.length; i++) {
console.log(fruits[i]);
}优雅写法
利用ES6的for ... of来遍历数组取值
const fruits=["西瓜", "草莓", "葡萄", "苹果"];
for (fruit of fruits) {
console.log(fruit);
}常规写法
forEach中回调函数为普通函数
const fruits=["西瓜", "草莓", "葡萄", "苹果"];
fruits.forEach(function (fruit) {
console.log(fruit); //西瓜 草莓 葡萄 苹果
});优雅写法
forEach中回调函数为箭头函数，如果箭头函数中只有一句代码，则可以省略{ }
const fruits=["西瓜", "草莓", "葡萄", "苹果"];
fruits.forEach((fruit)=> console.log(fruit)); //西瓜 草莓 葡萄 苹果常规写法
数组中保存着每一条水果的信息，我们通过输入水果名，到数组中查找到对应的信息。
利用常规的for循环遍历来查找。
const fruits=[
{ name: "苹果", order: 1 },
{ name: "李子", order: 4 },
{ name: "香蕉", order: 2 },
];
function getApples(arr, value) {
for (let index=0; index < arr.length; index++) {
if (arr[index].name===value) {
return arr[index];
}
}
}
const result=getApples(fruits, "苹果");
console.log(result); // { name: "苹果", order: 1 }优雅写法
利用数组的find方法来实现搜索
const fruits=[
{ name: "苹果", order: 1 },
{ name: "李子", order: 4 },
{ name: "香蕉", order: 2 },
];
function getApples(arr, value) {
return arr.find((obj)=> obj.name===value);
}
const result=getApples(fruits, "李子");
console.log(result);常规写法
利用parseInt来实现
const num=parseInt("10");
console.log(num,typeof num); // 10 "number"优雅写法
利用+ 号来实现，不过只针对纯数字的字符串有效
const num=+"10";
console.log(num,typeof num); //=> 10 "number"
console.log(+"10"===10); // true;常规写法
通过if判断，如果为null，则初始化值为“普通用户”
//获取用户角色
function getUserRole(role) {
let userRole;
if (role) {
userRole=role;
} else {
userRole="普通用户";
}
return userRole;
}
console.log(getUserRole()); //普通用户
console.log(getUserRole("管理员")); //管理员优雅写法
通过 || 或短路运算符来实现
function getUserRole(role) {
return role || "普通用户"; // 默认值定义的常见方法
}
console.log(getUserRole()); // "普通用户"
console.log(getUserRole("管理员")); // "管理员";常规写法
const name="张三";
const age=23;
const message="大家好,我叫" + name + "今年" + age + "岁了！";
console.log(message); //大家好，我叫张三，今年23岁了！优雅写法
const name="张三";
const age=23;
const message=`大家好，我叫${name}，今年${age}岁了！`;
console.log(message); // Hi DevPoint!常规写法
利用for循环来遍历
const employee={ name: "张三", age: 30 };
const salary={ grade: "A" };
const summary=salary; //用来做合并后对象
for (const key in employee) {
summary[key]=employee[key];
}
console.log(summary); // {grade: 'A', name: '张三', age: 30}优雅写法
利用es6的扩展运算符和解构赋值来实现
const employee={ name: "张三", age: 30 };
const salary={ grade: "A" };
const summary={ ...employee, ...salary };
console.log(summary); // { name: '张三', age: 30, grade: 'A' }
最后我想告诉大家一个好消息，为了帮助关注我的同学，我们创建了《30天挑战学习计划》，全程免费，不涉及任何费用和利益，具体内容为以下4部分
1、HTML5+CSS3核心知识
2、30个HTML5+CSS3案例
3、2个PC+移动+响应式综合项目实战
4、网站全面上云部署与发布
接下来我来详细介绍下这个课程体系！
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。
如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条号！老师会邀请你进入学习，并给你发放相关资料
30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程
avaScript，也称为JS，是一种遵循ECMAScript规范的编程语言。它是高级的、即时编译的和多范式的。它有助于创建交互式网页，并且是构建基于Web应用程序的重要元素。
Javascript 库是一组可以不时重复用于不同编程的代码。换句话说，它大大节省了多次编写代码所需的时间。它降低了创建基于 JS 的应用程序的复杂性。它主要由许多元素组成，例如对象和函数。
1.React
React 是最著名和最常用的 Javascript 库。它是一个由 Facebook 支持的开源库。它用于创建小型、中型和大型 Web 应用程序，以及创建高质量、功能丰富且直观的网站。
React 通常被称为 SPA 或单页应用程序，该术语用于能够适应单个网页的 Web 应用程序，而不需要不断刷新页面。通过使用 Javascript，我们可以在需要时加载内容。它使用有助于封装代码和状态的组件，组件的使用有助于轻松控制复杂的用户界面。
React 使用 JSX，它是 HTML 和 Javascript 的组合。它不是模板语言；它提供了 Javascript 的完整实践经验。有时很少有学习者会发现 JSX 相当复杂。但是，在使用它一段时间后，你将了解它的好处。例如，JSX 可以轻松地将 JavaScript 表达式直接包装在 HTML 中。从初学者的角度来看，React 的学习曲线很陡峭，
2. jQuery
jQuery 在开发领域已经存在很长时间，jQuery 是一个主要用于文档对象模型 (DOM) 操作的库。DOM 是一种树状结构，表示网页上的所有元素。
该库可以选择 DOM 元素、制作精美的设计/动画、处理事件等等。jQuery 的主要目标是解决跨平台不兼容问题并对其进行改进，同时促进 HTML 和 Javascript 的分离。
虽然很多浏览器都在使用 jQuery，但它已经不像几年前那么重要了。现代浏览器已经在他们的 DOM 接口上工作和改进，使得对 jQuery 的需求比以前减少了。作为初学者，最好通过学习这一点来开始你的旅程。
3. Vue
Vue 基于 Virtual DOM 模型，具有基于组件的架构。可以使用 Vue 快速构建应用程序，并且它使用更少的代码行来完成相同的任务，而对于其他一些库来说，这需要更多的代码。通过将 Vue 与其他工具和实用程序相结合，你可以获得一个成熟的框架。作为一个框架，Vue 可以处理复杂的功能，例如路由、构建工具和状态管理。
4. D3.js
D3 是一个 Javascript 库，主要专注于数据可视化。D3 开发背后的主要原因是比其他库更具视觉表现力，更先进，更符合最新趋势。这就是为什么 D3 被称为最流行的 JavaScript 数据可视化库之一。
如果你的意图是制作精美的设计和实体，那么 D3 就是你的理想之选。它可以是像饼图和条形图这样简单的东西，也可以是像 3D 图这样复杂的东西。这个库有一个强大的 API，类似于你在 jQuery 中找到的。简而言之，如果你正在寻找一个提供良好可视化效果的库，那么 D3 将是你的最佳选择。
JavaScript 在前端开发中处于首位，HTML、CSS 和 JavaScript 是前端开发的核心。Javascript 库是主流，开发人员使用它们来创建更好的网站或应用程序。
了解更多
JavaScript是最好的语言之一，尤其是在前端开发中。在本文中，您将找到7个为初学者提供免费源代码的最佳javascript项目。
手把手教你7个有趣的JavaScript 项目-上「附源码」（本篇）
手把手教你7个有趣的JavaScript 项目-下「附源码」
如果您是javascript语言的初学者，则待办事项列表应用程序是最好的和最容易的应用程序之一，如果您使用HTML CSS和一点点的javascript，则可以创建此简单的待办事项列表应用程序，您将找到源代码这个js项目的底部。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>创建待办事项列表应用</title>
<style type="text/css">
$primary: #313e50;
$grey: #cdcdcd;
$secondary: #1dd2af;
%reset {
margin: 0;
padding: 0;
border: none;
outline: none;
background: transparent;
}
%transition {
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
body {
background: #f1f1f1;
margin-top: 2rem;
}
/*PEN STYLES*/
.tasker {
max-width: 400px;
margin: 0 auto;
.error {
display: none;
background: rgba(237, 28, 36, 0.7);
color: #fff;
padding: 14px;
margin-bottom: 10px;
border-radius: 5px;
text-align: center;
}
ul {
@extend %reset;
background: #fff;
}
li,
.error,
button,
input {
@extend %reset;
font: 18px/1.25em Helvetica, Arial, Sans-serif;
}
}
.tasker-header {
display: inline-flex;
background: $primary;
justify-content: space-between;
width: 100%;
input,
button {
color: #fff;
box-sizing: border-box;
font-size: 1.25em;
padding: 14px;
}
input {
flex-grow: 2;
}
button {
@extend %transition;
background: $secondary;
border-left: 1px solid ($secondary * 1.05);
&:hover {
background: $secondary * 1.1;
}
}
}
.tasker-body {
.task {
display: block;
position: relative;
padding: 14px 40px 14px 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
&:last-child {
border-bottom: none;
}
&:hover > button {
opacity: 1;
}
&.completed {
color: $grey;
text-decoration: line-through;
}
input {
margin-right: 10px;
}
button {
@extend %transition;
color: $grey;
margin: 14px;
position: absolute;
top: 0;
right: 0;
opacity: 0;
&:hover {
color: #ed1c24;
}
}
}
}
</style>
</head>
<body>
<!--PEN CODE-->
<div id="tasker" class="tasker">
<div id="error" class="error">Please enter a task</div>
<div id="tasker-header" class="tasker-header">
<input type="text" id="input-task" placeholder="Enter a task">
<button id="add-task-btn"><i class="fa fa-fw fa-plus"></i>
</button>
</div>
<div class="tasker-body">
<ul id="tasks"></ul>
</div>
</div>
<!--END PEN CODE-->
<script type="text/javascript">
(function() {
'use strict';
var tasker={
init: function() {
this.cacheDom();
this.bindEvents();
this.evalTasklist();
},
cacheDom: function() {
this.taskInput=document.getElementById("input-task");
this.addBtn=document.getElementById("add-task-btn");
this.tasklist=document.getElementById("tasks");
this.tasklistChildren=this.tasklist.children;
this.errorMessage=document.getElementById("error");
},
bindEvents: function() {
this.addBtn.onclick=this.addTask.bind(this);
this.taskInput.onkeypress=this.enterKey.bind(this);
},
evalTasklist: function() {
var i, chkBox, delBtn;
//BIND CLICK EVENTS TO ELEMENTS
for (i=0; i < this.tasklistChildren.length; i +=1) {
//ADD CLICK EVENT TO CHECKBOXES
chkBox=this.tasklistChildren[i].getElementsByTagName("input")[0];
chkBox.onclick=this.completeTask.bind(this, this.tasklistChildren[i], chkBox);
//ADD CLICK EVENT TO DELETE BUTTON
delBtn=this.tasklistChildren[i].getElementsByTagName("button")[0];
delBtn.onclick=this.delTask.bind(this, i);
}
},
render: function() {
var taskLi, taskChkbx, taskVal, taskBtn, taskTrsh;
//BUILD HTML
taskLi=document.createElement("li");
taskLi.setAttribute("class", "task");
//CHECKBOX
taskChkbx=document.createElement("input");
taskChkbx.setAttribute("type", "checkbox");
//USER TASK
taskVal=document.createTextNode(this.taskInput.value);
//DELETE BUTTON
taskBtn=document.createElement("button");
//TRASH ICON
taskTrsh=document.createElement("i");
taskTrsh.setAttribute("class", "fa fa-trash");
//INSTERT TRASH CAN INTO BUTTON
taskBtn.appendChild(taskTrsh);
//APPEND ELEMENTS TO TASKLI
taskLi.appendChild(taskChkbx);
taskLi.appendChild(taskVal);
taskLi.appendChild(taskBtn);
//ADD TASK TO TASK LIST
this.tasklist.appendChild(taskLi);
},
completeTask: function(i, chkBox) {
if (chkBox.checked) {
i.className="task completed";
} else {
this.incompleteTask(i);
}
},
incompleteTask: function(i) {
i.className="task";
},
enterKey: function(event) {
if (event.keyCode===13 || event.which===13) {
this.addTask();
}
},
addTask: function() {
var value=this.taskInput.value;
this.errorMessage.style.display="none";
if (value==="") {
this.error();
} else {
this.render();
this.taskInput.value="";
this.evalTasklist();
}
},
delTask: function(i) {
this.tasklist.children[i].remove();
this.evalTasklist();
},
error: function() {
this.errorMessage.style.display="block";
}
};
tasker.init();
}());
</script>
</body>
</html>您可以使用javascript初学者创建的第二个小项目是时间轴，许多现代网站都使用该时间轴使网站更具交互性和动态性。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS创建垂直时间轴（里程碑）</title>
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: normal 16px/1.5 "Helvetica Neue", sans-serif;
background: #456990;
color: #fff;
overflow-x: hidden;
padding-bottom: 50px;
} /* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
background: #F45B69;
padding: 100px 0;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 2.5rem;
}
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul {
background: #456990;
padding: 50px 0;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
background: #F45B69;
}
.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(odd) div {
left: 45px;
}
.timeline ul li:nth-child(odd) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #F45B69 transparent transparent;
}
.timeline ul li:nth-child(even) div {
left: -439px;
}
.timeline ul li:nth-child(even) div::before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #F45B69;
}
time {
display: block;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 8px;
}
/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline ul li::after {
transition: background .5s ease-in-out;
}
.timeline ul li.in-view::after {
background: #F45B69;
}
.timeline ul li div {
visibility: hidden;
opacity: 0;
transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div {
transform: translate3d(200px, 0, 0);
}
.timeline ul li:nth-child(even) div {
transform: translate3d(-200px, 0, 0);
}
.timeline ul li.in-view div {
transform: none;
visibility: visible;
opacity: 1;
}
/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
.timeline ul li div {
width: 250px;
}
.timeline ul li:nth-child(even) div {
left: -289px;
/*250+45-6*/
}
}
@media screen and (max-width: 600px) {
.timeline ul li {
margin-left: 20px;
}
.timeline ul li div {
width: calc(100vw - 91px);
}
.timeline ul li:nth-child(even) div {
left: 45px;
}
.timeline ul li:nth-child(even) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent #F45B69 transparent transparent;
}
}
</style>
</head>
<body>
<section class="intro">
<div class="container">
<h1>Vertical Timeline ↓</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>1934</time> demo1
</div>
</li>
<li>
<div>
<time>1937</time> demo1
</div>
</li>
<li>
<div>
<time>1940</time> demo1
</div>
</li>
<li>
<div>
<time>1943</time> demo1
</div>
</li>
<li>
<div>
<time>1946</time> demo1
</div>
</li>
<li>
<div>
<time>1956</time> demo1
</div>
</li>
<li>
<div>
<time>1957</time> demo1
</div>
</li>
<li>
<div>
<time>1967</time>demo1
</div>
</li>
<li>
<div>
<time>1977</time> demo1
</div>
</li>
<li>
<div>
<time>1985</time> demo1
</div>
</li>
<li>
<div>
<time>2000</time> demo1
</div>
</li>
<li>
<div>
<time>2005</time> demo1
</div>
</li>
</ul>
</section>
<script type="text/javascript">
(function() {
'use strict';
// define variables
var items=document.querySelectorAll(".timeline li");
// check if an element is in viewport
// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport(el) {
var rect=el.getBoundingClientRect();
return (
rect.top >=0 &&
rect.left >=0 &&
rect.bottom <=(window.innerHeight || document.documentElement.clientHeight) &&
rect.right <=(window.innerWidth || document.documentElement.clientWidth)
);
}
function callbackFunc() {
for (var i=0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
items[i].classList.add("in-view");
}
}
}
// listen for events
window.addEventListener("load", callbackFunc);
window.addEventListener("resize", callbackFunc);
window.addEventListener("scroll", callbackFunc);
})();
</script>
</body>
</html>如果您想构建简单而有趣的东西来练习JavaScript知识，那么使用HTML CSS和JS创建TIC TAC TOE游戏对您来说是个不错的选择，该游戏虽然简单但并不容易，因此您需要专注于该项目的逻辑方面，因为它是该项目最具挑战性的部分。
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FreeCodeCamp: Tictactoe</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Yesteryear);
$app-background-color : #508ABB;
$app-row-height : 100%;
$winAnimStartColor : cyan;
$winAnimEndColor : #508ABB;
// html, body, div, span, a, li, td, th {
// font-family: 'Lato', sans-serif;
// font-weight: 300;
//
// }
@-webkit-keyframes winAnim{
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
@-moz-keyframes winAnim{
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
@-o-keyframes winAnim {
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
@keyframes winAnim {
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
@keyframes winAnim {
0% {
background-color: $winAnimStartColor;
}
100% {
background-color: $winAnimEndColor;
}
}
*{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline-style:none;/*IE*/
}
.center-box{
margin : auto;
position: absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
}
html,body{
//background-image: linear-gradient(to bottom,#dddbd1,#d2dbdc);
background-color: #d2dbdc;
height : 100%;
width : 100%;
}
.app{
@extend .center-box;
width : 80%;
height : 70%;
max-width: 550px;
background-color : $app-background-color;
box-shadow: 0 5px 30px -5px rgba(0,0,0, .85);
border-radius: 10px;
.app-container,
.app-row{
height: $app-row-height;
}
}
.play-box,.symbol-option{
font-family: 'Yesteryear', cursive;
}
.play-box{
border-bottom : 2px solid #fff;
border-right : 2px solid #fff;
height : $app-row-height / 3;
cursor: pointer;
position: relative;
&.last-right{
border-right : none;
}
&.last-bottom{
border-bottom : none;
}
&.win {
-webkit-animation: winAnim .2s ease-out infinite;
-moz-animation: winAnim .2s ease-out infinite;
-o-animation: winAnim .2s ease-out infinite;
animation: winAnim .2s ease-out infinite;
animation : winAnim .5s infinite;
}
.symbol{
@extend .center-box;
width: 50%;
height : 50px;
text-align: center;
line-height : 50px;
font-size: 35px;
color : white;
}
}
.modal-content{
.content{
padding : 15px;
text-align: center;
margin : 0;
&.body{
line-height: 2;
}
}
.symbol-options{
width: 200px;
margin-top: 10px;
.symbol-option{
&:first-child{
margin-right: 10px;
}
&:last-child{
margin-left: 10px;
}
}
}
.warning-hr{
margin: 0;
}
}
</style>
</head>
<body>
<div class="app">
<div class="container-fluid app-container">
<div class="row app-row">
<div class="col-xs-4 play-box" id="0">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box" id="1">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-right" id="2">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box" id="3">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box" id="4">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-right" id="5">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-bottom" id="6">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-bottom" id="7">
<div class="symbol"></div>
</div>
<div class="col-xs-4 play-box last-right last-bottom" id="8">
<div class="symbol"></div>
</div>
</div>
</div>
</div>
<div class="modal fade app-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-size">
<div class="modal-content">
<h3 class="content heading">Warning!!!</h3>
<hr class="warning-hr">
<div class="content body">
Please save your time and don't even think you're smart. <br><strong><em>I'M SMARTER THAN YOU! HA-HA-HA!!!</em></strong> <br>
Wana try me? Chose : <br>
<div class="center-block symbol-options">
<button class="symbol-option btn btn-default btn-md" data-dismiss="modal">X</button> OR <button class="symbol-option btn btn-default btn-md" data-dismiss="modal">O</button>
</div>
</div>
</div>
</div>
</div>
<script src="../js/bundled/tictactoe.bundled.js">
</script>
</body>
</html>许多现代网站和博客都使用倒数计时器来显示倒数，例如，我们通过使用倒数计时器来告诉在线商店的访问者，商品价格将在价格上涨后增加销售量。具体时间。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CSS创建垂直时间轴（里程碑）</title>
<style type="text/css">
/* Variabes */
$orange: #ffa600;
$grey:#f3f3f3;
$white: #fff;
$base-color:$orange ;
/* Mixin's */
@mixin transition {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
@mixin corners ($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
-khtml-border-radius: $radius;
}
body {
background:$base-color;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
height:100%;
}
.wrapper {
width: 800px;
margin: 30px auto;
color:$white;
text-align:center;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 2.6em;
text-transform: uppercase;
}
#seconds, #tens{
font-size:2em;
}
button{
@include corners (5px);
background:$base-color;
color:$white;
border: solid 1px $white;
text-decoration:none;
cursor:pointer;
font-size:1.2em;
padding:18px 10px;
width:180px;
margin: 10px;
outline: none;
&:hover{
@include transition;
background:$white;
border: solid 1px $white;
color:$base-color;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Stopwatch</h1>
<h2>Vanilla JavaScript Stopwatch</h2>
<p><span id="seconds">00</span>:<span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
<script type="text/javascript">
window.onload=function () {
var seconds=00;
var tens=00;
var appendTens=document.getElementById("tens")
var appendSeconds=document.getElementById("seconds")
var buttonStart=document.getElementById('button-start');
var buttonStop=document.getElementById('button-stop');
var buttonReset=document.getElementById('button-reset');
var Interval ;
buttonStart.onclick=function() {
clearInterval(Interval);
Interval=setInterval(startTimer, 10);
}
buttonStop.onclick=function() {
clearInterval(Interval);
}
buttonReset.onclick=function() {
clearInterval(Interval);
tens="00";
seconds="00";
appendTens.innerHTML=tens;
appendSeconds.innerHTML=seconds;
}
function startTimer () {
tens++;
if(tens < 9){
appendTens.innerHTML="0" + tens;
}
if (tens > 9){
appendTens.innerHTML=tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML="0" + seconds;
tens=0;
appendTens.innerHTML="0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML=seconds;
}
}<script src="../js/bundled/tictactoe.bundled.js">
</script>
}
</script>
</body>
</html>我可以用JavaScript构建游戏吗？答案是肯定的，使用javascript甚至可以创建复杂的游戏，但是在这种情况下，我们将专注于一个简单的游戏，该游戏可让您练习HTML CSS和javascript技能。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>使用js调用设备摄像头并实现拍照</title>
<style type="text/css">
body {
text-align: center;
}
</style>
</head>
<body>
<script type="text/javascript">
// Global Variables
var DIRECTION={
IDLE: 0,
UP: 1,
DOWN: 2,
LEFT: 3,
RIGHT: 4
};
var rounds=[5, 5, 3, 3, 2];
var colors=['#1abc9c', '#2ecc71', '#3498db', '#e74c3c', '#9b59b6'];
// The ball object (The cube that bounces back and forth)
var Ball={
new: function (incrementedSpeed) {
return {
width: 18,
height: 18,
x: (this.canvas.width / 2) - 9,
y: (this.canvas.height / 2) - 9,
moveX: DIRECTION.IDLE,
moveY: DIRECTION.IDLE,
speed: incrementedSpeed || 9
};
}
};
// The paddle object (The two lines that move up and down)
var Paddle={
new: function (side) {
return {
width: 18,
height: 70,
x: side==='left' ? 150 : this.canvas.width - 150,
y: (this.canvas.height / 2) - 35,
score: 0,
move: DIRECTION.IDLE,
speed: 10
};
}
};
var Game={
initialize: function () {
this.canvas=document.querySelector('canvas');
this.context=this.canvas.getContext('2d');
this.canvas.width=1400;
this.canvas.height=1000;
this.canvas.style.width=(this.canvas.width / 2) + 'px';
this.canvas.style.height=(this.canvas.height / 2) + 'px';
this.player=Paddle.new.call(this, 'left');
this.paddle=Paddle.new.call(this, 'right');
this.ball=Ball.new.call(this);
this.paddle.speed=8;
this.running=this.over=false;
this.turn=this.paddle;
this.timer=this.round=0;
this.color='#2c3e50';
Pong.menu();
Pong.listen();
},
endGameMenu: function (text) {
// Change the canvas font size and color
Pong.context.font='50px Courier New';
Pong.context.fillStyle=this.color;
// Draw the rectangle behind the 'Press any key to begin' text.
Pong.context.fillRect(
Pong.canvas.width / 2 - 350,
Pong.canvas.height / 2 - 48,
700,
100
);
// Change the canvas color;
Pong.context.fillStyle='#ffffff';
// Draw the end game menu text ('Game Over' and 'Winner')
Pong.context.fillText(text,
Pong.canvas.width / 2,
Pong.canvas.height / 2 + 15
);
setTimeout(function () {
Pong=Object.assign({}, Game);
Pong.initialize();
}, 3000);
},
menu: function () {
// Draw all the Pong objects in their current state
Pong.draw();
// Change the canvas font size and color
this.context.font='50px Courier New';
this.context.fillStyle=this.color;
// Draw the rectangle behind the 'Press any key to begin' text.
this.context.fillRect(
this.canvas.width / 2 - 350,
this.canvas.height / 2 - 48,
700,
100
);
// Change the canvas color;
this.context.fillStyle='#ffffff';
// Draw the 'press any key to begin' text
this.context.fillText('Press any key to begin',
this.canvas.width / 2,
this.canvas.height / 2 + 15
);
},
// Update all objects (move the player, paddle, ball, increment the score, etc.)
update: function () {
if (!this.over) {
// If the ball collides with the bound limits - correct the x and y coords.
if (this.ball.x <=0) Pong._resetTurn.call(this, this.paddle, this.player);
if (this.ball.x >=this.canvas.width - this.ball.width) Pong._resetTurn.call(this, this.player, this.paddle);
if (this.ball.y <=0) this.ball.moveY=DIRECTION.DOWN;
if (this.ball.y >=this.canvas.height - this.ball.height) this.ball.moveY=DIRECTION.UP;
// Move player if they player.move value was updated by a keyboard event
if (this.player.move===DIRECTION.UP) this.player.y -=this.player.speed;
else if (this.player.move===DIRECTION.DOWN) this.player.y +=this.player.speed;
// On new serve (start of each turn) move the ball to the correct side
// and randomize the direction to add some challenge.
if (Pong._turnDelayIsOver.call(this) && this.turn) {
this.ball.moveX=this.turn===this.player ? DIRECTION.LEFT : DIRECTION.RIGHT;
this.ball.moveY=[DIRECTION.UP, DIRECTION.DOWN][Math.round(Math.random())];
this.ball.y=Math.floor(Math.random() * this.canvas.height - 200) + 200;
this.turn=null;
}
// If the player collides with the bound limits, update the x and y coords.
if (this.player.y <=0) this.player.y=0;
else if (this.player.y >=(this.canvas.height - this.player.height)) this.player.y=(this.canvas.height - this.player.height);
// Move ball in intended direction based on moveY and moveX values
if (this.ball.moveY===DIRECTION.UP) this.ball.y -=(this.ball.speed / 1.5);
else if (this.ball.moveY===DIRECTION.DOWN) this.ball.y +=(this.ball.speed / 1.5);
if (this.ball.moveX===DIRECTION.LEFT) this.ball.x -=this.ball.speed;
else if (this.ball.moveX===DIRECTION.RIGHT) this.ball.x +=this.ball.speed;
// Handle paddle (AI) UP and DOWN movement
if (this.paddle.y > this.ball.y - (this.paddle.height / 2)) {
if (this.ball.moveX===DIRECTION.RIGHT) this.paddle.y -=this.paddle.speed / 1.5;
else this.paddle.y -=this.paddle.speed / 4;
}
if (this.paddle.y < this.ball.y - (this.paddle.height / 2)) {
if (this.ball.moveX===DIRECTION.RIGHT) this.paddle.y +=this.paddle.speed / 1.5;
else this.paddle.y +=this.paddle.speed / 4;
}
// Handle paddle (AI) wall collision
if (this.paddle.y >=this.canvas.height - this.paddle.height) this.paddle.y=this.canvas.height - this.paddle.height;
else if (this.paddle.y <=0) this.paddle.y=0;
// Handle Player-Ball collisions
if (this.ball.x - this.ball.width <=this.player.x && this.ball.x >=this.player.x - this.player.width) {
if (this.ball.y <=this.player.y + this.player.height && this.ball.y + this.ball.height >=this.player.y) {
this.ball.x=(this.player.x + this.ball.width);
this.ball.moveX=DIRECTION.RIGHT;
beep1.play();
}
}
// Handle paddle-ball collision
if (this.ball.x - this.ball.width <=this.paddle.x && this.ball.x >=this.paddle.x - this.paddle.width) {
if (this.ball.y <=this.paddle.y + this.paddle.height && this.ball.y + this.ball.height >=this.paddle.y) {
this.ball.x=(this.paddle.x - this.ball.width);
this.ball.moveX=DIRECTION.LEFT;
beep1.play();
}
}
}
// Handle the end of round transition
// Check to see if the player won the round.
if (this.player.score===rounds[this.round]) {
// Check to see if there are any more rounds/levels left and display the victory screen if
// there are not.
if (!rounds[this.round + 1]) {
this.over=true;
setTimeout(function () { Pong.endGameMenu('Winner!'); }, 1000);
} else {
// If there is another round, reset all the values and increment the round number.
this.color=this._generateRoundColor();
this.player.score=this.paddle.score=0;
this.player.speed +=0.5;
this.paddle.speed +=1;
this.ball.speed +=1;
this.round +=1;
beep3.play();
}
}
// Check to see if the paddle/AI has won the round.
else if (this.paddle.score===rounds[this.round]) {
this.over=true;
setTimeout(function () { Pong.endGameMenu('Game Over!'); }, 1000);
}
},
// Draw the objects to the canvas element
draw: function () {
// Clear the Canvas
this.context.clearRect(
0,
0,
this.canvas.width,
this.canvas.height
);
// Set the fill style to black
this.context.fillStyle=this.color;
// Draw the background
this.context.fillRect(
0,
0,
this.canvas.width,
this.canvas.height
);
// Set the fill style to white (For the paddles and the ball)
this.context.fillStyle='#ffffff';
// Draw the Player
this.context.fillRect(
this.player.x,
this.player.y,
this.player.width,
this.player.height
);
// Draw the Paddle
this.context.fillRect(
this.paddle.x,
this.paddle.y,
this.paddle.width,
this.paddle.height
);
// Draw the Ball
if (Pong._turnDelayIsOver.call(this)) {
this.context.fillRect(
this.ball.x,
this.ball.y,
this.ball.width,
this.ball.height
);
}
// Draw the net (Line in the middle)
this.context.beginPath();
this.context.setLineDash([7, 15]);
this.context.moveTo((this.canvas.width / 2), this.canvas.height - 140);
this.context.lineTo((this.canvas.width / 2), 140);
this.context.lineWidth=10;
this.context.strokeStyle='#ffffff';
this.context.stroke();
// Set the default canvas font and align it to the center
this.context.font='100px Courier New';
this.context.textAlign='center';
// Draw the players score (left)
this.context.fillText(
this.player.score.toString(),
(this.canvas.width / 2) - 300,
200
);
// Draw the paddles score (right)
this.context.fillText(
this.paddle.score.toString(),
(this.canvas.width / 2) + 300,
200
);
// Change the font size for the center score text
this.context.font='30px Courier New';
// Draw the winning score (center)
this.context.fillText(
'Round ' + (Pong.round + 1),
(this.canvas.width / 2),
35
);
// Change the font size for the center score value
this.context.font='40px Courier';
// Draw the current round number
this.context.fillText(
rounds[Pong.round] ? rounds[Pong.round] : rounds[Pong.round - 1],
(this.canvas.width / 2),
100
);
},
loop: function () {
Pong.update();
Pong.draw();
// If the game is not over, draw the next frame.
if (!Pong.over) requestAnimationFrame(Pong.loop);
},
listen: function () {
document.addEventListener('keydown', function (key) {
// Handle the 'Press any key to begin' function and start the game.
if (Pong.running===false) {
Pong.running=true;
window.requestAnimationFrame(Pong.loop);
}
// Handle up arrow and w key events
if (key.keyCode===38 || key.keyCode===87) Pong.player.move=DIRECTION.UP;
// Handle down arrow and s key events
if (key.keyCode===40 || key.keyCode===83) Pong.player.move=DIRECTION.DOWN;
});
// Stop the player from moving when there are no keys being pressed.
document.addEventListener('keyup', function (key) { Pong.player.move=DIRECTION.IDLE; });
},
// Reset the ball location, the player turns and set a delay before the next round begins.
_resetTurn: function(victor, loser) {
this.ball=Ball.new.call(this, this.ball.speed);
this.turn=loser;
this.timer=(new Date()).getTime();
victor.score++;
beep2.play();
},
// Wait for a delay to have passed after each turn.
_turnDelayIsOver: function() {
return ((new Date()).getTime() - this.timer >=1000);
},
// Select a random color as the background of each level/round.
_generateRoundColor: function () {
var newColor=colors[Math.floor(Math.random() * colors.length)];
if (newColor===this.color) return Pong._generateRoundColor();
return newColor;
}
};
var Pong=Object.assign({}, Game);
Pong.initialize();
</script>
</body>
</html>本篇未完结，请继续看下一篇：手把手教你7个有趣的JavaScript 项目-下「附源码」
《JavaScript 使用 mediaDevices API 访问摄像头自拍》
*请认真填写需求信息，我们会在24小时内与您取得联系。
