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 的核心库只关注视图层, ...
随机推荐
- Hibernate不能实时获取MySQL数据库的更新
在hibernate.cfg.xml配置文件中,增加以下内容: <property name="hibernate.connection.provider_class"> ...
- Java的进阶之道
Java的进阶之道 一.温馨提示 尽量用google查找技术资料.(条件允许的话) 有问题在stackoverflow找找,大部分都已经有人回答. 多看官方的技术文档. ibm developerwo ...
- 字典树Java实现
Trie树的原理 Trie树也称字典树,因为其效率很高,所以在在字符串查找.前缀匹配等中应用很广泛,其高效率是以空间为代价的. 利用串构建一个字典树,这个字典树保存了串的公共前缀信息,因此可以降低查询 ...
- Unit Testing of Spring MVC
试验1:做的条目不发现首先,我们必须确保我们的应用是工作性质所做条目不发现.我们可以写的测试以确保通过以下步骤: 1.配置的模拟对象时抛出一个todonotfoundexception findbyi ...
- C语言学生管理系统源码分享
大家好 我就是如假包换的...陈玲 自从运营了C语言程序设计微信公众号 很多粉丝都给我备注 ...奇葩 实在是不敢当 也被人开始叫玲玲姐 我知道 很多人都想看我出境 我本人也有 年多的舞台演讲训练 实 ...
- 如何在MAC下安装Myeclipse2015真的很虐心！！！！！！！！！！
最近笔者换了一个新的笔记本,mac pro 因为同学说大公司的web开发都是写在Linux操作系统下的,所以我决定搞一个,但是装软件就是很困难啊!找了大量资料发现都不全,最后,终于搞好了,分享给同样虐 ...
- POJ 3621 Sightseeing Cows (bellman-Ford + 01分数规划)
题意:给出 n 个点 m 条有向边,要求选出一个环,使得这上面 点权和/边权和 最大. 析:同样转成是01分数规划的形式,F / L 要这个值最大,也就是 G(r) = F - L * r 这个值为0 ...
- struts2 file
JavaBean 中: private File[] pic; private String[] picContentType; private String [] picFileName; sett ...
- Ubuntu在命令行开启远程桌面
在终端执行下列三个命令即可 gsettings set org.gnome.Vino enabled truegsettings set org.gnome.Vino prompt-enabled f ...
- 个人封装JavaScript函数
function get_next_day(str_date){ var d=""; d=new Date(str_date); d.setDate(d.getDate()+1); ...