day 32 css后续补充以及js 简单入门
前情提要:
利用html 和css ,js 模拟小米的官网(待做)
一:第一个sj利子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// <!--编写js代码-->
document.write('<h1>hello world</h1>')
// 把网页发送到网页上
alert('hello python')
// 弹出提示框
</script>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<script>
document.write('<h1>hello java</h1>')
</script>
</body>
</html>
<script>
document.write('<h1>hello golang</h1>')
</script>
二:引入外部js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script type="text/javascript" src="d.js">-->
<!--或者--> <script src="d.js" async>
</script>
</head>
<body>
<input type="button" value="click me" onclick="alert(11)">
</body>
</html>
alert("hello wold")
三:定义变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var aa = '早乙女';
var bb = 10.5;
var cc = true;
dd = 10;
alert(aa);
alert(bb);
alert(cc);
alert(dd);
</script>
</head>
<body> </body>
</html>
四:运算符号
五:条件判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var aa=[40];
if (aa>60){
document.write("<p>优秀</p>")
}
else if(aa>50){
document.write("<p>及格</p>")
}
else {
document.write("<p>不及格</p>")
}
</script>
</head>
<body> </body>
</html>
六:条件判断2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// <!--根据需求生成星期几-->
var aa=2;
switch (aa){
case 1:{
document.write('这是星期1')
}
break;
case 2:{
document.write('这是星期2')
}
break;
case 3:{
document.write('这是星期3')
}
break;
default:{
document.write('没这个新奇')
}break; } </script>
</head>
<body> </body>
</html>
七:循环
一:
二:
三:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// <!--while 循环条件写在前面-->
// <!--输出1~10的和-->
// var num =0;
// var sun =0;
// while (num<10){
// sun =sun+num;
// num++;
// }
// alert(sun)
// do while 循环
// 计算1~10 内的奇数和
// var num =0;
// var sun =0;
// do{
// if (num%2==1){
// sun=sun+num;
// }
// num=num+1;
// }while (num<10)
// alert(sun)
// 计算1~10 的偶数相加
var sun =0;
for (var num =1;num<=10;num++){
if (num%2==0){
sun=sun+num;
}
}
alert(sun)
</script>
</head>
<body> </body>
</html>
八:循环案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// <!--生成一个三角形-->
for (var i=1;i<=6;i++){
// 生成空格数量
var spnum =6-i;
for(var col=1;col<=spnum;col++){
document.write(' ');
}
var srnum =2*i-1;
for (var nol=1;nol<=srnum;nol++){
document.write("*")
}
document.write("<br/>") }
</script>
</head>
<body> </body>
</html>
day 32 css后续补充以及js 简单入门的更多相关文章
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- JS简单入门教程
JS简单教程 使用方法:放到任意html页面的head标签下 Test1方法弹出当前时间对话框 Test2方法for循环输出 Test3方法for(…in…)输出数组内容 <script typ ...
- css属性补充与JS数据类型
目录 溢出属性(overflow) 定位(position) z-index属性 opacity不透明度 JavaScript简介 变量与注释 数据类型 数值(Number) 字符串(String) ...
- [转]Backbone.js简单入门范例
本文转自:http://dmyz.org/archives/598 11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要 ...
- anime.js 简单入门教程
anime.js是一个强大的用来制作动画的javascript库,虽然功能没有GASP(greensock)强大,但胜在它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全. 下面就来看看如 ...
- angular.js简单入门。
小弟刚接触angular js 就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...
- JS简单入门
------------恢复内容开始------------ JavaScript,可以减少网页的规模,提高网页的浏览速度,丰富页面的表现和功能 HTML是进行基本结构的创建的,比如说表格和表单等, ...
- 98、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- 13、vue.js简单入门
本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
随机推荐
- JavaScript 代码小片段
1.获取对象 obj 的所有属性(自有属性和继承属性),保存到数组 lst 中 //获取对象obj的所有属性(自有属性和继承属性),保存到数组lst 中 var lst = []; function ...
- 2018.06.30 cdq分治
#cdq分治 ##一种奇妙的分治方法 优点:可以顶替复杂的高级数据结构:常数比较小. 缺点:必须离线操作. CDQ分治的基本思想十分简单.如下: 我们要解决一系列问题,包含修改和查询操作,我们将这些问 ...
- Django入门指南-第7章：模板引擎设置（完结）
http://127.0.0.1:8000/ <!--templates/home.html--> <!DOCTYPE html> <html> <head& ...
- python中的list和array的不同之处 及转换
python中的list和array的不同之处list是列表,可以通过索引查找数值,但是不能对整个列表进行数值运算 In [96]: b=[1,2] In [97]: b[1]Out[97]: 2In ...
- Spring3.x错误---- Cannot proxy target class because CGLIB2 is not available. Add CGLIB to the class path or specify proxy interfaces.
Spring3.x错误: 解决方法: 缺少cglib的包, 下载地址: http://sourceforge.net/projects/cglib/files/latest/download?sour ...
- 高博-《视觉SLAM十四讲》
0 讲座 (1)SLAM定义 对比雷达传感器和视觉传感器的优缺点(主要介绍视觉SLAM) 单目:不知道尺度信息 双目:知道尺度信息,但测量范围根据预定的基线相关 RGBD:知道深度信息,但是深度信息对 ...
- day15(mysql 的多表查询，事务)
mysql之多表查询 1.合并结果集 作用:合并结果集就是把两个select语句查询的结果连接到一起! /*创建表t1*/ CREATE TABLE t1( a INT PRIMARY KEY , b ...
- （匹配 最小路径覆盖）Air Raid --hdu --1151
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1151 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- GoF设计模式学习-单例模式
1.目的 控制实例的个数,类设计者应该保证只有一个实例,不能将此责任[只有一个实例]强制交给类使用者. 2.整体实现 1.单线程单例模式的实现. using System; using System. ...
- 比较分析 Spring AOP 和 AspectJ 之间的差别
面向方面的编程(AOP) 是一种编程范式,旨在通过允许横切关注点的分离,提高模块化.AOP提供方面来将跨越对象关注点模块化.虽然现在可以获得许多AOP框架,但在这里我们要区分的只有两个流行的框架:Sp ...